visualproof 0.1.0 → 0.2.0

package/dist/web/bundle/edges.js

@@ -1,8 +1,6 @@
 // src/shared/graph.ts
 var SITE_STMT = 1;
 var SITE_BODY = 2;
-var SITE_PROOF = 4;
-var SITE_GRAMMAR = 8;
 var SITE_TCB = SITE_STMT | SITE_BODY;
 
 // src/web/src/bundles.ts
@@ -166,7 +164,7 @@ var LEVELS_KEPT = 6;
 var OverviewModel = class {
   g = null;
   tree = null;
-  toggles = { externals: true, proofs: false };
+  toggles = { externals: true };
   levels = /* @__PURE__ */ new Map();
   setGraph(g) {
     this.g = g;
@@ -210,7 +208,7 @@ var OverviewModel = class {
   aggregateLevel(level, places) {
     const g = this.g;
     const unit = units({ ...this.tree, curR: places.curR }, Math.pow(2, level / 2), 45);
-    const sites = SITE_STMT | SITE_BODY | (this.toggles.proofs ? SITE_PROOF | SITE_GRAMMAR : 0);
+    const sites = SITE_STMT | SITE_BODY;
     const ext = this.toggles.externals;
     const pairs = aggregate(g, unit, sites, (i) => i < g.projectCount || ext);
     return { pairs, units: Int32Array.from(new Set(unit)) };
@@ -334,7 +332,7 @@ var EdgeWorkerCore = class {
         this.base = m.base;
         this.model.setTree(
           { nc: m.nc, n: m.n, parent: m.parent, nodeCluster: m.nodeCluster, rep: m.rep },
-          { externals: m.externals, proofs: m.proofs }
+          { externals: m.externals }
         );
         this.prune(post);
         break;

package/dist/web/index.html

@@ -2,26 +2,36 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>VisualProof</title>
   <link rel="icon" href="data:,">
   <script>
-    // the theme before the first paint (web/src/theme.ts keeps it after): light, dark, or the system's
+    // the theme before the first paint (web/src/theme.ts keeps it after): light unless the reader
+    // chose dark, or the system's
     try {
       var t = localStorage.getItem("visualproof:theme");
-      document.documentElement.dataset.theme = t === "light" || t === "dark" ? t : matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      document.documentElement.dataset.theme = t === "dark" ? "dark" : t === "system" && matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
     } catch (e) {
-      document.documentElement.dataset.theme = matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      document.documentElement.dataset.theme = "light";
     }
   </script>
   <link rel="stylesheet" href="/style.css">
 </head>
 <body data-mode="tcb">
+  <!-- an artwork style's ground, under the board within the frame (web/src/artframe.ts) -->
+  <canvas id="art-sky" hidden></canvas>
   <canvas id="canvas"></canvas>
   <canvas id="labels"></canvas>
   <div id="cards"></div>
   <!-- the notes on the board, over the canvas at a fixed size (web/src/sticky.ts) -->
   <div id="stickies"></div>
+  <!-- the linear form: the board drawn as its document's outline (web/src/linear.ts, ExportSpec
+       decision 18) -->
+  <canvas id="linear" hidden></canvas>
+  <!-- the artwork mode: the frame over the board and the shade around it, and its panel
+       (web/src/artframe.ts, ExportSpec decision 19) -->
+  <div id="art" hidden></div>
+  <div id="art-panel" class="modal-box glass" hidden></div>
 
   <header id="bar" class="glass">
     <div class="brand"><span class="nav"><button id="nav-back" title="Back (Alt ←)" aria-label="Back" disabled><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M10 3.5 5.5 8l4.5 4.5"/></svg></button><button id="nav-fwd" title="Forward (Alt →)" aria-label="Forward" disabled><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M6 3.5 10.5 8 6 12.5"/></svg></button></span><span class="logo">VisualProof</span><span id="project" class="project"></span><span id="snapshot" class="snapshot" hidden></span><button id="build" class="build-pill" hidden title="Build status (b)"><span class="b-dot"></span><span class="b-text"></span></button></div>
@@ -46,7 +56,7 @@
         <div id="library-pop" class="glass" role="dialog" aria-label="The library" hidden></div>
       </div>
       <!-- a document of targets, typeset with LaTeX (web/src/exportmodal.ts) -->
-      <button id="export-btn" class="act-btn" title="Export: this view as a document, typeset with LaTeX">
+      <button id="export-btn" class="act-btn" title="Export: this view as a document, typeset with LaTeX; or the board as a picture (Artwork)">
         <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true"><path d="M8 2.5v7.5M5 7l3 3 3-3M3 11.5v1.8h10v-1.8"/></svg>
         <span>Export</span>
       </button>
@@ -68,11 +78,18 @@
         <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>
+      <!-- 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>
+        <div id="more-pop" class="glass" role="menu" aria-label="More" hidden></div>
+      </div>
     </div>
     <div id="progress"><div></div></div>
   </header>
   <!-- the top: your tabs (the views you have open) and your mode, how a click selects — yours alone -->
   <div id="viewbar">
+    <!-- on a phone, the side panel opens as a drawer from here (web/src/phone.ts) -->
+    <button id="side-btn" class="views-btn side-btn" aria-label="The board: targets and clusters" aria-expanded="false" title="The board: targets and clusters"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M2.5 4h11M2.5 8h11M2.5 12h11"/></svg></button>
     <div id="tabs" class="tabs" role="tablist" aria-label="Your views"></div>
     <div class="views-wrap">
       <button id="views-btn" class="views-btn" aria-haspopup="menu" title="Views: a new one, a copy of this one, its name; every view kept on this server">Views<svg viewBox="0 0 16 16" width="12" height="12" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
@@ -98,6 +115,7 @@
           <button data-mode="deps" aria-describedby="mode-tip">Uses</button>
           <button data-mode="tcb" aria-describedby="mode-tip">TCB</button>
           <button data-mode="keys" aria-describedby="mode-tip">Keys</button>
+          <button data-mode="refs" aria-describedby="mode-tip">Direct</button>
         </span>
       </span>
       <button data-mode="apps" aria-describedby="mode-tip">Used by</button>
@@ -179,7 +197,7 @@
     <div id="eyes-pop" class="glass" role="dialog" aria-label="How you see the board" hidden>
       <button id="lock-btn" class="eye" title="The lock, on by default: a drag pans the view, never a declaration, a circle or a note; clicks still select. Let it go and a drag moves them, for everyone on this board (l). Hold Ctrl (⌘ on a Mac) for the other way while held." aria-pressed="true"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path class="lk-body" d="M4 7.5h8v5.5H4z"/><path class="lk-shackle" d="M5.6 7.5V5.4a2.4 2.4 0 0 1 4.8 0v2.1"/></svg><span class="eye-l">Layout locked</span><kbd>l</kbd></button>
       <button id="edges-btn" class="eye" title="Edges: the bundled overview of the dependencies, faint under a selection, whose own edges always show (g)" aria-pressed="true"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3.5 12.5C7 12.5 9 3.5 12.5 3.5"/><circle cx="3.5" cy="12.5" r="1.4"/><circle cx="12.5" cy="3.5" r="1.4"/></svg><span class="eye-l">Edges</span><kbd>g</kbd></button>
-      <button id="proofs-btn" class="eye" title="Proof edges: also the dependencies that occur only inside proofs" aria-pressed="false"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3.5 12.5C7 12.5 9 3.5 12.5 3.5" stroke-dasharray="1.6 2.2"/><rect x="10.5" y="10.5" width="3.5" height="3.5" rx="0.5"/></svg><span class="eye-l">Proof edges</span></button>
+      <button id="linear-btn" class="eye" title="Linear form: the board drawn as its document's outline, on one line, the first at the top; drag along it to reorder the document (o)" aria-pressed="false"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M8 2v12"/><circle cx="8" cy="4" r="1.4"/><circle cx="8" cy="8" r="1.4"/><circle cx="8" cy="12" r="1.4"/><path d="M10.5 4h3M10.5 8h3M10.5 12h3"/></svg><span class="eye-l">Linear form</span><kbd>o</kbd></button>
       <div class="eye-theme"><span class="eye-l">Theme</span><div id="theme-seg" class="seg mini" role="radiogroup" aria-label="Theme"></div></div>
     </div>
   </div>

package/dist/web/src/scene.js

@@ -224,6 +224,23 @@ export class Scene {
         this.moving = true;
         return true;
     }
+    /** Pin one body at a place in its parent's coordinates, as a drop there would (the linear form's
+     *  drop, web/src/linear.ts): brought inside the parent, the latest drop, the rest making way. */
+    pinAt(kind, k, lx, ly) {
+        if (kind === "cluster") {
+            this.pinC.set(k, this.inside(this.parent[k], this.homeSize(k), lx, ly));
+            this.dropSeq.set(k, this.dropNext++);
+            this.touch(this.parent[k]);
+        }
+        else {
+            this.pinN.set(k, this.inside(this.nodeCluster[k], LEAF_R, lx, ly));
+            this.dropSeq.set(this.nc + k, this.dropNext++);
+            this.touch(this.nodeCluster[k]);
+        }
+        this.computeAnchors();
+        this.motion?.wakeDisplaced();
+        this.moving = true;
+    }
     pins(names) {
         const out = { nodes: {}, clusters: {} };
         const r = (v) => Math.round(v * 10) / 10;

package/dist/web/style.css

@@ -1,10 +1,33 @@
 /* VisualProof — quiet surfaces, one gradient for what matters. */
 
+/* the fonts an artwork is drawn in (ExportSpec decision 19; assets/webfonts/, SIL Open Font License):
+   Source Sans 3 for its names, Source Serif 4 for the starfield's; their Latin and Greek, the rest of
+   a name from the fonts the system has */
+@font-face { font-family: "Source Sans 3"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/fonts/source-sans-3-greek-wght-normal.woff2") format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
+@font-face { font-family: "Source Sans 3"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: "Source Sans 3"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+@font-face { font-family: "Source Sans 3"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/fonts/source-sans-3-greek-wght-italic.woff2") format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
+@font-face { font-family: "Source Sans 3"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/fonts/source-sans-3-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: "Source Sans 3"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/fonts/source-sans-3-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/fonts/source-serif-4-greek-wght-normal.woff2") format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
+@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/fonts/source-serif-4-greek-wght-italic.woff2") format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
+@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/fonts/source-serif-4-latin-ext-wght-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: "Source Serif 4"; font-style: italic; font-display: swap; font-weight: 200 900; src: url("/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+
+/* Jost, for an artwork's title and its top-level clusters' names, in spaced capitals (the owner's
+   decision of 2026-10-15): its Latin */
+@font-face { font-family: "Jost"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/jost-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
+@font-face { font-family: "Jost"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
+
 /* `hidden` hides, whatever display a class gives the element (the tooltip's `display: flex` kept
    it on screen after it was hidden) */
 [hidden] { display: none !important; }
 
 :root {
+  /* the camera's easing (web/src/canvas.ts, animate), for what moves with it */
+  --art-ease: cubic-bezier(0.65, 0, 0.35, 1);
   --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
   --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
 
@@ -189,6 +212,88 @@ button { font: inherit; color: inherit; cursor: pointer; }
 #canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
 #labels { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
 #cards { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
+/* a finger held on the board opens its menu there, under the finger (web/src/canvas.ts): iOS would
+   select the text it then finds under it, or offer the canvas as an image */
+#canvas, #cards, #ctxmenu { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
+#ctxmenu input, #ctxmenu textarea { -webkit-user-select: text; user-select: text; }
+/* the linear form, over the board and its notes, under the panels (web/src/linear.ts) */
+#linear { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 5; }
+#linear[hidden] { display: none; }
+/* the artwork mode (web/src/artframe.ts): the board is the picture, the frame over it a viewfinder,
+   everything around it shaded; the board under it takes the pointer */
+#art { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
+#art[hidden] { display: none; }
+.art-frame { position: absolute; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.45); outline: 2px solid var(--accent); border-radius: 2px; }
+/* over the board within the frame, its title and foot as the files have them (web/src/artframe.ts,
+   renderInk); under it, a style's ground (renderSky), before the board's canvas in the page */
+.art-ink { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
+#art-sky { position: fixed; display: block; pointer-events: none; }
+#art-sky[hidden] { display: none; }
+/* the mode coming and going (web/src/artframe.ts, start and end; ExportSpec decision 19): as the linear
+   form, over 480 ms — the frame closing in from the whole screen as its shade comes, or opening out as
+   it goes; the panel sliding in or away; the board dipping to its ground while its look changes; the
+   title, the foot and the strips beside the frame once it is still */
+body.art-moving .art-frame { transition: left 480ms var(--art-ease), top 480ms var(--art-ease), width 480ms var(--art-ease), height 480ms var(--art-ease), box-shadow 480ms ease, outline-color 480ms ease; }
+#art.art-away .art-frame { box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0); outline-color: transparent; }
+.art-ink, .art-head, .art-tail { transition: opacity 200ms ease; }
+body.art-moving .art-ink, body.art-moving .art-head, body.art-moving .art-tail, #art.art-away .art-head, #art.art-away .art-tail { opacity: 0; }
+#art-panel { transition: opacity 480ms var(--art-ease), transform 480ms var(--art-ease); }
+#art-panel.art-away { opacity: 0; transform: translateX(24px); }
+body.art-moving { transition: background-color 180ms ease; }
+body.art-moving #canvas, body.art-moving #labels, body.art-moving #cards, body.art-moving #stickies { transition: opacity 180ms ease; }
+body.art-moving #art-sky { transition: opacity 180ms ease, left 480ms var(--art-ease), top 480ms var(--art-ease), width 480ms var(--art-ease), height 480ms var(--art-ease); }
+body.art-dip #canvas, body.art-dip #labels, body.art-dip #cards, body.art-dip #stickies, body.art-dip #art-sky { opacity: 0; }
+body[data-art-style]:not([data-art-bg]) { background: #06080e; }
+.art-size output { margin-left: 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
+.art-size input[type="range"] { width: 100%; }
+/* the artwork's background on the board: none is shown as a checkerboard; its notes hidden */
+body[data-art-bg="transparent"] { background: repeating-conic-gradient(rgba(128, 128, 128, 0.2) 0 25%, transparent 0 50%) 0 0 / 16px 16px, var(--canvas); }
+body.art-nonotes #stickies { display: none; }
+#art-panel { position: fixed; top: 76px; right: 16px; z-index: 41; width: 300px; max-height: calc(100vh - 100px); overflow: auto; padding-bottom: 0; }
+/* the panel's sections, each under a small heading; its buttons kept in view at its foot */
+.art-secs { display: grid; gap: 14px; margin-top: 10px; }
+.art-sec { border-top: 1px solid var(--line); padding-top: 10px; }
+.art-sec-h { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
+.art-save { position: sticky; bottom: 0; margin: 4px -18px 0; padding: 12px 18px 14px; background: var(--surface-solid); border-top: 1px solid var(--line); }
+/* in the shade beside the frame: the title's strip above its top left, the source's switch below its
+   bottom right (web/src/artframe.ts) */
+.art-head, .art-tail { position: absolute; pointer-events: auto; border-radius: 10px; font-size: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
+.art-head { transform: translateY(-100%); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; padding: 7px 10px; }
+.art-head-field input[type="text"] { width: var(--w, 10em); max-width: 100%; }
+.art-head .art-size input[type="range"], .art-tail .art-size input[type="range"] { width: 9em; padding: 0; border: 0; background: none; }
+.art-head [data-art-own][hidden] { display: none; }
+.art-tail { display: flex; align-items: center; gap: 14px; padding: 4px 10px; }
+.art-tail .art-size { flex-direction: row; align-items: center; gap: 8px; }
+.art-tail .ex-check { margin: 0; }
+#art-panel[hidden] { display: none; }
+.art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
+.art-grid .ex-wide, .art-grid .art-note, .art-grid .ex-checks { grid-column: 1 / -1; }
+.art-note { font-size: 11.5px; line-height: 1.4; }
+/* names and targets by selection (ExportSpec decision 19): a filter, All and None, the lines ticked
+   or not, scrolled within the panel */
+.art-pick { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; }
+.art-pick-head { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
+.art-pick-head > span { flex: 1; }
+.art-pick-head .rv-btn { padding: 3px 8px; font-size: 11.5px; white-space: nowrap; }
+.art-filter {
+  flex: 1; min-width: 0; font: 12.5px var(--font); color: var(--text); background: var(--surface-solid);
+  border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px;
+}
+.art-rows { max-height: 176px; overflow: auto; padding: 3px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-solid); }
+.art-row { display: flex; align-items: center; gap: 6px; padding: 1px 8px; font-size: 12px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
+.art-row:hover { background: var(--code-bg); }
+.art-row input { margin: 0; flex: none; }
+.art-row span { overflow: hidden; text-overflow: ellipsis; }
+.art-rows-h { padding: 4px 8px 1px; font-size: 10.5px; color: var(--text-3); }
+.ex-tabs { margin: 2px 0 4px; }
+/* in the artwork mode, the panels are put away: the frame has the room */
+body.framing #side, body.framing #panel, body.framing #selbar, body.framing #lensbar, body.framing #tm-kept,
+body.framing #viewbar, body.framing #foot, body.framing #zoom, body.framing #tabs, body.framing #legend { visibility: hidden; opacity: 0; }
+/* of the bar, Share and Search alone: the rest out of reach (web/src/main.ts, drawLook) */
+body.framing #bar [inert] { opacity: 0.32; }
+/* both fading as the mode comes and goes */
+body.art-moving :is(#side, #panel, #selbar, #lensbar, #tm-kept, #viewbar, #foot, #zoom, #tabs, #legend) { transition: opacity 240ms ease, visibility 240ms; }
+body.art-moving :is(#bar .brand, #bar .library-wrap, #export-btn, #activity-btn, #bar .peers-wrap, #bar .who-wrap, #help-btn, #bar .more-wrap) { transition: opacity 240ms ease; }
 
 .glass {
   background: var(--surface);
@@ -526,11 +631,11 @@ button.o-trust:hover { color: var(--accent); background: var(--code-bg); }
 .sw-win.moving .sw-head { cursor: grabbing; }
 .sw-head .nav { margin-right: 2px; }
 /* under the title bar, why the pairing opened no reference beside it (AttachmentSpec decision 8) */
-.sw-pair { padding: 5px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
-/* a narrow window shortens the namespace and the place, never its buttons */
-.sw-name { font: 600 15px var(--font); flex: none; }
-.sw-ns { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; min-width: 0; }
-.sw-loc { color: var(--text-3); font: 11.5px var(--mono); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.sw-pair { padding: 5px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); overflow-wrap: anywhere; }
+/* a narrow window shortens the namespace and the place, then the name, never its buttons */
+.sw-name { font: 600 15px var(--font); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sw-ns { color: var(--text-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; min-width: 0; flex-shrink: 1000; }
+.sw-loc { color: var(--text-3); font: 11.5px var(--mono); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1000; }
 .sw-acts { display: inline-flex; align-items: center; gap: 2px; align-self: center; flex: none; }
 .sw-acts .icon, .sw-pill .icon {
   display: inline-grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--text-2);
@@ -818,12 +923,10 @@ button.o-trust:hover { color: var(--accent); background: var(--code-bg); }
 .modal-title { font-weight: 600; font-size: 15px; }
 .modal-text { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
 /* Export (web/src/exportmodal.ts): which view, what its document holds, its title and author line,
-   the common settings, then the job */
-#export-modal {
-  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
-  background: rgba(0, 0, 0, 0.22);
-}
-.ex-box { width: min(580px, calc(100vw - 32px)); max-height: 90vh; overflow: auto; outline: none; }
+   the common settings, then the job. At the right, over nothing but the panel: the board is drawn
+   in the linear form beside it while it is open (ExportSpec decision 18) */
+#export-modal { position: fixed; top: 106px; right: 12px; z-index: 40; pointer-events: none; }
+.ex-box { width: min(480px, calc(100vw - 32px)); max-height: calc(100vh - 130px); overflow: auto; outline: none; pointer-events: auto; }
 .ex-head { display: flex; align-items: center; justify-content: space-between; }
 .ex-sec { display: flex; flex-direction: column; gap: 6px; }
 .ex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
@@ -1687,7 +1790,7 @@ details.lf-archived > summary { cursor: pointer; }
   word-break: break-word;
 }
 .p-ns { color: var(--text-2); font-size: 12.5px; word-break: break-all; }
-.p-mod { color: var(--text-3); font-size: 12px; margin: 6px 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
+.p-mod { color: var(--text-3); font-size: 12px; margin: 6px 0 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; overflow-wrap: anywhere; }
 .p-gen { color: var(--text-2); font-size: 12px; margin: -6px 0 12px; line-height: 1.45; }
 .sw-print { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
 .sw-print-h { color: var(--text-3); font-size: 12px; margin-bottom: 6px; font-family: var(--mono, ui-monospace, monospace); }
@@ -2310,3 +2413,136 @@ span.tm-row { color: var(--text-2); cursor: default; }
 @media (max-width: 1350px) { .tm-growth, .tm-w { display: none; } }
 @media (max-width: 1150px) { .tm-view { display: none; } .tm-n { padding: 0 6px; } }
 @media (max-width: 900px) { .tm-btn[data-tm-save] { display: none; } }
+
+/* ---------------------------------------------------------------- a phone (PhoneSpec)
+
+   At most 640 px wide: a page for reading and reviewing (web/src/phone.ts). The bar keeps Back, the
+   project's name, search and ⋯, which holds the modes and the rest; the side panel is a drawer from
+   ☰; the panel is a sheet from the bottom, the board above it. */
+.more-wrap, .side-btn, .side-back { display: none; }
+@media (max-width: 640px) {
+  /* over the sheet, which stops under it at its tallest, so that what opens from the bar (⋯, the
+     search's results, Share) opens over the sheet too */
+  #bar { top: 8px; left: 8px; right: 8px; height: 44px; gap: 6px; padding: 0 6px 0 4px; z-index: 31; }
+  #bar .right { gap: 4px; }
+  #nav-fwd, .brand .logo { display: none; }
+  .brand { align-items: center; gap: 6px; }
+  .brand .project { display: inline; font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #share-btn, #library-btn, #export-btn, #activity-btn, #who, #help-btn { display: none !important; }
+  .more-wrap { display: block; position: relative; }
+  #more-btn { width: 38px; height: 34px; }
+  #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; }
+  .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; }
+  .more-item .act-badge { position: static; margin-left: auto; }
+  /* the modes, at the top of ⋯: each with what a tap selects under its name, the one in use ticked */
+  #more-pop { max-height: calc(100dvh - 70px); overflow-y: auto; }
+  .more-h { padding: 6px 12px 2px; font-size: 12px; font-weight: 600; color: var(--text-2); }
+  .more-sub { padding: 6px 12px 0 36px; font-size: 12px; color: var(--text-2); }
+  .more-mode { gap: 6px; padding: 4px 12px; }
+  .more-mode.step { padding-left: 28px; }
+  .more-mode.on { color: var(--accent); }
+  .more-tick { flex: none; width: 16px; text-align: center; font-weight: 700; }
+  .more-l { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
+  .more-l small { font-size: 12px; color: var(--text-2); }
+  .more-sep { height: 1px; margin: 6px 4px; background: var(--line); }
+  /* search: a narrow field that takes the whole bar while it is used */
+  #search { width: 92px; height: 34px; padding: 0 10px; }
+  .search-wrap:focus-within { position: fixed; top: 8px; left: 8px; right: 8px; z-index: 45; }
+  .search-wrap:focus-within #search { width: 100%; height: 44px; font-size: 16px; box-shadow: var(--shadow-lg); }
+  #results { position: fixed; top: 58px; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 70px); }
+  /* every popover of the bar and the view bar: a sheet under the bar, the screen's width */
+  #share-pop, #library-pop, #who-menu, #peer-menu, #views-menu, #focus-menu {
+    position: fixed !important; top: 58px !important; left: 8px !important; right: 8px !important; bottom: auto !important;
+    width: auto !important; max-width: none !important; max-height: calc(100dvh - 70px); overflow: auto;
+  }
+  #viewbar { top: 58px; left: 8px; right: 8px; gap: 6px; }
+  .side-btn { display: inline-flex; flex: none; width: 36px; justify-content: center; padding: 0; }
+  #tabs { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  #tabs::-webkit-scrollbar { display: none; }
+  .vb-gap, .light-l { display: none; }
+  .focus-btn { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  /* the modes are in ⋯ */
+  #lightup { display: none; }
+  #zoom { right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); }
+  /* ⋯ opens upwards from its box, at the right (the box's blur makes it the popover's frame) */
+  #eyes-pop { right: 0; bottom: calc(100% + 8px); width: min(280px, calc(100vw - 16px)); min-width: 0; background: var(--surface-solid); }
+  #zoom #eyes-pop button.eye { min-height: 40px; }
+  /* no finger moves anything: the lock means nothing here */
+  #lock-btn { display: none !important; }
+  /* the help: gestures, as large as the screen allows */
+  .help-box { width: calc(100vw - 16px); max-height: calc(100dvh - 32px); background: var(--surface-solid); }
+  /* no keyboard: no keys beside the menus' items */
+  #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; }
+  #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) */
+  #lensbar, #tm-kept { top: 100px; left: 8px; right: 8px; transform: none; max-width: none; }
+  #selbar { top: calc(100px + var(--strip-h, 0px)); left: 8px; right: 8px; width: auto; }
+  /* the panel: a sheet from the bottom, its height the reader's to drag */
+  #panel {
+    top: auto; left: 0; right: 0; bottom: 0; width: auto; height: var(--sheet-h, 55dvh); max-height: calc(100dvh - 60px);
+    border-radius: 18px 18px 0 0; padding: 26px 16px calc(24px + env(safe-area-inset-bottom)); z-index: 30;
+    background: var(--surface-solid); box-shadow: 0 -1px 0 var(--line), 0 -8px 30px rgba(0, 0, 0, 0.12);
+    transform: translateY(105%); transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), height 0.2s;
+  }
+  #panel.open { transform: none; }
+  #panel::before { content: ""; position: sticky; top: -18px; display: block; width: 40px; height: 5px; margin: -18px auto 13px; border-radius: 3px; background: var(--text-3); opacity: 0.6; }
+  /* the side panel: a drawer from the left, over a shade */
+  body.side-open #side { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); border-radius: 0 16px 16px 0; z-index: 47; padding-top: env(safe-area-inset-top); background: var(--surface-solid); }
+  body.side-open::after { content: ""; position: fixed; inset: 0; z-index: 46; background: rgba(0, 0, 0, 0.3); }
+  /* ⚙ Board and Trusted: in the drawer's place, over it, with a way back */
+  body.side-open .side-pop {
+    left: 0 !important; top: 0 !important; bottom: 0 !important; right: auto !important; width: min(320px, 86vw) !important;
+    height: auto !important; max-height: none !important; border-radius: 0 16px 16px 0; z-index: 48;
+    background: var(--surface-solid); padding-top: calc(8px + env(safe-area-inset-top));
+  }
+  body.side-open .side-back {
+    display: flex; align-items: center; gap: 4px; min-height: 40px; margin: 0 0 6px -6px; padding: 0 6px; border: 0;
+    background: none; color: var(--accent); font: 600 15px var(--font);
+  }
+  .side-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+  /* a field under 16 px makes iOS zoom the whole page into it */
+  #panel textarea, #panel input, #share-pop input, #share-pop select, #who-menu input, #modal input, .sh-field input, .sh-field select { font-size: 16px; }
+  /* nothing slides sideways: the page is the screen */
+  html, body { overflow: hidden; overscroll-behavior: none; }
+  #panel { overflow-x: hidden; overscroll-behavior: contain; }
+  /* a source window: the whole screen, its title bar its name and a close */
+  .sw-win:not(.collapsed) {
+    left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important;
+    max-width: none !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important;
+    border-radius: 0 !important; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); z-index: 48;
+  }
+  .sw-win .fl-rz, .sw-ns, .sw-loc, .sw-acts [data-sw-collapse], .sw-pin { display: none !important; }
+  /* the menu: no keys beside its items */
+  #ctxmenu .cm-key { display: none; }
+  /* the tree in the drawer: a row a finger can hit, an arrow wide enough to open or fold a level;
+     hiding a level arranges the board, which a phone does not */
+  #outline .o-row { height: 40px; }
+  #outline .o-row .tw { width: 32px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-left: -8px; }
+  #outline .o-hide { display: none; }
+  /* the Time Machine: its line, the build and a way out; keeping a build or saving it as a view
+     arranges the board, which a phone does not */
+  body.tm .focus-wrap { display: none; }
+  #tmbar { flex: 1 1 auto; gap: 6px; padding: 0 2px 0 8px; }
+  #tmbar .tm-acts, #tmbar .tm-sum, #tmbar .tm-growth, #tmbar .tm-latest { display: none !important; }
+  #tmbar .tm-x { flex: none; width: 36px; height: 34px; font-size: 16px; }
+  .sw-head .sw-close { width: 40px; height: 40px; font-size: 20px; }
+  /* a long name goes on over a second line, its end (what tells it from its neighbours) in sight;
+     the buttons keep their place at the right */
+  .sw-head { align-items: center; }
+  .sw-name { flex: 1 1 auto; white-space: normal; overflow-wrap: anywhere; }
+  .pw-win:not(.collapsed) { left: 4px !important; right: 4px !important; width: auto !important; }
+  /* Activity and the lost-and-found: the whole screen, from the right */
+  #activity, #lostfound {
+    top: 0; left: 0; right: 0; bottom: 0; width: auto; border-radius: 0; z-index: 48;
+    padding: calc(10px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
+    background: var(--surface-solid); transform: translateX(100%);
+  }
+  .act-head .icon { width: 40px; height: 40px; font-size: 20px; }
+}

package/docs/agent-api/following.md

@@ -30,7 +30,7 @@ MCP: `companion`.
 | `source`, `sourceCollapsed` | the source window following their selection: open; collapsed to its pill |
 | `pinned` | pinned source windows, first pinned first, `{declaration, collapsed}`; followers mirror them (an agent pins none) |
 | `history` | `{snapshot, built}`: the build they browse in the Time Machine |
-| `activity`, `lostAndFound`, `colouring`, `edges`, `proofEdges` | what else followers take, where their page says it (a page from before, and an agent, say none): `activity` `{open, kind, who, mine?}` (kind: all, review, build, change; who: all, agents, people; `mine`: the person whose targets it keeps to); `lostAndFound` `{open}`; `colouring` `kind` or `status`; edges drawn or not |
+| `activity`, `lostAndFound`, `colouring`, `edges` | what else followers take, where their page says it (a page from before, and an agent, say none): `activity` `{open, kind, who, mine?}` (kind: all, review, build, change; who: all, agents, people; `mine`: the person whose targets it keeps to); `lostAndFound` `{open}`; `colouring` `kind` or `status`; edges drawn or not |
 | `inWords` | the place in words; of the row above, only what differs from a fresh page |
 
 `wait=<s>` (≤ 60) waits until someone comes, goes, goes idle or moves (view, selection,
@@ -80,7 +80,7 @@ Fields go over your own place (none: your place): every `POST view` field but `l
 | `history` | a snapshot id: the Time Machine at that build; `null`: none |
 | `region` | `[x, y, w, h]`: centre, width, height in the board's world (a top-level cluster's place is its `at` in `views/view`, a nested one's its parents' added up), fitted to the opener's screen. Left out, framed as for any link |
 | `activity` | `{"open": true, "kind": "review", "who": "people"}`, values as in `companion` |
-| `lostFound`, `scheme`, `edges`, `proofEdges` | the lost-and-found open; the colouring, `kind` or `status`; edges, proof edges drawn |
+| `lostFound`, `scheme`, `edges` | the lost-and-found open; the colouring, `kind` or `status`; edges drawn |
 | `exact` | `false`: the view's address alone (Share's switch off) |
 
 ```json

package/docs/agent-api/views.md

@@ -34,14 +34,15 @@ board holds, else `null`. Your own focus (`POST view {focus}`) changes nothing o
 
 ## The query language
 
-`all`, `tcb(A, B)`, `uses(A)`, `usedBy(A)`, `decl(A, B)`, `key(T)` (the target and the declarations
+`all`, `tcb(A, B)`, `uses(A)` (everything used), `usedBy(A)`, `refs(A)` (A and what it uses
+directly: the page's Direct), `decl(A, B)`, `key(T)` (the target and the declarations
 marked key for it that its review still holds; `key(targets)`: every target's), `ns(P)`, `file(P)`,
 `trusted`, `external`, `kind(theorem, def)`, `status(unreviewed|approved|commented|stale)`,
 `advice(approve|comment)`, `sorry`, `nonstandard`; joined left to right by `and`, `or`, `except`;
 parentheses group; a closure may take a query (`tcb(ns(P) except external)`); a name that needs it
 is in JSON quotes. A target's review set: `tcb(T) except trusted or (uses(T) and kind(axiom) and
 nonstandard)`. At most 20,000 characters, 32 levels of nesting, 1,000 parts, 2,000 names, 64
-closures (`tcb`, `uses`, `usedBy`, each target of a `key(…)`); beyond, 400.
+closures (`tcb`, `uses`, `usedBy`, `refs`, each target of a `key(…)`); beyond, 400.
 
 ## The endpoints
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualproof",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "See a Lean codebase's declaration graph and the TCB of its theorems.",
   "license": "Apache-2.0",

package/test/toolchains.json

@@ -1,5 +1,5 @@
 {
-  "policy": "The last six or so stable Lean releases, and whatever the showcase project needs (v4.28.0, for the sphere packing formalization); the newest patch of each minor release.",
+  "policy": "The last six or so stable Lean releases, and whatever the showcase project needs (v4.34.0-rc2, for NavierStokesAndEuler); v4.28.0, for the sphere packing formalization (the showcase before it), stays the floor; the newest patch of each minor release.",
   "floor": "v4.28.0",
-  "toolchains": ["v4.28.0", "v4.29.1", "v4.30.0", "v4.31.0", "v4.32.2", "v4.33.1", "v4.34.1", "v4.35.0"]
+  "toolchains": ["v4.28.0", "v4.29.1", "v4.30.0", "v4.31.0", "v4.32.2", "v4.33.1", "v4.34.0-rc2", "v4.34.1", "v4.35.0"]
 }