visualproof 0.2.0 → 0.3.0

package/dist/web/bundle/app.js

@@ -71,8 +71,9 @@ function cleanFootSize(v2) {
 function artNameId(kind, s2) {
   return `${kind === "cluster" ? "c" : "d"}:${s2}`;
 }
-var ART_NAMES_BYTES = 4500;
+var ART_NAMES_BYTES = 4e3;
 var ART_TARGETS_BYTES = 2500;
+var ART_RULED_BYTES = 1e3;
 var jsonBytes = (x2) => new TextEncoder().encode(JSON.stringify(x2)).length + 1;
 function cleanNames(v2, budget, ok = () => true) {
   const out = [];
@@ -103,10 +104,11 @@ function cleanArtwork(v2) {
   if (typeof o2.notes !== "boolean" || typeof o2.selection !== "boolean") return null;
   const namesFrom = o2.namesFrom === "none" ? "none" : "board";
   const hiddenNames = cleanNames(o2.hiddenNames, ART_NAMES_BYTES, isArtNameId), shownNames = cleanNames(o2.shownNames, ART_NAMES_BYTES, isArtNameId);
+  const ruledNames = cleanNames(o2.ruledNames, ART_RULED_BYTES, isArtNameId);
   const shownTargets = cleanNames(o2.shownTargets, ART_TARGETS_BYTES);
   const keys = typeof o2.keys === "boolean" ? o2.keys : targets !== "plain";
   const style = one2(ART_STYLES, o2.style) ?? "board";
-  return { w: w2, h: h2, scheme, theme, background, labels, namesFrom, hiddenNames, shownNames, edges, notes: o2.notes, targets, shownTargets, keys, selection: o2.selection, source: o2.source === true, style, title: cleanTitle(o2.title), subtitle: cleanTitle(o2.subtitle), titleSize: cleanTitleSize(o2.titleSize), footSize: cleanFootSize(o2.footSize), border: o2.border === true, region: [...r2] };
+  return { w: w2, h: h2, scheme, theme, background, labels, namesFrom, hiddenNames, shownNames, ruledNames, edges, notes: o2.notes, targets, shownTargets, keys, selection: o2.selection, source: o2.source === true, style, title: cleanTitle(o2.title), subtitle: cleanTitle(o2.subtitle), titleSize: cleanTitleSize(o2.titleSize), footSize: cleanFootSize(o2.footSize), border: o2.border === true, region: [...r2] };
 }
 var SCHEMES = ["kind", "status"];
 var ACTIVITY_KINDS = ["all", "review", "build", "change"];
@@ -1843,8 +1845,8 @@ function applyEvent(d2, e2) {
     case "name":
       return;
     case "opinion": {
-      const { op: _op, name, ...o2 } = e2;
-      (Object.hasOwn(d2.opinions, name) ? d2.opinions[name] : d2.opinions[name] = []).push(o2);
+      const { op: _op, name, for: forName, forPerson, ...o2 } = e2;
+      (Object.hasOwn(d2.opinions, name) ? d2.opinions[name] : d2.opinions[name] = []).push(forName === void 0 ? o2 : recordedFor(d2, o2, forName, forPerson));
       return;
     }
     case "target":
@@ -1878,12 +1880,23 @@ function named(d2, id, name) {
   const p2 = Object.hasOwn(d2.people, id) ? d2.people[id] : null;
   if (p2?.name === name) return;
   if (!p2) {
-    d2.people[id] = { name, was: [] };
+    const was = /* @__PURE__ */ new Set();
+    for (const ops of Object.values(d2.opinions))
+      for (const o2 of ops)
+        if (o2.person === id && o2.by !== name) {
+          was.add(o2.by);
+          o2.by = name;
+        }
+    d2.people[id] = { name, was: [...was] };
     return;
   }
   p2.was = [...p2.was.filter((n3) => n3 !== p2.name && n3 !== name), p2.name];
   p2.name = name;
-  for (const ops of Object.values(d2.opinions)) for (const o2 of ops) if (o2.person === id) o2.by = name;
+  for (const ops of Object.values(d2.opinions))
+    for (const o2 of ops) {
+      if (o2.person === id) o2.by = name;
+      if (o2.recordedBy?.person === id) o2.recordedBy.by = name;
+    }
   for (const t2 of Object.values(d2.targets)) if (t2.person === id) t2.by = name;
   for (const marks of Object.values(d2.keys)) for (const m3 of Object.values(marks)) if (m3.person === id) m3.by = name;
   renamePerson(d2, id, name);
@@ -1918,6 +1931,14 @@ function readEvent(raw, agentLog, personLog = null) {
         e2[k2] = o2[k2];
       }
       if (e2.text !== void 0 && e2.statement !== void 0) return "a text and a statement";
+      if (o2.for !== void 0 || o2.forPerson !== void 0) {
+        if (agentLog) return "an agent's opinion recorded for someone else";
+        if (typeof o2.for !== "string" || !validName(o2.for)) return "for";
+        if (o2.forPerson !== void 0 && !validPersonId(o2.forPerson)) return "forPerson";
+        if (o2.for === by || o2.forPerson !== void 0 && o2.forPerson === personLog) return "an opinion recorded for its own writer";
+        e2.for = o2.for;
+        if (o2.forPerson !== void 0) e2.forPerson = o2.forPerson;
+      }
       if (agentLog) e2.agent = true;
       return e2;
     }
@@ -2001,6 +2022,11 @@ function problemsText(ps) {
 function author(o2) {
   return o2.person ? `link ${o2.person}` : (o2.agent ? "agent " : "person ") + o2.by;
 }
+function recordedFor(d2, o2, forName, forPerson) {
+  const { by, person, ...rest } = o2;
+  const name = forPerson && Object.hasOwn(d2.people, forPerson) ? d2.people[forPerson].name : forName;
+  return { ...rest, by: name, ...forPerson ? { person: forPerson } : {}, recordedBy: { by, ...person ? { person } : {} } };
+}
 function latest(d2, name, agents) {
   const out = /* @__PURE__ */ new Map();
   for (const o2 of Object.hasOwn(d2.opinions, name) ? d2.opinions[name] : []) if (!!o2.agent === agents) out.set(author(o2), o2);
@@ -5580,17 +5606,50 @@ function rgba(css, alpha = 1) {
   const key = css;
   let c3 = colorCache.get(key);
   if (!c3) {
-    probe ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
-    probe.clearRect(0, 0, 1, 1);
-    probe.fillStyle = "#000";
-    probe.fillStyle = css || "transparent";
-    probe.fillRect(0, 0, 1, 1);
-    const d2 = probe.getImageData(0, 0, 1, 1).data;
-    c3 = [d2[0] / 255, d2[1] / 255, d2[2] / 255, d2[3] / 255];
+    if (typeof document === "undefined") c3 = parseColour(css);
+    else {
+      probe ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+      probe.clearRect(0, 0, 1, 1);
+      probe.fillStyle = "#000";
+      probe.fillStyle = css || "transparent";
+      probe.fillRect(0, 0, 1, 1);
+      const d2 = probe.getImageData(0, 0, 1, 1).data;
+      c3 = [d2[0] / 255, d2[1] / 255, d2[2] / 255, d2[3] / 255];
+    }
     colorCache.set(key, c3);
   }
   return [c3[0], c3[1], c3[2], c3[3] * alpha];
 }
+var NAMED = { transparent: "#0000", black: "#000", white: "#fff", red: "#f00", green: "#008000", blue: "#00f", gray: "#808080", grey: "#808080", orange: "#ffa500", gold: "#ffd700" };
+function parseColour(css) {
+  let s2 = (css || "").trim().toLowerCase();
+  s2 = NAMED[s2] ?? s2;
+  const byte = (v2) => Math.round(Math.min(255, Math.max(0, v2))) / 255;
+  const hex = /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/.exec(s2);
+  if (hex) {
+    let h3 = hex[1];
+    if (h3.length <= 4) h3 = [...h3].map((x2) => x2 + x2).join("");
+    const n3 = (i2) => parseInt(h3.slice(i2, i2 + 2), 16);
+    return [n3(0) / 255, n3(2) / 255, n3(4) / 255, h3.length === 8 ? n3(6) / 255 : 1];
+  }
+  const fn = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(s2);
+  if (!fn) return [0, 0, 0, 0];
+  const parts = fn[2].replace(/\//g, " / ").split(/[\s,]+/).filter((x2) => x2 && x2 !== "/");
+  const num = (x2, scale) => x2 === void 0 ? NaN : x2.endsWith("%") ? parseFloat(x2) / 100 * scale : parseFloat(x2);
+  const a3 = parts.length > 3 ? Math.min(1, Math.max(0, num(parts[3], 1))) : 1;
+  if (fn[1].startsWith("rgb")) {
+    const [r2, g2, b2] = [0, 1, 2].map((i2) => num(parts[i2], 255));
+    return [r2, g2, b2].some(Number.isNaN) ? [0, 0, 0, 0] : [byte(r2), byte(g2), byte(b2), Number.isNaN(a3) ? 1 : Math.round(a3 * 255) / 255];
+  }
+  const h2 = (parseFloat(parts[0]) % 360 + 360) % 360 / 360, sat = num(parts[1], 1), l2 = num(parts[2], 1);
+  if ([h2, sat, l2].some(Number.isNaN)) return [0, 0, 0, 0];
+  const q2 = l2 < 0.5 ? l2 * (1 + sat) : l2 + sat - l2 * sat, p2 = 2 * l2 - q2;
+  const t2 = (x2) => {
+    x2 = (x2 + 1) % 1;
+    return x2 < 1 / 6 ? p2 + (q2 - p2) * 6 * x2 : x2 < 1 / 2 ? q2 : x2 < 2 / 3 ? p2 + (q2 - p2) * (2 / 3 - x2) * 6 : p2;
+  };
+  return [byte(t2(h2 + 1 / 3) * 255), byte(t2(h2) * 255), byte(t2(h2 - 1 / 3) * 255), Number.isNaN(a3) ? 1 : Math.round(a3 * 255) / 255];
+}
 function program(gl, vs, fs) {
   const make = (type, src) => {
     const s2 = gl.createShader(type);
@@ -5618,7 +5677,7 @@ var Instances = class {
     this.gl = gl;
     this.stride = stride;
     this.data = new Float32Array(stride * capacity);
-    this.buffer = gl.createBuffer();
+    this.buffer = gl ? gl.createBuffer() : null;
   }
   clear() {
     this.count = 0;
@@ -5640,6 +5699,7 @@ var Instances = class {
   upload() {
     if (this.uploaded === this.version) return;
     const gl = this.gl;
+    if (!gl) return;
     gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
     gl.bufferData(gl.ARRAY_BUFFER, this.data.subarray(0, this.count * this.stride), gl.DYNAMIC_DRAW);
     this.uploaded = this.version;
@@ -5867,6 +5927,7 @@ function bundlePath(L2, paths, off, len, beta, widthPx, c0, c1) {
   d2[o2 + 18] = c1[2];
   d2[o2 + 19] = c1[3];
 }
+var NO_CARD_SIDE = 16384;
 var Renderer = class {
   gl;
   circleProg;
@@ -5881,6 +5942,10 @@ var Renderer = class {
   circleCorners;
   lineCorners;
   constructor(canvas) {
+    if (!canvas) {
+      this.gl = null;
+      return;
+    }
     const gl = canvas.getContext("webgl2", { antialias: false, premultipliedAlpha: true, alpha: true });
     if (!gl) throw new Error("WebGL2 is not available in this browser");
     this.gl = gl;
@@ -5903,6 +5968,11 @@ var Renderer = class {
     const gl = this.gl;
     const stride = kind === "lines" ? LINE_STRIDE : kind === "bundles" ? BUNDLE_STRIDE : CIRCLE_STRIDE;
     const inst = new Instances(gl, stride);
+    if (!gl) {
+      this.layers.set(name, { kind, inst, vao: null, visible: true });
+      this.order.push(name);
+      return inst;
+    }
     const vao = gl.createVertexArray();
     gl.bindVertexArray(vao);
     if (kind === "circles" || kind === "lines") {
@@ -5925,6 +5995,7 @@ var Renderer = class {
   /** World positions the bundled edges read: (x, y) pairs, 1024 per texture row. */
   setPositions(xy) {
     const gl = this.gl;
+    if (!gl) return;
     const count2 = xy.length / 2;
     const rows = Math.max(1, Math.ceil(count2 / 1024));
     gl.bindTexture(gl.TEXTURE_2D, this.posTex);
@@ -5963,6 +6034,7 @@ var Renderer = class {
   /** The most pixels a side of what this context draws at once can have. */
   maxSide() {
     const gl = this.gl;
+    if (!gl) return NO_CARD_SIDE;
     const dims = gl.getParameter(gl.MAX_VIEWPORT_DIMS);
     return Math.min(dims[0], dims[1], gl.getParameter(gl.MAX_RENDERBUFFER_SIZE));
   }
@@ -5971,6 +6043,7 @@ var Renderer = class {
    *  screen's (an artwork's PNG) keeps it as wide in pixels as the screen does. */
   render(cam, w2, h2, dpr, dotPx, aa = 0.35) {
     const gl = this.gl;
+    if (!gl) return;
     gl.viewport(0, 0, Math.round(w2 * dpr), Math.round(h2 * dpr));
     gl.clearColor(0, 0, 0, 0);
     gl.clear(gl.COLOR_BUFFER_BIT);
@@ -6360,7 +6433,7 @@ var OverviewModel = class {
     return looks;
   }
 };
-var DIM = 0.12;
+var DIM = 0.3;
 function blendPoints(sets, put) {
   const give = (L2, j2, beta, width, alpha) => {
     if (alpha > 2e-3) put(L2, j2, beta, width, alpha);
@@ -7857,9 +7930,9 @@ function statusCodes(d2, g2, files) {
 var PAST_GHOST = 1;
 var PAST_CHANGED = 4;
 var PAST_RENAMED = 8;
-function gitThen(now, commit) {
+function gitThen(commit) {
   if (!commit || commit.guessed) return { git: void 0 };
-  return { git: { source: now?.source ?? null, commit: commit.hash, branch: commit.branch, ...commit.dirty ? { dirty: true } : {} } };
+  return { git: { source: null, commit: commit.hash, branch: commit.branch, ...commit.dirty ? { dirty: true } : {} } };
 }
 function pastGraph(snap, edges, now, diff) {
   const P2 = snap.projectCount;
@@ -7871,8 +7944,8 @@ function pastGraph(snap, edges, now, diff) {
   const meta = {
     schema: 1,
     layoutVersion: now.meta.layoutVersion,
-    // the commit of that build, where it is known; the source is the project's now
-    project: { ...now.meta.project, extractedAt: snap.snapshot.at, ...gitThen(now.meta.project.git, snap.snapshot.commit) },
+    // the commit of that build, where it is known
+    project: { ...now.meta.project, extractedAt: snap.snapshot.at, ...gitThen(snap.snapshot.commit) },
     modules: snap.modules.map((m3) => ({ name: m3.name, file: null, imports: m3.imports })),
     nodes,
     projectCount: P2,
@@ -8314,7 +8387,7 @@ function openFor(plan, parent, chosen) {
 function placeVisits(S2, L2, plan, vs, ok = () => true) {
   const names2 = vs.map((v2) => v2.name);
   const pack2 = packPlan(plan, names2);
-  const keyOf2 = (c3) => c3 < 0 ? "" : L2.clusters[c3].key;
+  const keyOf3 = (c3) => c3 < 0 ? "" : L2.clusters[c3].key;
   const items = [];
   const ofTemp = /* @__PURE__ */ new Map();
   plan.temps.forEach((t2, k2) => {
@@ -8337,7 +8410,7 @@ function placeVisits(S2, L2, plan, vs, ok = () => true) {
   const placed = /* @__PURE__ */ new Map();
   for (const j2 of order) {
     const it2 = items[j2];
-    const kept = members[j2].map((k2) => vs[k2].place).find((p2) => p2 && p2.in === keyOf2(it2.in));
+    const kept = members[j2].map((k2) => vs[k2].place).find((p2) => p2 && p2.in === keyOf3(it2.in));
     if (kept) it2.at = [kept.at[0], kept.at[1]];
     else {
       const room2 = S2.roomOf(it2.in);
@@ -8362,7 +8435,7 @@ function placeVisits(S2, L2, plan, vs, ok = () => true) {
   }
   const held = /* @__PURE__ */ new Map();
   for (const [c3, list2] of placed) held.set(c3, list2.map((o2) => ({ x: o2.at[0], y: o2.at[1], r: o2.r })));
-  const places = item.map((j2) => ({ in: keyOf2(items[j2].in), at: [items[j2].at[0], items[j2].at[1]] }));
+  const places = item.map((j2) => ({ in: keyOf3(items[j2].in), at: [items[j2].at[0], items[j2].at[1]] }));
   return { plan, pack: pack2, items, item, places, held };
 }
 function visitWorld(V2, S2) {
@@ -8704,7 +8777,9 @@ var DOUBLE_MS = 450;
 var HOLD_MS = 500;
 function readTheme() {
   const cs = getComputedStyle(document.body);
-  const v2 = (name) => cs.getPropertyValue(name).trim();
+  return themeOf((name) => cs.getPropertyValue(name).trim());
+}
+function themeOf(v2) {
   const kind = {};
   for (const k2 of KINDS2) kind[k2] = rgba(v2(`--k-${k2}`));
   return {
@@ -8870,6 +8945,9 @@ var GraphCanvas = class {
   /** of its names shown by selection, the clusters' keys and the declarations' full names */
   artClusters = /* @__PURE__ */ new Set();
   artDecls = [];
+  /** the names a recipe's rule chose (ExportSpec decision 20): clusters by key, declarations */
+  artRuled = /* @__PURE__ */ new Set();
+  artRuledDecls = [];
   /** what the names the last frame wrote name (artNameId), on an artwork: what its list of names
    *  shows ticked */
   namesWritten = /* @__PURE__ */ new Set();
@@ -8925,11 +9003,17 @@ var GraphCanvas = class {
    *  scene's and these */
   openAround = /* @__PURE__ */ new Set();
   tempOpen = /* @__PURE__ */ new Set();
-  constructor(canvas, labels, cardsEl, g2, ev) {
+  /** drawn without a browser: no graphics card, no input, no frames but those asked for (`settle`) */
+  headless;
+  /** A board on the page's canvas; or, with `host` (and nulls for the elements), the same board drawn
+   *  without a browser — its renderer kept to its data, which an artwork's SVG reads (ExportSpec
+   *  decision 21). */
+  constructor(canvas, labels, cardsEl, g2, ev, host) {
+    this.headless = !!host;
     this.canvas = canvas;
-    this.gl = new Renderer(canvas);
+    this.gl = new Renderer(host ? null : canvas);
     this.labels = labels;
-    this.ctx = labels.getContext("2d");
+    this.ctx = host ? host.ctx : labels.getContext("2d");
     for (const [name, kind] of [
       ["discs", "circles"],
       ["figures", "lines"],
@@ -8948,15 +9032,20 @@ var GraphCanvas = class {
     this.g = g2;
     this.ev = ev;
     this.edgeQ = new EdgeQueue(
-      () => typeof Worker === "undefined" ? null : new Worker("/edges.js", { type: "module" }),
+      () => host || typeof Worker === "undefined" ? null : new Worker("/edges.js", { type: "module" }),
       () => this.request()
     );
+    if (host) {
+      this.theme = host.theme;
+      [this.w, this.h, this.dpr] = [host.w, host.h, 1];
+      return;
+    }
     this.theme = readTheme();
     new MutationObserver(() => {
       this.theme = readTheme();
       this.invalidate();
     }).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
-    new ResizeObserver(() => this.resize()).observe(canvas);
+    new ResizeObserver(() => this.resize()).observe(this.canvas);
     this.resize();
     this.bindInput();
     let last2 = performance.now();
@@ -8982,6 +9071,21 @@ var GraphCanvas = class {
   request() {
     this.dirty = true;
   }
+  /** Without a browser (ExportSpec decision 21): draw until nothing more comes — the scene at rest,
+   *  the overview's points chosen and blended, nothing asking for another frame — at most `most`
+   *  frames; whether it came to rest. */
+  settle(most = 60) {
+    for (let n3 = 0; n3 < most; n3++) {
+      if (this.scene?.moving) {
+        this.scene.step(64);
+        this.afterMotion();
+      }
+      this.dirty = false;
+      this.draw();
+      if (!this.dirty && !this.scene?.moving) return true;
+    }
+    return false;
+  }
   /** Called after every frame drawn: what lies over the canvas and follows it (the notes,
    *  web/src/sticky.ts) is placed again. */
   onFrame = null;
@@ -9550,10 +9654,11 @@ var GraphCanvas = class {
     this.focus = focus;
     this.picked = clusters;
     this.active = closure;
-    requestAnimationFrame(() => {
-      this.theme = readTheme();
-      this.invalidate();
-    });
+    if (!this.headless)
+      requestAnimationFrame(() => {
+        this.theme = readTheme();
+        this.invalidate();
+      });
     this.activeList = [];
     if (closure) {
       for (let i2 = 0; i2 < closure.length; i2++) if (closure[i2]) this.activeList.push(i2);
@@ -9691,7 +9796,7 @@ var GraphCanvas = class {
     for (let c3 = 0; c3 < S2.nc; c3++) {
       const spot = this.chosenSpot(c3);
       const cl = this.layout.clusters[c3];
-      if (!spot || !inside2(spot.x, spot.y) || !spot.board && !this.artClusters.has(cl.key)) continue;
+      if (!spot || !inside2(spot.x, spot.y) || !spot.board && !this.artClusters.has(cl.key) && !this.artRuled.has(cl.key)) continue;
       out.push({ id: artNameId("cluster", cl.key), label: cl.label, full: cl.key.replace("\u27E8external\u27E9", "External"), cluster: true });
     }
     const mx = rect.x + rect.w / 2, my = rect.y + rect.h / 2;
@@ -9749,10 +9854,16 @@ var GraphCanvas = class {
     this.art = look;
     this.artClusters = /* @__PURE__ */ new Set();
     this.artDecls = [];
+    this.artRuled = /* @__PURE__ */ new Set();
+    this.artRuledDecls = [];
     for (const id of look?.shown ?? []) {
       if (id.startsWith("c:")) this.artClusters.add(id.slice(2));
       else if (id.startsWith("d:")) this.artDecls.push(id.slice(2));
     }
+    for (const id of look?.ruled ?? []) {
+      if (id.startsWith("c:")) this.artRuled.add(id.slice(2));
+      else if (id.startsWith("d:")) this.artRuledDecls.push(id.slice(2));
+    }
     this.overviewBase = "";
     this.setHover(null, 0, 0);
     this.invalidate();
@@ -10867,7 +10978,8 @@ var GraphCanvas = class {
     };
     const targets = art ? this.markedTargets() : [];
     const look = art ? artText(art.style, th) : null;
-    const artCluster = (c3, force) => {
+    const artCluster = (c3, how) => {
+      const force = how === true, anywhere = how !== false;
       const L2 = look;
       const cl = this.layout.clusters[c3];
       const id = artNameId("cluster", cl.key);
@@ -10876,12 +10988,12 @@ var GraphCanvas = class {
       ctx.textAlign = "center";
       if (S2.rep[c3] === c3) {
         const r2 = Math.max(6, S2.drawnR[c3] * k2);
-        if (!force && (r2 <= 10 || !onScreen(sx, sy, r2) || act && this.clusterHasActive(c3))) return false;
+        if (!anywhere && (r2 <= 10 || !onScreen(sx, sy, r2) || act && this.clusterHasActive(c3))) return false;
         ctx.font = L2.sub(11);
         return place2(cl.label, sx, sy + r2 + 13, 11, id, force);
       }
       const sr = S2.drawnR[c3] * k2;
-      if (!force && (sr <= 38 || !onScreen(sx, sy, sr))) return false;
+      if (!anywhere && (sr <= 38 || !onScreen(sx, sy, sr))) return false;
       const top = cl.depth === 0;
       const size = Math.max(10, Math.min(top ? 22 : 16, 9 + sr / 40));
       const text2 = top ? cl.label.toUpperCase() : cl.label;
@@ -10932,9 +11044,27 @@ var GraphCanvas = class {
       ctx.textAlign = "center";
       ctx.fillStyle = th.label;
     }
+    if (chosen) {
+      for (let c3 = 0; c3 < S2.nc; c3++) {
+        const cl = this.layout.clusters[c3];
+        if (!this.artRuled.has(cl.key) || this.artClusters.has(cl.key) || S2.rep[c3] >= 0 && S2.rep[c3] !== c3 || !this.clusterVisible(c3)) continue;
+        const [sx, sy] = this.toScreen(S2.cwx[c3], S2.cwy[c3]);
+        if (onScreen(sx, sy, 400)) artCluster(c3, "fit");
+      }
+      ctx.textAlign = "left";
+      for (const name of this.artRuledDecls) {
+        const i2 = this.g.byName.get(name);
+        if (i2 === void 0 || !shown(i2)) continue;
+        ctx.font = look.decl;
+        ctx.fillStyle = look.declFill;
+        nameAt(i2, this.g.short(i2), ctx.measureText(this.g.short(i2)).width);
+      }
+      ctx.textAlign = "center";
+      ctx.fillStyle = th.label;
+    }
     for (let c3 = 0; c3 < S2.nc; c3++) {
       if (art?.labels === "none" || chosen && !asShown) break;
-      if (chosen && this.artClusters.has(this.layout.clusters[c3].key)) continue;
+      if (chosen && (this.artClusters.has(this.layout.clusters[c3].key) || this.artRuled.has(this.layout.clusters[c3].key))) continue;
       const rep = S2.rep[c3];
       if (!this.clusterVisible(c3)) continue;
       if (art) {
@@ -11574,6 +11704,7 @@ var GraphCanvas = class {
   }
   /** Place the cards for this frame; returns the nodes that got one. */
   drawCards(activeDots) {
+    if (this.headless) return /* @__PURE__ */ new Set();
     const k2 = this.cam.k;
     const S2 = this.scene;
     const chosen = new Set(this.focus);
@@ -11765,7 +11896,8 @@ function menuItems(t2, ctx, title = "View") {
   const out = [];
   const note = ctx.arrange ? [{ act: "note", label: "Add a note here", sep: true }, { act: "note-view", label: "Add a note for this view" }] : [];
   if (t2.kind === "note") {
-    if (!ctx.arrange) return [];
+    const toggle = { act: "note-toggle", label: t2.open ? "Collapse" : "Expand", key: "click" };
+    if (!ctx.arrange) return t2.own ? [toggle] : [];
     const carries = t2.carries ?? [];
     const attach = t2.attach ? [{ act: "note-attach", label: "Attach\u2026", sep: true }] : [];
     if (carries.length) attach.push({ act: "note-detach", label: "Detach", ...attach.length ? {} : { sep: true }, sub: carries.map((label, k2) => ({ act: `detach:${k2}`, label })) });
@@ -11774,7 +11906,7 @@ function menuItems(t2, ctx, title = "View") {
     if (t2.items?.remove) items.push({ act: "item-remove", label: "Remove from this view", ...items.length ? {} : { sep: true } });
     return [
       { act: "note-edit", label: "Edit", key: "double-click" },
-      { act: "note-toggle", label: t2.open ? "Collapse" : "Expand", key: "click" },
+      toggle,
       ...attach,
       // the other kind, keeping its text, its author, what it carries and where it is on this board
       { act: "note-kind", label: t2.view ? "In every view" : "Only in this view", sep: true },
@@ -12188,7 +12320,8 @@ var Panel = class {
     if (i2 === null) return this.hide();
     const same2 = i2 === this.current && this.el.classList.contains("open");
     const keepScroll = this.el.scrollTop;
-    const hadFocus = document.activeElement?.matches?.("#panel [data-rv-comment]") ?? false;
+    const typing2 = document.activeElement?.matches?.("#panel [data-rv-comment], #panel [data-rv-for]") ? document.activeElement : null;
+    const hadFocus = typing2 ? { sel: typing2.matches("[data-rv-for]") ? "[data-rv-for]" : "[data-rv-comment]", from: typing2.selectionStart, to: typing2.selectionEnd } : null;
     this.current = i2;
     const g2 = this.g;
     const v2 = g2.nodes[i2];
@@ -12277,7 +12410,11 @@ var Panel = class {
     this.el.classList.add("open");
     if (!same2) this.el.scrollTop = 0;
     else this.el.scrollTop = keepScroll;
-    if (same2 && hadFocus) this.el.querySelector("[data-rv-comment]")?.focus();
+    if (same2 && hadFocus) {
+      const box = this.el.querySelector(hadFocus.sel);
+      box?.focus();
+      if (hadFocus.from !== null && hadFocus.to !== null) box?.setSelectionRange(hadFocus.from, hadFocus.to);
+    }
     this.box.reveal(this.el);
   }
 };
@@ -12954,6 +13091,7 @@ function snapshotViews(json) {
 }
 function snapshotSource(info2) {
   let sources = null;
+  let git = null;
   const json = async (id) => JSON.parse(new TextDecoder().decode(await inflate(id)));
   return {
     views: snapshotViews(json),
@@ -12963,6 +13101,8 @@ function snapshotSource(info2) {
     forget: () => {
     },
     meta: () => json("vp-meta"),
+    // the commit as the snapshot was taken, in its graph: read once
+    git: () => git ??= json("vp-meta").then((m3) => m3.project.git ?? null),
     edges: () => inflate("vp-edges"),
     // a snapshot shows the review as it was when taken
     review: () => json("vp-review").then((data) => ({ epoch: "snapshot", rev: 0, data: reviewFromJson(data), problems: [], error: null })),
@@ -13034,6 +13174,7 @@ 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}`))),
+    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),
     review: () => fetch("/api/review").then((r2) => r2.ok ? r2.json() : Promise.reject(new Error(`review ${r2.status}`))).then(reviewState),
@@ -13986,6 +14127,9 @@ function setPeople(list2) {
   known.clear();
   for (const p2 of Array.isArray(list2) ? list2 : []) if (p2 && typeof p2.id === "string" && typeof p2.name === "string") known.set(p2.id, p2);
 }
+function invitedNames() {
+  return [...known.values()].filter((p2) => !p2.revoked).map((p2) => p2.name);
+}
 function nameNow(by, person) {
   return person && known.get(person)?.name || by;
 }
@@ -15440,12 +15584,22 @@ var ReviewBox = class {
    *  review is drawn, since when it flashes (0: not yet), and the panel and windows that scrolled to
    *  it already */
   flashing = null;
+  /** whom the opinions given on this page are for, where not the reader (ReviewSpec decision 8): it
+   *  stays, on every review box, until changed back; kept for the tab */
+  speakingFor = readFor();
   constructor(g2, hooks) {
     this.g = g2;
     this.hooks = hooks;
   }
-  /** Keep what is typed into a comment box: the other boxes of the declaration show it too. */
+  /** Whom an opinion given now is for: another person's name, or null for the reader's own. */
+  forName() {
+    const f2 = this.speakingFor?.trim() || null;
+    return f2 && f2 !== this.hooks.review().reviewer?.trim() ? f2 : null;
+  }
+  /** 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) {
+    if (t2.matches("[data-rv-for]")) return this.speakFor(t2.value, t2);
     if (!t2.matches("[data-rv-comment]")) return;
     const name = this.g.nodes[i2].name;
     const value = t2.value;
@@ -15453,6 +15607,42 @@ var ReviewBox = class {
     this.mirror(name, value, t2);
     fitBox(t2);
   }
+  /** The opinions given from now on are `name`'s (none: the reader's own): every review box on the
+   *  page says so at once, without being drawn again (ReviewSpec decision 8). */
+  speakFor(name, except) {
+    this.speakingFor = name.slice(0, MAX_NAME) || null;
+    try {
+      if (this.speakingFor) sessionStorage.setItem(FOR_KEY, this.speakingFor);
+      else sessionStorage.removeItem(FOR_KEY);
+    } catch {
+    }
+    if (typeof document === "undefined") return;
+    const f2 = this.forName();
+    for (const b2 of document.querySelectorAll("input[data-rv-for]")) if (b2 !== except && b2.value !== name) b2.value = name;
+    for (const on of document.querySelectorAll("[data-rv-for-on]")) {
+      on.hidden = !f2;
+      on.innerHTML = f2 ? `Recording for <b>${escapeHtml(f2)}</b> \u2014 their opinion, recorded by you` : "";
+    }
+    for (const w2 of document.querySelectorAll("[data-rv-for-who]")) w2.textContent = f2 ? ` for ${f2}` : "";
+  }
+  /** The names the "Speaking for" box offers: the people invited by a personal link and those the
+   *  logs name, agents left out, the reader not; kept in the page's one list of them. */
+  people(d2) {
+    if (typeof document === "undefined") return;
+    const me = this.hooks.review().reviewer?.trim();
+    const names2 = new Set(invitedNames());
+    for (const ops of Object.values(d2.opinions)) for (const o2 of ops) if (!o2.agent) names2.add(o2.by);
+    for (const t2 of Object.values(d2.targets)) if (!t2.agent) names2.add(t2.by);
+    if (me) names2.delete(me);
+    let list2 = document.getElementById("rv-people");
+    if (!list2) {
+      list2 = document.createElement("datalist");
+      list2.id = "rv-people";
+      document.body.append(list2);
+    }
+    const html = [...names2].sort((a3, b2) => a3.localeCompare(b2)).map((n3) => `<option value="${escapeHtml(n3)}"></option>`).join("");
+    if (list2.innerHTML !== html) list2.innerHTML = html;
+  }
   /** Every comment box of declaration `name` on the page but `except` shows `value`: the panel and
    *  a source window on the same declaration write one comment, so that what one of them holds is
    *  never lost to what the other held. */
@@ -15605,7 +15795,8 @@ var ReviewBox = class {
       root.querySelector("[data-rv-comment]")?.focus();
       return;
     }
-    this.send(root, v2.name, async () => await this.hooks.edited(i2) ? EDITED : this.hooks.submit({ op: "opinion", name: v2.name, verdict, comment: comment || void 0 }));
+    const f2 = this.forName();
+    this.send(root, v2.name, async () => await this.hooks.edited(i2) ? EDITED : this.hooks.submit({ op: "opinion", name: v2.name, verdict, comment: comment || void 0, ...f2 ? { for: f2 } : {} }));
   }
   /** Approve or comment on an axiom by its name, from the panel of target `i` (the board has no
    *  declaration for it): a comment is the one written there. */
@@ -15619,7 +15810,8 @@ var ReviewBox = class {
       root.querySelector("[data-rv-comment]")?.focus();
       return;
     }
-    this.send(root, target, () => this.hooks.submit({ op: "opinion", name, verdict, comment: comment || void 0 }));
+    const f2 = this.forName();
+    this.send(root, target, () => this.hooks.submit({ op: "opinion", name, verdict, comment: comment || void 0, ...f2 ? { for: f2 } : {} }));
   }
   /** Send an opinion with the comment written under `key` (the declaration's name; for an axiom,
    *  its target's): the comment is spent as it goes, so that the boxes drawn again with the change
@@ -15786,8 +15978,12 @@ var ReviewBox = class {
     const quote = (o2) => o2.comment && writable ? ` <button type="button" class="rv-quote" data-rv-quote="${key(o2)}" title="Quote this comment in yours, linking back to it">Quote</button>` : "";
     const opinion = (o2, compare = false) => {
       const now2 = fresh(o2, v2.hash);
-      return `<div class="rv-op rv-${o2.verdict}${now2 ? "" : " old"}" data-rv-op="${key(o2)}"><span class="rv-dot"></span><b>${esc2(o2.by)}</b>${o2.person ? VERIFIED : ""} ${VERB[o2.verdict]} <span class="muted">\xB7 ${ago(o2.at)}${now2 ? "" : " \xB7 on an earlier version"}</span>${quote(o2)}` + (o2.comment ? `<div class="rv-c md">${this.comment(o2.comment, v2.name)}</div>` : "") + `</div>` + // beside the opinion, not in it: a stale opinion is faded, what changed must read clearly
-      (compare && !now2 ? this.changes(i2, o2) : "");
+      return (
+        // recorded for them by someone else: theirs, without the mark they did not give it under
+        // (ReviewSpec decision 8)
+        `<div class="rv-op rv-${o2.verdict}${now2 ? "" : " old"}" data-rv-op="${key(o2)}"><span class="rv-dot"></span><b>${esc2(o2.by)}</b>${o2.person && !o2.recordedBy ? VERIFIED : ""} ${VERB[o2.verdict]} <span class="muted">\xB7 ${ago(o2.at)}${o2.recordedBy ? ` \xB7 recorded by ${esc2(o2.recordedBy.by)}` : ""}${now2 ? "" : " \xB7 on an earlier version"}</span>${quote(o2)}` + (o2.comment ? `<div class="rv-c md">${this.comment(o2.comment, v2.name)}</div>` : "") + `</div>` + // beside the opinion, not in it: a stale opinion is faded, what changed must read clearly
+        (compare && !now2 ? this.changes(i2, o2) : "")
+      );
     };
     const now = current(d2, v2.name);
     const all = (Object.hasOwn(d2.opinions, v2.name) ? d2.opinions[v2.name] : []).filter((o2) => !o2.agent);
@@ -15803,8 +15999,11 @@ var ReviewBox = class {
     else if (R2.blocked) controls = `<div class="banner bad">${esc2(R2.blocked)}</div>`;
     else if (this.hooks.editedNow(i2) === true)
       controls = `<div class="banner warn">${EDITED}</div>`;
-    else
-      controls = `<textarea class="rv-text" data-rv-comment="${esc2(v2.name)}" rows="${rowsFor(this.drafts.get(v2.name) ?? "")}" placeholder="Comment (optional with an approval) \xB7 Markdown" title="Markdown: &gt; quote, \`code\`, \`\`\`lean blocks, **bold**, *italics*; a declaration's full name in backticks links to it. Quote an opinion with its Quote, lines of code by selecting them in the source window">${esc2(this.drafts.get(v2.name) ?? "")}</textarea><div class="rv-actions"><button class="rv-btn approve" data-rv="approve" title="Approve (a), with the comment if there is one">Approve</button><button class="rv-btn comment" data-rv="comment" title="Comment (m): send what you wrote in the box">Comment</button></div><div class="rv-err" hidden></div>`;
+    else {
+      this.people(d2);
+      const f2 = this.forName();
+      controls = `<div class="rv-for-on" data-rv-for-on${f2 ? "" : " hidden"}>${f2 ? `Recording for <b>${esc2(f2)}</b> \u2014 their opinion, recorded by you` : ""}</div><textarea class="rv-text" data-rv-comment="${esc2(v2.name)}" rows="${rowsFor(this.drafts.get(v2.name) ?? "")}" placeholder="Comment (optional with an approval) \xB7 Markdown" title="Markdown: &gt; quote, \`code\`, \`\`\`lean blocks, **bold**, *italics*; a declaration's full name in backticks links to it. Quote an opinion with its Quote, lines of code by selecting them in the source window">${esc2(this.drafts.get(v2.name) ?? "")}</textarea><div class="rv-actions"><button class="rv-btn approve" data-rv="approve" title="Approve (a), with the comment if there is one">Approve<span data-rv-for-who>${f2 ? ` for ${esc2(f2)}` : ""}</span></button><button class="rv-btn comment" data-rv="comment" title="Comment (m): send what you wrote in the box">Comment<span data-rv-for-who>${f2 ? ` for ${esc2(f2)}` : ""}</span></button><label class="rv-for" title="Record the opinion as another person's, at the same screen: it counts as theirs, recorded by you. Empty: your own">Speaking for <input class="rv-for-in" data-rv-for list="rv-people" value="${esc2(this.speakingFor ?? "")}" placeholder="${esc2(R2.reviewer ?? "yourself")}" maxlength="${MAX_NAME}" spellcheck="false" autocomplete="off"></label></div><div class="rv-err" hidden></div>`;
+    }
     if (R2.error && !R2.readOnly && !R2.blocked) controls += `<div class="banner warn">${esc2(R2.error)}</div>`;
     const by = trustedBy(d2, v2.name, v2.module, ext);
     const why = STANDARD_AXIOMS.includes(v2.name) ? ` <span class="muted">\u2014 a standard axiom, trusted without review</span>` : nonStandardAxiom(g2, i2) ? ` <span class="muted">\u2014 a non-standard axiom: it needs review whatever is trusted</span>` : by.length ? ` <span class="muted rv-trusted-by">\u2014 trusted without review, under ${by.map((p2) => `<code>${esc2(p2)}</code>`).join(" and ")}</span>` : "";
@@ -15877,6 +16076,14 @@ function quotedCode(link) {
   const pre = link.matches(".md-cq-h") ? link.closest(".md-cq")?.querySelector("pre") : null;
   return pre?.textContent ? pre.textContent.split("\n") : null;
 }
+var FOR_KEY = "visualproof.speakingFor";
+function readFor() {
+  try {
+    return typeof sessionStorage === "undefined" ? null : sessionStorage.getItem(FOR_KEY);
+  } catch {
+    return null;
+  }
+}
 
 // src/web/src/talk.ts
 var Talk = class {
@@ -17941,13 +18148,14 @@ var Activity = class {
     for (const [name, ops] of Object.entries(r2.opinions)) {
       for (const o2 of ops) {
         const verb = o2.verdict === "approve" ? o2.agent ? `suggests <span class="ok">approving</span>` : `<span class="ok">approved</span>` : `<span class="commented">${o2.agent ? "comments" : "commented"}</span> on`;
+        const rec = o2.recordedBy;
         out.push({
           key: `o:${o2.agent ? "a" : "p"}:${name}:${o2.by}:${o2.at}`,
           at: o2.at,
-          by: now(o2.by, o2.person),
+          by: rec ? now(rec.by, rec.person) : now(o2.by, o2.person),
           agent: !!o2.agent,
           cat: "review",
-          html: `${who(o2.by, o2.agent, o2.person)} ${verb} ${decl(name)}`,
+          html: rec ? `${who(rec.by, false, rec.person)} recorded <b>${escapeHtml(o2.by)}</b>'s ${o2.verdict === "approve" ? `<span class="ok">approval</span> of` : `<span class="commented">comment</span> on`} ${decl(name)}` : `${who(o2.by, o2.agent, o2.person)} ${verb} ${decl(name)}`,
           ...o2.comment ? { comment: { text: o2.comment, on: name } } : {},
           names: [name],
           targets: [],
@@ -18444,7 +18652,9 @@ var LostAndFound = class {
     switch (e2.kind) {
       case "opinion": {
         const verb = e2.verdict === "approve" ? e2.agent ? `suggested <span class="ok">approving</span>` : `<span class="ok">approved</span>` : `<span class="commented">${e2.agent ? "commented (advice)" : "commented"}</span>`;
-        return `${by} ${verb} ${when}` + (e2.comment ? `<div class="act-quote md">${this.hooks.comment(e2.comment, e2.name)}</div>` : "");
+        const rec = e2.recordedBy;
+        const whose = rec ? `<b>${escapeHtml(e2.by ?? "")}</b>` : by;
+        return `${whose} ${verb}${rec ? ` <span class="muted">\xB7 recorded by ${this.who(rec.by, void 0, rec.person)}</span>` : ""} ${when}` + (e2.comment ? `<div class="act-quote md">${this.hooks.comment(e2.comment, e2.name)}</div>` : "");
       }
       case "target":
         return `<span class="star">\u2605</span> a target, marked by ${by} ${when}`;
@@ -18784,6 +18994,7 @@ var Phone = class {
 
 // src/web/src/guide.ts
 var $2 = (sel) => document.querySelector(sel);
+var REPO = "https://github.com/LucianoXu/VisualProof";
 function around(...sels) {
   let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
   for (const s2 of sels) {
@@ -19119,7 +19330,7 @@ var Guide = class {
       ([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="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 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>`;
     this.help.hidden = false;
     this.help.querySelector(".help-box")?.focus();
   }
@@ -21166,7 +21377,7 @@ var SourceWindow = class {
     const scroll = this.el.querySelector(".sw-scroll");
     const keep = !fresh3 && scroll ? scroll.scrollTop : null;
     const typed = document.activeElement;
-    const hadFocus = typed instanceof HTMLTextAreaElement && this.el.contains(typed) && typed.matches("[data-rv-comment]") ? { from: typed.selectionStart, to: typed.selectionEnd } : null;
+    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]);
     const pinned = this.pinned;
     const steps = () => this.hooks.steps();
@@ -21189,9 +21400,9 @@ var SourceWindow = class {
       const scrolled = this.el.querySelector(".sw-scroll");
       if (scrolled && keep !== null) scrolled.scrollTop = keep;
       if (hadFocus) {
-        const box = this.el.querySelector("[data-rv-comment]");
+        const box = this.el.querySelector(hadFocus.sel);
         box?.focus();
-        box?.setSelectionRange(hadFocus.from, hadFocus.to);
+        if (hadFocus.from !== null && hadFocus.to !== null) box?.setSelectionRange(hadFocus.from, hadFocus.to);
       }
       this.box.reveal(this.el);
       this.flashLines();
@@ -44403,6 +44614,231 @@ var Papers = class {
   }
 };
 
+// src/shared/artrecipe.ts
+var ART_PRESETS = [
+  { key: "hd", name: "HD", w: 1920, h: 1080 },
+  { key: "4k", name: "4K", w: 3840, h: 2160 },
+  { key: "square", name: "Square", w: 4096, h: 4096 },
+  { key: "a3", name: "A3, 300 dpi", w: 4961, h: 3508 },
+  { key: "a2", name: "A2, 300 dpi", w: 7016, h: 4961 }
+];
+var RECIPE_MODES = ["plain", "deps", "tcb", "keys", "refs", "apps"];
+var RECIPE_BYTES = 6e3;
+var FIELDS = ["size", "orientation", "style", "theme", "transparent", "colouring", "border", "title", "subtitle", "titleSize", "footSize", "source", "names", "targets", "keys", "notes", "edges", "selection", "lit", "view"];
+var NAME_FIELDS = ["from", "clusters", "minShare", "targets", "decls", "omit"];
+function readRecipe(v2) {
+  const bad = (error, hint) => ({ error, hint });
+  if (!v2 || typeof v2 !== "object" || Array.isArray(v2)) return bad("recipe is an object.", 'E.g. {"size": "a2", "orientation": "portrait", "names": {"clusters": 1}}.');
+  if (new TextEncoder().encode(JSON.stringify(v2)).length > RECIPE_BYTES) return bad(`A recipe is at most ${RECIPE_BYTES} bytes.`, "Name clusters by a depth rather than one by one.");
+  const o2 = v2;
+  const unknown = Object.keys(o2).filter((k2) => !FIELDS.includes(k2));
+  if (unknown.length) return bad(`recipe has no field ${unknown.join(", ")}.`, `Its fields: ${FIELDS.join(", ")}.`);
+  const r2 = {};
+  const bool = (k2) => {
+    if (o2[k2] === void 0) return null;
+    if (typeof o2[k2] !== "boolean") return `${k2} is true or false.`;
+    r2[k2] = o2[k2];
+    return null;
+  };
+  const oneOf = (k2, of) => {
+    if (o2[k2] === void 0) return null;
+    if (!of.includes(o2[k2])) return `${k2} is ${of.join(", ")}.`;
+    r2[k2] = o2[k2];
+    return null;
+  };
+  const num = (k2, least2, most) => {
+    if (o2[k2] === void 0) return null;
+    if (typeof o2[k2] !== "number" || !Number.isFinite(o2[k2]) || o2[k2] < least2 || o2[k2] > most) return `${k2} is a number from ${least2} to ${most} (hundredths of the picture's height).`;
+    r2[k2] = o2[k2];
+    return null;
+  };
+  const text2 = (k2) => {
+    if (o2[k2] === void 0) return null;
+    if (o2[k2] !== null && (typeof o2[k2] !== "string" || o2[k2].length > TITLE_CHARS)) return `${k2} is text of at most ${TITLE_CHARS} characters, "" for none, or null for the project's own.`;
+    r2[k2] = o2[k2];
+    return null;
+  };
+  const names2 = (x2) => Array.isArray(x2) && x2.length <= 2e3 && x2.every((n3) => typeof n3 === "string" && n3.length > 0 && n3.length <= 1e3);
+  const fault = bool("transparent") ?? bool("border") ?? bool("source") ?? bool("keys") ?? bool("notes") ?? bool("lit") ?? oneOf("orientation", ["landscape", "portrait"]) ?? oneOf("style", ART_STYLES) ?? oneOf("theme", ["light", "dark"]) ?? oneOf("colouring", SCHEMES) ?? oneOf("edges", ["all", "selection", "none"]) ?? num("titleSize", TITLE_SIZE.least, TITLE_SIZE.most) ?? num("footSize", FOOT_SIZE.least, FOOT_SIZE.most) ?? text2("title") ?? text2("subtitle");
+  if (fault) return bad(fault, 'See GET /api/agent/docs/export, "Artwork".');
+  if (o2.size !== void 0) {
+    const s2 = o2.size;
+    if (typeof s2 === "string") {
+      if (!ART_PRESETS.some((p2) => p2.key === s2)) return bad(`size ${s2} is no size.`, `A size by name (${ART_PRESETS.map((p2) => p2.key).join(", ")}) or {w, h} in pixels.`);
+      r2.size = s2;
+    } else {
+      const sw = s2?.w, sh = s2?.h;
+      const side2 = (x2) => Number.isInteger(x2) && x2 >= 16 && x2 <= ART_MAX_SIDE;
+      if (!side2(sw) || !side2(sh)) return bad(`size is a name or {w, h}: whole pixels from 16 to ${ART_MAX_SIDE}.`, `Names: ${ART_PRESETS.map((p2) => p2.key).join(", ")}.`);
+      r2.size = { w: sw, h: sh };
+    }
+  }
+  if (o2.names !== void 0) {
+    const n3 = o2.names;
+    if (n3 === "board" || n3 === "clusters" || n3 === "none") r2.names = n3;
+    else if (n3 && typeof n3 === "object" && !Array.isArray(n3)) {
+      const m3 = n3;
+      const extra = Object.keys(m3).filter((k2) => !NAME_FIELDS.includes(k2));
+      if (extra.length) return bad(`names has no field ${extra.join(", ")}.`, `Its fields: ${NAME_FIELDS.join(", ")}.`);
+      const rule = {};
+      if (m3.from !== void 0) {
+        if (m3.from !== "none" && m3.from !== "board") return bad("names.from is none or board.", "From none: only what the rule names; from board: what the board writes, the rule's besides.");
+        rule.from = m3.from;
+      }
+      if (m3.clusters !== void 0) {
+        if (Number.isInteger(m3.clusters) && m3.clusters >= 0 && m3.clusters <= 20) rule.clusters = m3.clusters;
+        else if (names2(m3.clusters)) rule.clusters = m3.clusters;
+        else return bad("names.clusters is a depth (0: the top level) or a list of clusters' keys.", "E.g. 1: the top level and the clusters right under it.");
+      }
+      if (m3.minShare !== void 0) {
+        if (typeof m3.minShare !== "number" || !(m3.minShare >= 0 && m3.minShare <= 1)) return bad("names.minShare is a share from 0 to 1.", "0.01: a cluster below the top named where it holds at least 1% of the project's declarations.");
+        rule.minShare = m3.minShare;
+      }
+      if (m3.targets !== void 0) {
+        if (typeof m3.targets !== "boolean") return bad("names.targets is true or false.", "The shown targets' names.");
+        rule.targets = m3.targets;
+      }
+      for (const k2 of ["decls", "omit"]) {
+        if (m3[k2] === void 0) continue;
+        if (!names2(m3[k2])) return bad(`names.${k2} is a list of names.`, k2 === "decls" ? "Declarations by full name." : "Clusters by key, declarations by full name.");
+        rule[k2] = m3[k2];
+      }
+      r2.names = rule;
+    } else return bad('names is "board", "clusters", "none" or a rule {from, clusters, minShare, targets, decls, omit}.', 'E.g. {"clusters": 1}: the top level and the clusters right under it, and the targets.');
+  }
+  if (o2.targets !== void 0) {
+    const t2 = o2.targets;
+    if (t2 === "all" || t2 === "none" || t2 === "faded") r2.targets = t2;
+    else if (names2(t2)) r2.targets = t2;
+    else return bad(`targets is "all", "none", "faded" or a list of targets' full names.`, "Those named are marked, the others drawn as any declaration.");
+  }
+  if (o2.selection !== void 0 && o2.selection !== null) {
+    const s2 = o2.selection;
+    if (!s2 || typeof s2 !== "object" || typeof s2.name !== "string" || !s2.name || s2.mode !== void 0 && !RECIPE_MODES.includes(s2.mode) || Object.keys(s2).some((k2) => k2 !== "name" && k2 !== "mode"))
+      return bad("selection is {name, mode?}: a declaration's full name, and how it is selected.", `mode: ${RECIPE_MODES.join(", ")} (default tcb).`);
+    r2.selection = { name: s2.name, ...s2.mode !== void 0 ? { mode: s2.mode } : {} };
+  } else if (o2.selection === null) r2.selection = null;
+  if (o2.view !== void 0 && o2.view !== null) {
+    if (typeof o2.view !== "string" || !o2.view || o2.view.length > 200) return bad("view is a view's id.", "GET /api/agent/views lists them; left out, the Project.");
+    r2.view = o2.view;
+  }
+  return { recipe: r2 };
+}
+var EXTERNAL = "\u27E8external\u27E9";
+var keyOf = (k2) => k2 === "External" ? EXTERNAL : k2.startsWith("External.") ? EXTERNAL + k2.slice(8) : k2;
+function resolveRecipe(r2, b2) {
+  const problems = [];
+  const preset = typeof r2.size === "string" ? ART_PRESETS.find((p2) => p2.key === r2.size) : ART_PRESETS[1];
+  const given = typeof r2.size === "object" ? r2.size : { w: preset.w, h: preset.h };
+  const portrait = r2.orientation ? r2.orientation === "portrait" : given.h > given.w;
+  const [long, short6] = given.w >= given.h ? [given.w, given.h] : [given.h, given.w];
+  const { w: w2, h: h2 } = portrait ? { w: short6, h: long } : { w: long, h: short6 };
+  let left = 0;
+  const targetSet = new Set(b2.targets);
+  const held = (n4) => b2.clusterOf(n4) !== void 0;
+  let targets = "marked";
+  let shownTargets = [];
+  let marked2 = b2.targets.filter(held);
+  if (r2.targets === "none") [targets, marked2] = ["plain", []];
+  else if (r2.targets === "faded") targets = "highlight";
+  else if (Array.isArray(r2.targets)) {
+    const unknown = r2.targets.filter((t2) => !targetSet.has(t2));
+    if (unknown.length) problems.push(`not targets of the review: ${unknown.join(", ")}`);
+    const off = r2.targets.filter((t2) => targetSet.has(t2) && !held(t2));
+    if (off.length) problems.push(`targets not on the board: ${off.join(", ")}`);
+    const on = r2.targets.filter((t2) => targetSet.has(t2) && held(t2));
+    shownTargets = cleanNames(on, ART_TARGETS_BYTES);
+    left += new Set(on).size - shownTargets.length;
+    targets = "chosen";
+    marked2 = shownTargets;
+  }
+  let labels = "board";
+  let namesFrom = "board";
+  let shown = [];
+  let hidden = [];
+  let ruledIds = [];
+  const named2 = { clusters: [], ruled: [], decls: [] };
+  const n3 = r2.names;
+  if (n3 === "board" || n3 === "clusters" || n3 === "none") labels = n3;
+  else if (n3) {
+    labels = "chosen";
+    namesFrom = n3.from ?? "none";
+    const omit = new Set((n3.omit ?? []).map(keyOf));
+    const byKey = new Map(b2.clusters.map((c3, i2) => [c3.key, i2]));
+    if (typeof n3.clusters === "number") {
+      const least2 = Math.ceil((n3.minShare ?? 0.01) * b2.projectCount);
+      b2.clusters.forEach((c3) => {
+        if ((c3.ext ? c3.depth === 0 : c3.depth <= n3.clusters && c3.count >= least2) && !omit.has(c3.key)) named2.ruled.push(c3.key);
+      });
+    } else if (Array.isArray(n3.clusters)) {
+      for (const k2 of n3.clusters) {
+        const key = keyOf(k2);
+        if (!byKey.has(key)) problems.push(`no cluster ${k2} on the board`);
+        else if (!omit.has(key) && !named2.clusters.includes(key)) named2.clusters.push(key);
+      }
+    }
+    const decls = n3.targets === false ? [] : [...marked2];
+    for (const d2 of n3.decls ?? []) {
+      if (!held(d2)) problems.push(`no declaration ${d2} on the board`);
+      else decls.push(d2);
+    }
+    for (const d2 of decls) if (!omit.has(d2) && !named2.decls.includes(d2)) named2.decls.push(d2);
+    const ids = [...named2.clusters.map((k2) => artNameId("cluster", k2)), ...named2.decls.map((d2) => artNameId("decl", d2))];
+    shown = cleanNames(ids, ART_NAMES_BYTES);
+    const ruled = named2.ruled.map((k2) => artNameId("cluster", k2));
+    ruledIds = cleanNames(ruled, ART_RULED_BYTES);
+    left += ids.length + ruled.length - shown.length - ruledIds.length;
+    const kept = /* @__PURE__ */ new Set([...shown, ...ruledIds]);
+    named2.clusters = named2.clusters.filter((k2) => kept.has(artNameId("cluster", k2)));
+    named2.ruled = named2.ruled.filter((k2) => kept.has(artNameId("cluster", k2)));
+    named2.decls = named2.decls.filter((d2) => kept.has(artNameId("decl", d2)));
+    if (namesFrom === "board") hidden = cleanNames([...omit].map((k2) => byKey.has(k2) ? artNameId("cluster", k2) : artNameId("decl", k2)), ART_NAMES_BYTES);
+  }
+  const look = {
+    w: w2,
+    h: h2,
+    scheme: r2.colouring ?? "kind",
+    theme: r2.theme ?? "light",
+    background: r2.transparent ? "transparent" : "theme",
+    labels,
+    namesFrom,
+    hiddenNames: hidden,
+    shownNames: shown,
+    ruledNames: ruledIds,
+    edges: r2.edges ?? "all",
+    notes: r2.notes ?? true,
+    targets,
+    shownTargets,
+    keys: r2.keys ?? true,
+    selection: r2.lit ?? true,
+    source: r2.source ?? false,
+    style: r2.style ?? "board",
+    title: r2.title ?? null,
+    subtitle: r2.subtitle ?? null,
+    titleSize: r2.titleSize ?? TITLE_SIZE.first,
+    footSize: r2.footSize ?? FOOT_SIZE.first,
+    border: r2.border ?? false
+  };
+  return { look, named: named2, left, problems };
+}
+function decodeRecipe(text2) {
+  try {
+    const s2 = atob(text2.replace(/-/g, "+").replace(/_/g, "/"));
+    return JSON.parse(new TextDecoder().decode(Uint8Array.from(s2, (c3) => c3.charCodeAt(0))));
+  } catch {
+    return null;
+  }
+}
+var RECIPE_PARAM = "art";
+var SAVE_PARAM = "save";
+function recipeIn(hash) {
+  const p2 = new URLSearchParams(hash.startsWith("#") ? hash.slice(1) : hash);
+  const text2 = p2.get(RECIPE_PARAM);
+  if (!text2) return null;
+  const save = (p2.get(SAVE_PARAM) ?? "").split(",").filter((k2) => k2 === "png" || k2 === "svg");
+  return { text: text2, save: [...new Set(save)] };
+}
+
 // src/web/src/tabs.ts
 function starred(targets, short6) {
   const s2 = targets.map((t2) => `\u2605${short6(t2)}`);
@@ -45444,7 +45880,7 @@ var EDGE_SPEED = 0.9;
 var ARCS_MOST = 6e3;
 var FOLD_MORE = 10;
 var START = "\0start";
-var keyOf = (r2) => `${r2.kind}:${r2.name}`;
+var keyOf2 = (r2) => `${r2.kind}:${r2.name}`;
 var ease2 = (t2) => t2 < 0.5 ? 2 * t2 * t2 : 1 - (-2 * t2 + 2) ** 2 / 2;
 var lerp = (a3, b2, t2) => a3 + (b2 - a3) * t2;
 var LinearForm = class {
@@ -45805,8 +46241,8 @@ var LinearForm = class {
     const p2 = ease2(this.t);
     const sy = (y2) => v2.top + (y2 - this.cam.y) * k2;
     const onScreen = (y0, y1) => sy(y1) > -40 && sy(y0) < h2 + 40;
-    const oy = (r2) => this.off.get(keyOf(r2))?.dy ?? 0;
-    const ox = (r2) => this.off.get(keyOf(r2))?.dx ?? 0;
+    const oy = (r2) => this.off.get(keyOf2(r2))?.dy ?? 0;
+    const ox = (r2) => this.off.get(keyOf2(r2))?.dx ?? 0;
     const shown = (r2, y0, y1) => onScreen(y0 + oy(r2), y1 + oy(r2));
     const at = (r2, y2, rad) => {
       const f2 = r2.from;
@@ -45923,7 +46359,7 @@ var LinearForm = class {
     const still = held.size ? this.rows.filter((r2) => !held.has(r2)) : this.rows;
     circles(still);
     if (this.hooks.edges() && p2 > 0.6) this.arcs(c3, (r2) => [v2.x + ox(r2), sy(r2.cy + oy(r2))], (p2 - 0.6) / 0.4, css);
-    const on = this.hover && !this.drag ? this.rows.find((r2) => keyOf(r2) === this.hover) : void 0;
+    const on = this.hover && !this.drag ? this.rows.find((r2) => keyOf2(r2) === this.hover) : void 0;
     if (on && p2 >= 1) {
       const top = sy(on.y0 + oy(on)), bottom = sy((on.kind === "section" ? on.y0 + ROW : on.y1) + oy(on));
       const x0 = v2.x - 12 + ox(on), x1 = this.nameEnd(on) + 8 + ox(on);
@@ -46046,7 +46482,7 @@ var LinearForm = class {
   }
   /** The row the pointer is on, lit; drawn again where it changed. */
   setHover(r2) {
-    const key = r2 ? keyOf(r2) : null;
+    const key = r2 ? keyOf2(r2) : null;
     if (key === this.hover) return;
     this.hover = key;
     this.request();
@@ -46241,7 +46677,7 @@ var LinearForm = class {
       }
     }
     d2.at = at;
-    for (const r2 of d2.block) this.off.set(keyOf(r2), { dy, dx, ty: dy, tx: dx });
+    for (const r2 of d2.block) this.off.set(keyOf2(r2), { dy, dx, ty: dy, tx: dx });
     d2.sibs.forEach((_2, i2) => {
       if (i2 === d2.from) return;
       const shift = d2.from < i2 && i2 < at ? -d2.h : at <= i2 && i2 < d2.from ? d2.h : 0;
@@ -46250,22 +46686,22 @@ var LinearForm = class {
   }
   /** Ease a row to `ty` off its place on the line. */
   slide(r2, ty) {
-    const o2 = this.off.get(keyOf(r2));
+    const o2 = this.off.get(keyOf2(r2));
     if (o2) {
       o2.ty = ty;
       o2.tx = 0;
-    } else if (ty) this.off.set(keyOf(r2), { dy: 0, dx: 0, ty, tx: 0 });
+    } else if (ty) this.off.set(keyOf2(r2), { dy: 0, dx: 0, ty, tx: 0 });
   }
   /** Where each row is drawn now, in the outline's units, and how far off the line. */
   drawnAt() {
-    return new Map(this.rows.map((r2) => [keyOf(r2), { y: r2.y0 + (this.off.get(keyOf(r2))?.dy ?? 0), dx: this.off.get(keyOf(r2))?.dx ?? 0 }]));
+    return new Map(this.rows.map((r2) => [keyOf2(r2), { y: r2.y0 + (this.off.get(keyOf2(r2))?.dy ?? 0), dx: this.off.get(keyOf2(r2))?.dx ?? 0 }]));
   }
   /** The rows came in another order: each eases from where it was drawn to its new place. */
   settleFrom(before) {
     for (const r2 of this.rows) {
-      const b2 = before.get(keyOf(r2));
-      if (b2 && (Math.abs(b2.y - r2.y0) > 0.5 || b2.dx)) this.off.set(keyOf(r2), { dy: b2.y - r2.y0, dx: b2.dx, ty: 0, tx: 0 });
-      else this.off.delete(keyOf(r2));
+      const b2 = before.get(keyOf2(r2));
+      if (b2 && (Math.abs(b2.y - r2.y0) > 0.5 || b2.dx)) this.off.set(keyOf2(r2), { dy: b2.y - r2.y0, dx: b2.dx, ty: 0, tx: 0 });
+      else this.off.delete(keyOf2(r2));
     }
   }
   /** Everything off its place on the line eases back to it. */
@@ -46421,13 +46857,7 @@ function triangle(c3, x2, y2, open) {
 var FONT2 = `-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif`;
 
 // src/web/src/artwork.ts
-var PRESETS = [
-  { name: "HD", w: 1920, h: 1080 },
-  { name: "4K", w: 3840, h: 2160 },
-  { name: "Square", w: 4096, h: 4096 },
-  { name: "A3, 300 dpi", w: 4961, h: 3508 },
-  { name: "A2, 300 dpi", w: 7016, h: 4961 }
-];
+var PRESETS = ART_PRESETS;
 function presetOf(w2, h2) {
   return PRESETS.findIndex((p2) => p2.w === w2 && p2.h === h2 || p2.w === h2 && p2.h === w2);
 }
@@ -46446,6 +46876,7 @@ var DEFAULTS = {
   namesFrom: "board",
   hiddenNames: [],
   shownNames: [],
+  ruledNames: [],
   edges: "all",
   notes: true,
   targets: "marked",
@@ -46475,6 +46906,7 @@ function cleanSettings(s2, now) {
     namesFrom: o2.namesFrom === "none" ? "none" : "board",
     hiddenNames: cleanNames(o2.hiddenNames, ART_NAMES_BYTES, isArtNameId),
     shownNames: cleanNames(o2.shownNames, ART_NAMES_BYTES, isArtNameId),
+    ruledNames: cleanNames(o2.ruledNames, ART_RULED_BYTES, isArtNameId),
     edges: one(o2.edges, ["all", "selection", "none"], DEFAULTS.edges),
     notes: typeof o2.notes === "boolean" ? o2.notes : DEFAULTS.notes,
     targets,
@@ -46508,8 +46940,28 @@ function withChosen(list2, add, budget) {
   const had = new Set(list2), kept = new Set(out);
   return { list: out, left: new Set(add.filter((x2) => !had.has(x2) && !kept.has(x2))).size };
 }
-function themeBackground() {
-  return getComputedStyle(document.body).getPropertyValue("--canvas").trim();
+function themeBackground(v2 = browserVar) {
+  return v2("--canvas");
+}
+var browserVar = (name) => getComputedStyle(document.body).getPropertyValue(name).trim();
+var FRAME_ROOM = { panel: 300, margin: 32, gap: 12, head: 60, tail: 34, bar: 60 };
+function frameRect(screen, size) {
+  const R2 = FRAME_ROOM;
+  const roomW = Math.max(40, screen.w - R2.panel - 3 * R2.margin), roomH = Math.max(40, screen.h - R2.bar - R2.head - R2.tail - 2 * R2.gap);
+  const scale = Math.min(roomW / size.w, roomH / size.h);
+  const w2 = size.w * scale, h2 = size.h * scale;
+  return { x: R2.margin + (roomW - w2) / 2, y: R2.bar + R2.gap + R2.head + (roomH - h2) / 2, w: w2, h: h2 };
+}
+function titleRoom(h2, s2, own2) {
+  const titled = !!(s2.title ?? own2.title) || !!(s2.subtitle ?? own2.subtitle);
+  return titled ? Math.min(h2 * 0.4, s2.titleSize * 1.7 / 100 * h2 + Math.max(14, h2 * 0.035)) : 0;
+}
+function writeOver(ctx, s2, rect, own2, source, v2 = browserVar) {
+  const halo = s2.style === "cells" ? "#0f1520" : s2.style === "stars" ? "#090d1a" : v2("--canvas");
+  if (s2.border) drawBorder(ctx, rect, s2.style === "cells" ? "rgba(200, 212, 236, 0.55)" : s2.style === "stars" ? "rgba(241, 230, 200, 0.55)" : v2("--text-2"));
+  drawTitle(ctx, rect, s2.title ?? own2.title, s2.subtitle ?? own2.subtitle, s2.titleSize, s2.style, { ink: v2("--text"), quiet: v2("--text-2"), halo });
+  const quiet = s2.style === "board" ? v2("--text-2") : "rgba(200, 208, 224, 0.7)";
+  drawFoot(ctx, rect, s2.source ? source : null, { text: quiet, halo }, ART_SANS, s2.footSize);
 }
 function roundRect(ctx, x2, y2, w2, h2, r2) {
   r2 = Math.min(r2, w2 / 2, h2 / 2);
@@ -46813,6 +47265,7 @@ function svgColour(css, alpha = 1) {
 function glColour(c3) {
   return { rgb: `rgb(${Math.round(c3[0] * 255)},${Math.round(c3[1] * 255)},${Math.round(c3[2] * 255)})`, a: +c3[3].toFixed(3) };
 }
+var BUNDLE_PIECES = 12;
 var paint = (attr, c3) => ` ${attr}="${c3.rgb}"${c3.a < 1 ? ` ${attr}-opacity="${c3.a}"` : ""}`;
 var SvgGradient = class {
   stops = [];
@@ -47032,18 +47485,20 @@ var SvgContext = class {
     } else if (s2.kind === "line") {
       this.body.push(`<line x1="${n2(s2.x0)}" y1="${n2(s2.y0)}" x2="${n2(s2.x1)}" y2="${n2(s2.y1)}"${paint("stroke", glColour(s2.colour))} stroke-width="${n2(s2.width)}"/>`);
     } else {
-      const pts = bundlePoints(s2.ctrl, s2.beta, 48);
-      const d2 = `M${n2(pts[0])},${n2(pts[1])}${Array.from({ length: pts.length / 2 - 1 }, (_2, k2) => `L${n2(pts[2 * k2 + 2])},${n2(pts[2 * k2 + 3])}`).join("")}`;
+      const pts = bundlePoints(s2.ctrl, s2.beta, BUNDLE_PIECES * 4);
+      const n3 = pts.length / 2 - 1;
+      const path = (i0, i1, c3) => `<path d="M${n2(pts[2 * i0])},${n2(pts[2 * i0 + 1])}${Array.from({ length: i1 - i0 }, (_2, k2) => `L${n2(pts[2 * (i0 + k2 + 1)])},${n2(pts[2 * (i0 + k2 + 1) + 1])}`).join("")}" fill="none"${paint("stroke", c3)} stroke-width="${n2(s2.width)}"/>`;
       const a3 = glColour(s2.c0), b2 = glColour(s2.c1);
-      let stroke;
-      if (a3.rgb === b2.rgb && a3.a === b2.a) stroke = paint("stroke", a3);
+      if (a3.rgb === b2.rgb && a3.a === b2.a) this.body.push(path(0, n3, a3));
       else {
-        const id = `e${this.ids++}`;
-        const n3 = pts.length;
-        this.defs.push(`<linearGradient id="${id}" gradientUnits="userSpaceOnUse" x1="${n2(pts[0])}" y1="${n2(pts[1])}" x2="${n2(pts[n3 - 2])}" y2="${n2(pts[n3 - 1])}"><stop offset="0" stop-color="${a3.rgb}" stop-opacity="${a3.a}"/><stop offset="1" stop-color="${b2.rgb}" stop-opacity="${b2.a}"/></linearGradient>`);
-        stroke = ` stroke="url(#${id})"`;
+        const apart = Math.max(...s2.c0.map((v2, k2) => Math.abs(v2 - s2.c1[k2])));
+        const pieces = Math.min(BUNDLE_PIECES, Math.max(2, Math.ceil(apart * BUNDLE_PIECES)));
+        for (let p2 = 0; p2 < pieces; p2++) {
+          const i0 = Math.floor(p2 * n3 / pieces), i1 = Math.floor((p2 + 1) * n3 / pieces);
+          const t2 = (i0 + i1) / (2 * n3);
+          this.body.push(path(i0, i1, glColour(s2.c0.map((v2, k2) => v2 + (s2.c1[k2] - v2) * t2))));
+        }
       }
-      this.body.push(`<path d="${d2}" fill="none"${stroke} stroke-width="${n2(s2.width)}"/>`);
     }
   }
   /** A circle of an artwork's style, as the renderer draws it: a glow fading from its centre; a
@@ -47200,13 +47655,37 @@ async function encodePng(w2, h2, bands) {
   const sig = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
   return new Blob([sig, ...chunk("IHDR", ihdr), ...chunk("IDAT", idat), ...chunk("IEND", new Uint8Array(0))], { type: "image/png" });
 }
+function chooseIn(s2, written2, ids, on) {
+  const hidden = new Set(s2.hiddenNames), shown = new Set(s2.shownNames), ruled = new Set(s2.ruledNames);
+  const add = [], hide = [];
+  for (const id of ids) {
+    if (on) {
+      hidden.delete(id);
+      if (!written2.has(id) && !shown.has(id)) {
+        add.push(id);
+        ruled.delete(id);
+      }
+    } else if (shown.has(id)) shown.delete(id);
+    else if (ruled.has(id)) {
+      ruled.delete(id);
+      if (s2.namesFrom === "board") hide.push(id);
+    } else if (s2.namesFrom === "board" && written2.has(id)) hide.push(id);
+  }
+  return { hidden: [...hidden], shown: [...shown], ruled: [...ruled], add, hide };
+}
+async function untilStill(o2, since, quiet = 800, most = 2e4) {
+  const t0 = o2.now();
+  for (; ; ) {
+    const t2 = o2.now();
+    if (o2.drawnAt() >= since && t2 - o2.drawnAt() >= quiet) return true;
+    if (t2 - t0 >= most) return false;
+    await o2.sleep(100);
+  }
+}
 
 // src/web/src/artframe.ts
-var PANEL_W = 300;
-var MARGIN = 32;
-var GAP5 = 12;
-var HEAD_ROOM = 60;
-var TAIL_ROOM = 34;
+var PANEL_W = FRAME_ROOM.panel;
+var MARGIN = FRAME_ROOM.margin;
 var EASE_MS2 = 480;
 var DIP_MS = 180;
 var BAND_PIXELS = 4096 * 4096;
@@ -47332,23 +47811,27 @@ var ArtFrame = class {
   refresh() {
     if (this.isOpen) this.renderPanel();
   }
-  /** The mode, from the Export window: the reader's last settings, the whole board in the frame. */
-  open() {
-    if (this.isOpen && !this.leaving) return;
-    const s2 = cleanSettings(this.hooks.saved(), this.hooks.now());
-    this.start(s2, (r2) => {
-      const own2 = this.hooks.titles();
-      const titled = !!(s2.title ?? own2.title) || !!(s2.subtitle ?? own2.subtitle);
-      const below = titled ? Math.min(r2.h * 0.4, s2.titleSize * 1.7 / 100 * r2.h + Math.max(14, r2.h * 0.035)) : 0;
+  /** The mode, from the Export window: the reader's last settings, the whole board in the frame; or,
+   *  from a link's recipe (ExportSpec decision 20, shared/artrecipe.ts), the settings it gives — not
+   *  kept as the reader's until they change one. Resolves once the mode has come: the board drawn
+   *  with its look, the camera where it goes. */
+  open(given) {
+    if (this.isOpen && !this.leaving) return Promise.resolve();
+    const s2 = cleanSettings(given ?? this.hooks.saved(), this.hooks.now());
+    const came = this.start(s2, (r2) => {
+      const below = titleRoom(r2.h, s2, this.hooks.titles());
       return this.canvas.fitCam({ x: r2.x, y: r2.y + below, w: r2.w, h: r2.h - below });
     });
     this.hooks.changed();
+    return came;
   }
-  /** The reader leaves: the board drawn as before, the camera where it was. */
+  /** The reader leaves: the board drawn as before, the camera where it was. Resolves once the mode
+   *  has gone. */
   close() {
-    if (!this.isOpen || this.leaving) return;
-    this.end(true);
+    if (!this.isOpen || this.leaving) return Promise.resolve();
+    const gone = this.end(true);
     this.hooks.changed();
+    return gone;
   }
   /** The mode as presence carries it: its settings, and the rectangle of the board's world the frame
    *  holds — its middle, its width and height. */
@@ -47361,9 +47844,15 @@ var ArtFrame = class {
   /** A followed reader's artwork, or a link's: on with their settings — not kept as this reader's —
    *  the frame holding what theirs holds; off where theirs is. */
   follow(v2) {
-    if (!v2) return this.end(false);
+    if (!v2) {
+      void this.end(false);
+      return;
+    }
     const { region, ...s2 } = v2;
-    if (!this.isOpen || this.leaving) return this.start(s2, (r2) => this.camHolding(region, r2));
+    if (!this.isOpen || this.leaving) {
+      void this.start(s2, (r2) => this.camHolding(region, r2));
+      return;
+    }
     if (!sameLook(this.s, s2)) {
       this.s = s2;
       this.hooks.look(s2);
@@ -47376,7 +47865,8 @@ var ArtFrame = class {
   /** The mode comes (ExportSpec decision 19, the owner's decision of 2026-10-15: as smoothly as the
    *  linear form, web/src/linear.ts): the frame closes in from the whole screen as its shade comes,
    *  the camera glides to where `aim` puts it in the frame, the panel slides in; the board dips to
-   *  its ground a moment, takes the artwork's look and comes back; the title and the foot come last. */
+   *  its ground a moment, takes the artwork's look and comes back; the title and the foot come last.
+   *  Resolves when it has come (or a newer step took its place). */
   start(s2, aim2) {
     const turn = ++this.turn;
     const body = document.body;
@@ -47411,13 +47901,19 @@ var ArtFrame = class {
       this.renderSky();
       this.renderInk();
     }, DIP_MS);
-    setTimeout(() => turn === this.turn && body.classList.remove("art-moving"), EASE_MS2);
+    return new Promise(
+      (done) => setTimeout(() => {
+        if (turn === this.turn) body.classList.remove("art-moving");
+        done();
+      }, EASE_MS2)
+    );
   }
   /** The mode goes, as it came: the frame opens out to the whole screen as its shade goes, the
    *  panel slides away, the camera glides back where it was (`back`); the board dips, takes its own
-   *  look again, and comes back. A follower's goes with the other's, its camera theirs. */
+   *  look again, and comes back. A follower's goes with the other's, its camera theirs. Resolves when
+   *  it has gone (or a newer step took its place). */
   end(back) {
-    if (!this.isOpen || this.leaving) return;
+    if (!this.isOpen || this.leaving) return Promise.resolve();
     const turn = ++this.turn;
     const body = document.body;
     this.leaving = true;
@@ -47436,17 +47932,20 @@ var ArtFrame = class {
       this.renderSky();
       body.classList.remove("art-dip");
     }, DIP_MS);
-    setTimeout(() => {
-      if (turn !== this.turn) return;
-      this.leaving = false;
-      this.rect = { x: 0, y: 0, w: 0, h: 0 };
-      this.root.hidden = true;
-      this.panel.hidden = true;
-      this.sky.hidden = true;
-      this.root.classList.remove("art-away");
-      this.panel.classList.remove("art-away");
-      body.classList.remove("art-moving");
-    }, EASE_MS2);
+    return new Promise(
+      (done) => setTimeout(() => {
+        done();
+        if (turn !== this.turn) return;
+        this.leaving = false;
+        this.rect = { x: 0, y: 0, w: 0, h: 0 };
+        this.root.hidden = true;
+        this.panel.hidden = true;
+        this.sky.hidden = true;
+        this.root.classList.remove("art-away");
+        this.panel.classList.remove("art-away");
+        body.classList.remove("art-moving");
+      }, EASE_MS2)
+    );
   }
   /** The camera that holds `region` of the board's world in the frame `r`: its middle at the frame's,
    *  its width the frame's. */
@@ -47459,10 +47958,7 @@ var ArtFrame = class {
    *  there keeps what it showed — the same middle, as much of the board. */
   place(keep) {
     const s2 = this.s;
-    const roomW = innerWidth - PANEL_W - 3 * MARGIN, roomH = innerHeight - 60 - HEAD_ROOM - TAIL_ROOM - 2 * GAP5;
-    const scale = Math.min(roomW / s2.w, roomH / s2.h);
-    const w2 = Math.max(40, s2.w * scale), h2 = Math.max(40, s2.h * scale);
-    const x2 = MARGIN + (roomW - w2) / 2, y2 = 60 + GAP5 + HEAD_ROOM + (roomH - h2) / 2;
+    const { x: x2, y: y2, w: w2, h: h2 } = frameRect({ w: innerWidth, h: innerHeight }, s2);
     const was = this.rect;
     if (keep && was.w > 0) {
       const C2 = this.canvas;
@@ -47536,14 +48032,7 @@ var ArtFrame = class {
   }
   /** What an artwork writes over the board within `rect`: its border, its title and its foot. */
   writeOver(ctx, s2, rect) {
-    const own2 = this.hooks.titles();
-    const cs = getComputedStyle(document.body);
-    const v2 = (name) => cs.getPropertyValue(name).trim();
-    const halo = s2.style === "cells" ? "#0f1520" : s2.style === "stars" ? "#090d1a" : v2("--canvas");
-    if (s2.border) drawBorder(ctx, rect, s2.style === "cells" ? "rgba(200, 212, 236, 0.55)" : s2.style === "stars" ? "rgba(241, 230, 200, 0.55)" : v2("--text-2"));
-    drawTitle(ctx, rect, s2.title ?? own2.title, s2.subtitle ?? own2.subtitle, s2.titleSize, s2.style, { ink: v2("--text"), quiet: v2("--text-2"), halo });
-    const quiet = s2.style === "board" ? v2("--text-2") : "rgba(200, 208, 224, 0.7)";
-    drawFoot(ctx, rect, s2.source ? this.hooks.source() : null, { text: quiet, halo }, ART_SANS, s2.footSize);
+    writeOver(ctx, s2, rect, this.hooks.titles(), this.hooks.source());
   }
   /** The title, its line or its size changed beside the frame, or the foot's size: kept, drawn over
    *  the board at once, and said to those following once it has been still a moment. */
@@ -47600,7 +48089,7 @@ var ArtFrame = class {
     else {
       s2[k2] = t2.value;
       if (k2 === "labels" && t2.value === "chosen") {
-        [s2.namesFrom, s2.hiddenNames, s2.shownNames] = ["board", [], []];
+        [s2.namesFrom, s2.hiddenNames, s2.shownNames, s2.ruledNames] = ["board", [], [], []];
         this.filter = "";
       } else if (k2 === "targets" && t2.value === "chosen") {
         const r2 = withChosen([], this.hooks.targets().map((x2) => x2.name), ART_TARGETS_BYTES);
@@ -47632,21 +48121,17 @@ var ArtFrame = class {
   /** Names shown, or hidden (By selection): from their list, its All and None, or the board's menu.
    *  A name ticked is no longer hidden, and is shown besides where the board does not write it now; a
    *  name unticked is no longer shown besides, and is hidden where the board would write it all the
-   *  same. What does not fit in what the artwork carries is left out, and said. */
+   *  same. What does not fit in what the artwork carries is left out, and said. A name a recipe's
+   *  rule chose (ExportSpec decision 20) is the reader's once ticked — written wherever it falls, as
+   *  one ticked by hand — and no longer the rule's once unticked, hidden where the board would write
+   *  it (artwork chooseIn). */
   chooseNames(ids, on) {
     const s2 = this.s;
     if (!s2 || this.busy) return this.renderPanel();
     const now = this.canvas.writtenNames();
-    const hidden = new Set(s2.hiddenNames), shown = new Set(s2.shownNames);
-    const add = [], hide = [];
-    for (const id of ids) {
-      if (on) {
-        hidden.delete(id);
-        if (!now.has(id) && !shown.has(id)) add.push(id);
-      } else if (shown.has(id)) shown.delete(id);
-      else if (s2.namesFrom === "board" && now.has(id)) hide.push(id);
-    }
-    const a3 = withChosen([...shown], add, ART_NAMES_BYTES), h2 = withChosen([...hidden], hide, ART_NAMES_BYTES);
+    const { hidden, shown, ruled, add, hide } = chooseIn(s2, now, ids, on);
+    s2.ruledNames = ruled;
+    const a3 = withChosen(shown, add, ART_NAMES_BYTES), h2 = withChosen(hidden, hide, ART_NAMES_BYTES);
     [s2.shownNames, s2.hiddenNames] = [a3.list, h2.list];
     if (a3.left + h2.left) this.hooks.say(NO_ROOM(a3.left + h2.left, "name"));
     const wrote = new Set(now);
@@ -47678,7 +48163,7 @@ var ArtFrame = class {
     }
     if (!this.filter.trim()) {
       if (this.busy) return this.renderPanel();
-      [s2.namesFrom, s2.hiddenNames, s2.shownNames] = [all === "all" ? "board" : "none", [], []];
+      [s2.namesFrom, s2.hiddenNames, s2.shownNames, s2.ruledNames] = [all === "all" ? "board" : "none", [], [], []];
       return this.settled();
     }
     this.chooseNames(nameRows(this.rows, this.filter, Infinity).rows.map((r2) => r2.id), all === "all");
@@ -47715,7 +48200,7 @@ var ArtFrame = class {
     const s2 = this.s;
     const here = this.rows.filter((r2) => this.wrote.has(r2.id)).length;
     const n3 = (k2, what) => k2 ? ` \xB7 ${k2.toLocaleString("en")} ${what}` : "";
-    return `${here.toLocaleString("en")} of ${this.rows.length.toLocaleString("en")} in the frame written${s2?.namesFrom === "none" ? " \xB7 from none" : ""}${n3(s2?.hiddenNames.length ?? 0, "hidden")}${n3(s2?.shownNames.length ?? 0, "shown besides")}`;
+    return `${here.toLocaleString("en")} of ${this.rows.length.toLocaleString("en")} in the frame written${s2?.namesFrom === "none" ? " \xB7 from none" : ""}${n3(s2?.hiddenNames.length ?? 0, "hidden")}${n3(s2?.shownNames.length ?? 0, "shown besides")}${n3(s2?.ruledNames.length ?? 0, "by a rule")}`;
   }
   renderPanel(held = false) {
     const s2 = this.s;
@@ -47791,10 +48276,18 @@ var ArtFrame = class {
     const n3 = all.filter((t2) => on.has(t2.name)).length;
     return `<div class="art-pick"><div class="art-pick-head"><span class="muted">Their star and name, each ticked</span><button class="rv-btn" data-art-pick="targets-all">All</button><button class="rv-btn" data-art-pick="targets-none">None</button></div><div class="art-rows" data-art-rows="targets">${rows || `<div class="art-rows-h">The review has no target</div>`}</div><div class="art-note muted">${n3} of ${all.length} marked</div></div>`;
   }
+  /** The files a link's recipe asks for (ExportSpec decision 20), one after the other, as Save SVG
+   *  and Save PNG make them; those made. */
+  async save(kinds) {
+    const made2 = [];
+    if (!this.isOpen || !this.s) return made2;
+    for (const k2 of kinds) if (await this.saveFile(k2)) made2.push(k2);
+    return made2;
+  }
   /** Make the file, at the full size, from the board as it is drawn now, and hand it to the browser
-   *  to save. */
+   *  to save; whether it was made. */
   async saveFile(kind) {
-    if (this.busy || !this.s) return;
+    if (this.busy || !this.s) return false;
     const s2 = { ...this.s };
     const C2 = this.canvas;
     const rect = { ...this.rect }, cam = { ...C2.cam };
@@ -47819,7 +48312,8 @@ var ArtFrame = class {
         if (s2.border) pen.raw(`</g>`);
         this.writeOver(ctx, s2, rect);
       }, await faces());
-      return download(new Blob([svg], { type: "image/svg+xml" }), name);
+      download(new Blob([svg], { type: "image/svg+xml" }), name);
+      return true;
     }
     this.busy = true;
     this.renderPanel();
@@ -47881,8 +48375,10 @@ var ArtFrame = class {
         }
       }
       download(await encodePng(s2.w, s2.h, bands()), name);
+      return true;
     } catch {
       this.hooks.say(`This browser could not draw a picture of ${s2.w} \xD7 ${s2.h} pixels: choose a smaller size, or save the SVG.`);
+      return false;
     } finally {
       this.busy = false;
       this.renderPanel();
@@ -50278,8 +50774,10 @@ async function boot() {
     menu: (t2, x2, y2, world) => openMenu(t2, x2, y2, world),
     frozenDrag: () => say(frozenWhy())
   });
+  const ownOpen = /* @__PURE__ */ new Map();
+  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: projectNotes.list, view: nav.board?.rec.notes ?? [] }),
+    notes: () => ({ project: asOpenHere(projectNotes.list), view: asOpenHere(nav.board?.rec.notes ?? []) }),
     // the Project holds every note of the project; another board what its scope gives and its
     // view's lists (the owner's decision of 2026-10-11), the links read as the board reads the review
     items: () => ({ all: !nav.board || fixedScope(nav.board.rec), items: nav.board?.rec.items, links: boardReview().links ?? [] }),
@@ -50294,7 +50792,7 @@ async function boot() {
       if (i2 !== void 0) go(i2);
     },
     moves: (h2) => !frozen() && dragMoves(locked, h2),
-    setOpen: (id, kind, open) => void (kind === "project" ? projectOps([{ op: "pnote-open", id, open }]) : noteOps([{ op: "note-open", id, open }])),
+    setOpen: (id, _kind, open) => setNoteOpen(id, open),
     moved: (id, to) => void moveNote(id, to),
     // where a card hangs from its icon is shared as its state is, and is no edit
     card: (id, kind, card) => void (kind === "project" ? projectOps([{ op: "pnote-card", id, card }]) : noteOps([{ op: "note-card", id, card }])),
@@ -50326,13 +50824,8 @@ async function boot() {
     edges: () => S2.showEdges,
     moveNote: (id, key, world, detach2) => stickies.moveInto(id, key, world, detach2),
     noteText: (id) => noteOf(id)?.note.text ?? null,
-    noteOpen: (id) => !!noteOf(id)?.note.open,
-    toggleNote: (id) => {
-      const n3 = noteOf(id);
-      if (frozen()) return say(frozenWhy());
-      if (n3?.kind === "project") void projectOps([{ op: "pnote-open", id: n3.note.id, open: !n3.note.open }]);
-      else if (n3) noteOps([{ op: "note-open", id: n3.note.id, open: !n3.note.open }]);
-    },
+    noteOpen: (id) => noteOpenHere(id),
+    toggleNote: (id) => setNoteOpen(id, !noteOpenHere(id)),
     // the board's menu on what a row is; Fold and Fit are the form's (menuAct)
     menu: (on, x2, y2, spot) => {
       if (on?.kind === "note") openNoteMenu(on.id, x2, y2);
@@ -50352,6 +50845,10 @@ async function boot() {
   const ART_INERT = "#bar .brand, #bar .library-wrap, #export-btn, #activity-btn, #bar .peers-wrap, #bar .who-wrap, #help-btn, #bar .more-wrap";
   const ART_KEYS = /* @__PURE__ */ new Set(["/", "1", "2", "3", "f", "+", "=", "-", "_", "e", "[", "]", "l"]);
   let artLook = null;
+  let gitNow = null;
+  let gitAsked = data.git().then((git) => {
+    gitNow ??= git;
+  });
   const art = new ArtFrame($4("#art"), $4("#art-panel"), $4("#art-sky"), canvas, {
     title: () => views.title(nav.board.id),
     saved: () => S2.artwork,
@@ -50361,13 +50858,21 @@ async function boot() {
     },
     now: () => ({ scheme: canvas.scheme, theme: document.documentElement.dataset.theme === "dark" ? "dark" : "light" }),
     look: (s2) => {
+      const coming = !artLook && !!s2;
       artLook = s2 && { ...s2 };
       drawLook();
+      if (coming)
+        gitAsked = data.git().then((git) => {
+          gitNow = git;
+          art.refresh();
+        });
     },
     changed: () => people.report(),
     notes: () => stickies.asDrawn(),
+    // the commit checked out now; on a past build's board, that build's, with the project's source
     source: () => {
-      const git = vg().meta.project.git;
+      const then = vg().meta.project.git;
+      const git = pastShown() ? then && { ...then, source: then.source ?? gitNow?.source ?? null } : gitNow;
       return git ? sourceLine(git) : null;
     },
     // the targets a picture can mark: every one of the review's, by the name the board writes
@@ -50394,12 +50899,14 @@ async function boot() {
       linear.hide("reader");
       document.documentElement.dataset.theme = a3.style === "board" ? a3.theme : "dark";
     } else applyTheme();
-    canvas.setArt(a3 && { labels: a3.labels, namesFrom: a3.namesFrom, hidden: new Set(a3.hiddenNames), shown: new Set(a3.shownNames), edges: a3.edges, targets: a3.targets, shownTargets: new Set(a3.shownTargets), keys: a3.keys, style: a3.style });
+    canvas.setArt(a3 && { labels: a3.labels, namesFrom: a3.namesFrom, hidden: new Set(a3.hiddenNames), shown: new Set(a3.shownNames), ruled: new Set(a3.ruledNames), edges: a3.edges, targets: a3.targets, shownTargets: new Set(a3.shownTargets), keys: a3.keys, style: a3.style });
     applyScheme();
     syncEdges();
     apply();
   };
+  let drawnAt = 0;
   canvas.onFrame = () => {
+    drawnAt = performance.now();
     stickies.frame();
     art.frame();
   };
@@ -50813,6 +51320,33 @@ async function boot() {
     const line = missingLine(gone);
     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 L2 = canvas.layout;
+    const { look, problems, left } = resolveRecipe(read.recipe, {
+      clusters: L2.clusters,
+      clusterOf: (name) => {
+        const i2 = g2.byName.get(name);
+        const j2 = i2 === void 0 ? -1 : toView(i2);
+        return j2 < 0 ? void 0 : L2.cluster[j2];
+      },
+      targets: Object.keys(review.data.targets),
+      projectCount: g2.projectCount
+    });
+    if (problems.length || left) say(`This link's artwork: ${[...problems, ...left ? [`${left} names left out, more than an artwork carries`] : []].join("; ")}.`);
+    if (art.isOpen) await art.close();
+    await art.open(look);
+    if (!link.save.length) return;
+    const since = performance.now();
+    await gitAsked;
+    await document.fonts?.ready;
+    canvas.request();
+    await untilStill({ now: () => performance.now(), drawnAt: () => drawnAt, sleep: (ms) => new Promise((ok) => setTimeout(ok, ms)) }, since);
+    if (link.save.length > 1) say(`Saving the picture as ${link.save.map((k2) => k2.toUpperCase()).join(" and ")}: your browser may ask to allow this site to download several files.`);
+    const made3 = await art.save(link.save);
+    document.documentElement.dataset.artworkSaved = made3.length ? made3.join(",") : "none";
+  };
   handsOver = () => !reader && (!!data.snapshot || !!people.name || !!data.privateSession);
   const syncPeers = () => {
     const marks = [];
@@ -51621,7 +52155,12 @@ async function boot() {
     const cam = e2.state?.cam ?? null;
     const tmAt = e2.state?.tm;
     const snap2 = snapshotIn(location.hash);
+    const recipe2 = recipeIn(location.hash);
     void (st2 ? restore2(st2, cam, typeof tmAt === "number" ? tmAt : void 0) : Promise.resolve()).then(() => snap2 ? openSnapshot(snap2).then(() => writeAddress(false)) : void 0).then(() => {
+      if (!recipe2) return;
+      void openRecipe(recipe2);
+      writeAddress(false);
+    }).then(() => {
       renderNav();
       people.report();
     });
@@ -52125,6 +52664,16 @@ async function boot() {
     const p2 = projectNotes.get(id);
     return p2 ? { kind: "project", note: p2 } : null;
   };
+  const noteOpenHere = (id) => ownOpen.get(id) ?? !!noteOf(id)?.note.open;
+  const setNoteOpen = (id, open) => {
+    const n3 = noteOf(id);
+    if (!n3) return;
+    if (reader) {
+      ownOpen.set(id, open);
+      stickies.render();
+    } else if (n3.kind === "project") void projectOps([{ op: "pnote-open", id, open }]);
+    else noteOps([{ op: "note-open", id, open }]);
+  };
   const moveNote = (id, d2) => {
     const had = noteOf(id)?.note.decl;
     const attach = d2.decl || had ? d2.decl : void 0;
@@ -52238,8 +52787,9 @@ async function boot() {
     if (!n3) return;
     const t2 = {
       kind: "note",
-      open: n3.note.open,
+      open: noteOpenHere(id),
       view: n3.kind === "view",
+      ...reader ? { own: true } : {},
       carries: (n3.note.carries ?? []).map(carryLabel),
       attach: !data.snapshot && !reader,
       ...n3.kind === "project" ? { items: noteViews(n3.note) } : {}
@@ -52462,12 +53012,9 @@ async function boot() {
       case "note-edit":
         if (on.note) await editNote(on.note, on.at);
         return;
-      case "note-toggle": {
-        const n3 = on.note ? noteOf(on.note) : null;
-        if (n3?.kind === "project") void projectOps([{ op: "pnote-open", id: n3.note.id, open: !n3.note.open }]);
-        else if (n3) noteOps([{ op: "note-open", id: n3.note.id, open: !n3.note.open }]);
+      case "note-toggle":
+        if (on.note) setNoteOpen(on.note, !noteOpenHere(on.note));
         return;
-      }
       case "note-kind":
         if (on.note) await switchNote(on.note);
         return;
@@ -52606,6 +53153,8 @@ ${n3.note.text.slice(0, 200)}`)) return;
   listen();
   const snap = snapshotIn(location.hash);
   if (snap) await openSnapshot(snap);
+  const recipe = recipeIn(location.hash);
+  if (recipe) void openRecipe(recipe);
   if (!data.snapshot) void tm.load().then(() => renderTabs());
   try {
     history.replaceState({ n: 0 }, "", "#" + encodeState(current2()));