geometryview 0.1.2 → 0.3.0

package/web/viewer.js

@@ -12,6 +12,12 @@ import { LibraryCard, cachedImport, forgetKept, keptFile, keptSource, libraryEnt
          setCacheVersion } from "./library.js";
 import { keyOf } from "./library-rows.js";
 import { LibraryStore } from "./library-store.js";
+import { Importers } from "./importers.js";
+import { Gallery } from "./gallery.js";
+import { GalleryToolbar } from "./gallery-toolbar.js";
+import { kContentInsets as kGalleryInsets } from "./gallery-view.js";
+import { evict as evictImports, forget as forgetKeptKey, forgetNamed, keptImport, keptSource as keptSourceOf,
+         keyOf as keptKeyOf, persistOnce } from "./kept.js";
 import { DropZone, HoldHint, HoverChip, Look, LookCard, Masthead, SectionCard, SelectionCard,
          ShortcutsSheet, StatusCard, Styles, Toolbar } from "./chrome.js";
 import { el } from "./ui.js";
@@ -40,7 +46,8 @@ async function isolate() {
 }
 await isolate();
 const canvas = document.getElementById("viewport");
-const phone = /iPhone|iPad|Android/.test(navigator.userAgent) ||
+// A phone, or a check asking to be one (?phone=1).
+const phone = params.get("phone") === "1" || /iPhone|iPad|Android/.test(navigator.userAgent) ||
               (navigator.maxTouchPoints > 1 && /Macintosh/.test(navigator.userAgent));
 document.body.classList.toggle("phone", phone);
 
@@ -104,12 +111,17 @@ const progress = new Map();
 let hovered = null; // { document, node, face }
 // The tree and library card: always open on a desktop, a sheet opened when wanted on a phone.
 let panelOpen = !phone;
+// The gallery, made when a folder's is first shown (gallery.js).
+let gallery = null;
+let galleryShown = false;
+let openedFromGallery = false;
 // What the chrome covers of the view, in CSS pixels, as framing keeps clear of it.
 let insets = { left: 0, top: 0, right: 0, bottom: 0 };
 let pointer = null; // { x, y } in CSS pixels, while over the view
 
 const masthead = new Masthead();
-masthead.onClose = () => closeFiles();
+// In the gallery, × leaves it, as Esc does at the top; in the viewer it closes the files.
+masthead.onClose = () => (galleryShown ? leaveGallery() : closeFiles());
 const structure = new StructureCard(engine, { onSwitch: (show) => showLibrary(show) });
 const library = new LibraryCard(libraryStore, {
   open: (row, add) => openFromFolder(row, add),
@@ -118,6 +130,8 @@ const library = new LibraryCard(libraryStore, {
   connect: () => connectFolder(),
   switch: (show) => showLibrary(show),
   forget: (key) => forgetRecent(key),
+  showFolder: (root, path) => showGallery(root, path),
+  search: (query) => gallery?.setSearch(query),
 });
 const selection = new SelectionCard((action) => engine.perform(action));
 const lookCard = new LookCard(look, (next) => applyLook(next));
@@ -142,6 +156,22 @@ const toolbar = new Toolbar({
     showLibrary(names.length === 0);
   },
 });
+const galleryToolbar = new GalleryToolbar({
+  view: (view) => gallery?.setView(view),
+  sheet: (change) => gallery?.setSheet(change),
+  ladders: (change) => gallery?.setLadders(change),
+  atlas: (change) => gallery?.atlas(change),
+  catalogue: (change) => gallery?.catalogue(change),
+  look: () => toggleCard(lookCard),
+  poster: () => setGalleryPoster(!gallery?.poster),
+  save: () => saveGalleryPoster(),
+  savePDF: () => saveGalleryPDF(),
+  // On a phone the Library is a sheet raised from the toolbar.
+  library: () => {
+    panelOpen = !panelOpen;
+    showLibrary(true);
+  },
+});
 const holdHint = new HoldHint();
 const hoverChip = new HoverChip();
 const dropZone = new DropZone();
@@ -153,6 +183,7 @@ picker.addEventListener("change", () => {
 });
 document.body.append(masthead.element, structure.element, library.element, selection.element,
                      lookCard.element, sectionCard.element, toolbar.element, toolbar.viewsMenu, toolbar.moreMenu,
+                     galleryToolbar.element, galleryToolbar.posterBar,
                      holdHint.element,
                      hoverChip.element, dropZone.element, shortcuts.element, picker);
 
@@ -168,6 +199,22 @@ new ViewportInput(engine, canvas, {
     showHover();
   },
 });
+// While the gallery shows, its keys are its own; in the viewer, Esc goes back to the gallery the
+// files came from once no card is open.
+addEventListener("keydown", (e) => {
+  if (galleryShown && e.key === "Escape" && dismissCard()) {
+    // A card open over the gallery closes first.
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  } else if (galleryShown && gallery?.key(e)) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  } else if (!galleryShown && openedFromGallery && e.key === "Escape" && !dismissCard()) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    enterGallery();
+  }
+}, { capture: true });
 // ⌘O opens files, ⇧⌘O adds them to what is shown, ⌥⌘O connects a folder: the Mac's keys.
 addEventListener("keydown", (e) => {
   if ((e.metaKey || e.ctrlKey) && e.code === "KeyO") {
@@ -260,6 +307,11 @@ function refreshSelection() {
 }
 
 function refreshMasthead() {
+  if (galleryShown) {
+    masthead.show(gallery.title, gallery.subtitle);
+    masthead.setProgress(null);
+    return;
+  }
   if (names.length === 0) {
     masthead.hide();
     return;
@@ -371,6 +423,126 @@ function applyLook(next, { remember = true } = {}) {
   const dark = Styles[look.style].onDark;
   masthead.setOnDark(dark);
   document.body.classList.toggle("on-dark", dark);
+  gallery?.setStyle(look.engineLook.style);
+}
+
+// ---- The gallery --------------------------------------------------------------------------------
+
+// A connected folder's gallery covers the view, the Library beside it; the 3D view draws nothing
+// meanwhile. A file opened from it opens in the viewer, and Esc there comes back.
+function galleryFor() {
+  if (gallery) return gallery;
+  // Plates and Sheet ship first; ?views=all shows the views still being built.
+  // All five views; Plates and Sheet alone with views=two.
+  const views = params.get("views") === "two" ? 0b11 : 0b11111;
+  gallery = new Gallery({ engine, store: libraryStore, importers, phone, probes: params.get("test") === "gallery", views }, {
+    open: (root, path) => openFromGallery(root, path),
+    leave: () => leaveGallery(),
+    folderChanged: () => refreshMasthead(),
+    changed: () => galleryToolbar.show(gallery.state),
+    leavePoster: (toggle = false) => setGalleryPoster(toggle ? !gallery.poster : false),
+    // Permission asked again from the lost card's Reconnect, in its click.
+    reconnect: async (root) => {
+      if (!root || !(await libraryStore.folders.reconnect(root.id))) return;
+      await library.refresh();
+      await gallery.reconnected();
+    },
+    search: (query, found) => library.showSearch(galleryShown, query, found),
+  });
+  canvas.after(gallery.view.element);
+  // A press in the gallery closes the cards, as one in the view does.
+  gallery.view.element.addEventListener("pointerdown", () => closeCards());
+  gallery.setStyle(look.engineLook.style);
+  return gallery;
+}
+
+async function showGallery(root, path) {
+  const g = galleryFor();
+  if (phone && panelOpen) {
+    // Chosen in the Library's sheet: the sheet goes down over the gallery.
+    panelOpen = false;
+    showLibrary(true);
+  }
+  enterGallery();
+  await g.show(root, path);
+}
+
+function enterGallery() {
+  galleryShown = true;
+  gallery.view.element.hidden = false;
+  engine.setCovered(true);
+  status.hide();
+  toolbar.element.hidden = true;
+  galleryToolbar.element.hidden = false;
+  galleryToolbar.show(gallery.state);
+  library.showSearch(true, gallery.core.search, gallery.core.matches);
+  selection.element.hidden = true;
+  if (!phone) {
+    panelOpen = true;
+    showLibrary(true);
+  }
+  gallery.view.reload();
+  refreshMasthead();
+}
+
+function leaveGallery() {
+  dismissCard(); // no card left open over the viewer
+  if (gallery.poster) setGalleryPoster(false);
+  galleryShown = false;
+  gallery.view.element.hidden = true;
+  engine.setCovered(false);
+  toolbar.element.hidden = false;
+  galleryToolbar.element.hidden = true;
+  library.showSearch(false);
+  if (names.length === 0) showEmpty();
+  refreshMasthead();
+}
+
+// Show it off: the view as a poster, the full window less 30 each side, the cards put away, with
+// Save PNG and Done in the top margin.
+function setGalleryPoster(poster) {
+  if (!gallery || !galleryShown || phone) return;
+  masthead.element.hidden = poster;
+  library.element.hidden = poster;
+  galleryToolbar.element.hidden = poster;
+  galleryToolbar.posterBar.hidden = !poster;
+  if (poster) closeCards();
+  gallery.view.setInsets(poster ? { top: 30, left: 30, bottom: 30, right: 30 } : kGalleryInsets);
+  gallery.setPoster(poster);
+  if (!poster) {
+    showLibrary(true);
+    refreshMasthead();
+  }
+}
+
+async function saveGalleryPoster() {
+  const png = await gallery?.view.posterPNG();
+  if (!png) return;
+  const link = el("a", { href: URL.createObjectURL(png), download: `${gallery.title} poster.png` });
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(link.href), 10_000);
+}
+
+async function saveGalleryPDF() {
+  if (!gallery) return;
+  // A book can take a while: the button counts its pages meanwhile, and takes no second press.
+  let pdf;
+  try {
+    pdf = await gallery.posterPDF((page, pages) => galleryToolbar.savingPDF(`Page ${page} of ${pages}\u2026`));
+  } finally {
+    galleryToolbar.savingPDF(null);
+  }
+  if (!pdf) return;
+  const what = gallery.core.view === 4 ? "catalogue" : "poster";
+  const link = el("a", { href: URL.createObjectURL(pdf), download: `${gallery.title} ${what}.pdf` });
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(link.href), 10_000);
+}
+
+async function openFromGallery(root, path) {
+  leaveGallery();
+  openedFromGallery = true;
+  await openFromFolder({ root: root.id, path, name: path.split("/").pop() }, false);
 }
 
 // ---- Layout -----------------------------------------------------------------------------------
@@ -444,6 +616,7 @@ async function connectFolder() {
 }
 
 async function showConnected(ids) {
+  persistOnce(); // what is kept of a connected folder's files should outlast storage pressure
   await library.refresh();
   for (const id of ids) library.expand(id);
   if (!phone) panelOpen = true;
@@ -481,6 +654,7 @@ async function rememberOpened(name) {
   if (!name) return;
   const source = sources.get(name) ?? {};
   const entry = { key: name, name, where: source.where ?? "Kept in this browser", openedAt: Date.now() };
+  if (keys.has(name)) entry.cacheKey = keys.get(name);
   for (const field of ["handle", "root", "path"]) if (source[field]) entry[field] = source[field];
   try {
     const dropped = await libraryStore.remember(entry);
@@ -493,8 +667,12 @@ async function rememberOpened(name) {
 }
 
 async function forgetRecent(key) {
+  const entry = (await libraryStore.recent()).find((r) => r.key === key);
   await libraryStore.forget(key);
-  if (!names.includes(key)) await forgetKept(key);
+  if (!names.includes(key)) {
+    await forgetKept(key);
+    if (entry?.cacheKey) await forgetKeptKey(entry.cacheKey);
+  }
 }
 
 // The Library's keys of what is shown: names, and paths in connected folders.
@@ -551,12 +729,35 @@ async function openFiles(files, adding) {
 // ---- Importing --------------------------------------------------------------------------------
 
 // The importer runs in a worker, with its own pool of OCCT workers, one file at a time. Phones
-// get two OCCT workers, as P2 measured best; desktops one per core, less two for the page.
+// get two OCCT workers, as P2 measured best; desktops one per core, less two for the page. What is
+// opened goes through the importers' live lane: one at a time, in the order asked, and a file being
+// opened cancels a refinement running; the gallery's imports have a lane of their own.
 let importer = null;
-let importing = Promise.resolve();
+const importers = new Importers({ shared: phone });
+let importing = Promise.resolve(); // the latest file asked for, for the scripted checks
+let nextJob = 1;
 const stepSources = new Map(); // STEP files imported this visit, by name, for refinement
+const keys = new Map(); // names of files imported this visit, to their kept imports' keys
 const importWorkers = phone ? 2 : Math.max(2, Math.min(12, (navigator.hardwareConcurrency ?? 4) - 2));
 
+// Where a file came from, for its kept import's key: a connected folder's name and its path there,
+// or "file" and its name for one opened on its own.
+function originOf(file) {
+  const source = sources.get(file.name);
+  return source?.root ? { source: library.folderName(source.root) || source.root, path: source.path }
+                      : { source: "file", path: file.name };
+}
+
+async function keyFor(file) {
+  return keptKeyOf({ ...originOf(file), size: file.size, modified: file.lastModified, version: engine.cacheVersion });
+}
+
+// Keeps what is kept within its budget, sparing what is open, after an import adds to it.
+function evictKept() {
+  const open = new Set(names.map((name) => keys.get(name)).filter(Boolean));
+  evictImports(open).catch(() => {});
+}
+
 // What importing an STL file takes at its peak. A binary file, read in pieces, is never held
 // whole, and the importer's heap stays under 300 MB and 115 bytes a triangle: 0.46 GB for 2
 // million, 0.87 GB for 5 and 1.27-1.37 GB for 10. Any other is read whole, and is reckoned as it
@@ -572,8 +773,11 @@ const kPhoneImportBudget = 1.2 * 1024 ** 3;
 
 function importFile(file, add) {
   if (!/\.stl$/i.test(file.name)) stepSources.set(file.name, file);
-  importing = importing.then(async () => {
-    const cached = await cachedImport(file);
+  importing = importers.live(`open-${nextJob++}`, async (signal) => {
+    const key = await keyFor(file);
+    keys.set(file.name, key);
+    // Kept before by key, or by name before keys were kept.
+    const cached = (await keptImport(key, engine.cacheVersion))?.blob ?? await cachedImport(file);
     if (cached) {
       openCache(cached, file.name, add);
       return { type: "cached" };
@@ -617,8 +821,12 @@ function importFile(file, add) {
         }
       };
       worker.onerror = (event) => resolve({ type: "failed", message: event.message ?? "The importer failed." });
-      worker.postMessage({ type: "import", file, kind: stl ? "stl" : "step", name: file.name,
-                           workers: importWorkers, threads: stl, progressive: !stl });
+      signal.addEventListener("abort", () => worker.postMessage({ type: "cancel" }));
+      // A file in a connected folder can be read from there again, so its source is not kept.
+      const fromFolder = Boolean(sources.get(file.name)?.root);
+      worker.postMessage({ type: "import", file, kind: stl ? "stl" : "step", name: file.name, key,
+                           keepSource: !stl && !fromFolder, workers: importWorkers, threads: stl,
+                           progressive: !stl });
     });
     if (stl) worker.terminate();
     lastImport = result;
@@ -628,7 +836,8 @@ function importFile(file, add) {
       return result;
     }
     if (token !== null) engine.finishImport(token);
-    else openCache(await keptFile(file.name), file.name, add);
+    else openCache((await keptImport(key))?.blob, file.name, add);
+    evictKept();
     return result;
   });
   return importing;
@@ -638,22 +847,40 @@ function importFile(file, add) {
 
 // The engine asks for finer geometry where the settled view is close, as on the Mac: the STEP
 // file's definitions it names are imported again at a finer level, and their segments join the
-// document. The file is the one imported this visit, or the one the library kept beside its cache.
-// Refinements wait their turn behind imports, in the same worker and its warm OCCT pool.
+// document. The file is the one imported this visit, the one in its connected folder, or the one
+// the library kept beside its cache. Refinements wait their turn behind files being opened, in the
+// same worker and its warm OCCT pool, and one running is cancelled for a file being opened.
 let refinement = null;
 
+// A STEP file's source again, for refining: from this visit, its folder, or what was kept.
+async function sourceFor(name) {
+  const visit = stepSources.get(name);
+  if (visit) return visit;
+  const where = sources.get(name);
+  if (where?.root && library.readyFolders.has(where.root)) {
+    const file = await libraryStore.folders.file(where.root, where.path).catch(() => null);
+    if (file) return file;
+  }
+  const key = keys.get(name);
+  return (key ? await keptSourceOf(key) : null) ?? await keptSource(name);
+}
+
 function refineDocument(token, name, level, definitions) {
-  const job = { cancelled: false };
+  const job = { cancelled: false, id: `refine-${nextJob++}` };
   refinement = job;
   const asked = performance.now();
-  importing = importing.then(async () => {
+  importers.live(job.id, async (signal) => {
     let ok = false;
     const started = performance.now();
     let note = "";
     let made = null, segments = 0, refused = 0;
+    signal.addEventListener("abort", () => {
+      job.cancelled = true;
+      importer?.postMessage({ type: "cancel" });
+    });
     try {
-      const file = job.cancelled ? null : stepSources.get(name) ?? await keptSource(name);
-      if (!file) return;
+      const file = job.cancelled ? null : await sourceFor(name);
+      if (!file || job.cancelled) return;
       importer ??= new Worker(new URL("./import-worker.js", import.meta.url), { type: "module" });
       const result = await new Promise((resolve) => {
         importer.onmessage = ({ data }) => {
@@ -674,7 +901,7 @@ function refineDocument(token, name, level, definitions) {
                  coarserFaces: result.coarserFaces, crashedWorkers: result.crashedWorkers };
       }
       // The view keeps the geometry it has, so a failure is only worth a note for diagnosing.
-      if (!ok) console.warn(`Refining ${name} to level ${level} failed: ${result.message}`);
+      if (!ok && !job.cancelled) console.warn(`Refining ${name} to level ${level} failed: ${result.message}`);
     } finally {
       refinements.push({ name, level, definitions: definitions.length, waitedMs: Math.round(started - asked),
                          ms: Math.round(performance.now() - started), ok, cancelled: job.cancelled, note,
@@ -682,21 +909,26 @@ function refineDocument(token, name, level, definitions) {
       if (!job.cancelled) engine.finishRefinement(token, ok);
       if (refinement === job) refinement = null;
     }
-  });
+  }, { band: "visible" });
 }
 
 // Each refinement job, as the scripted check reports them.
 const refinements = [];
 
 function cancelRefinement() {
-  if (refinement) refinement.cancelled = true;
+  if (!refinement) return;
+  refinement.cancelled = true;
+  importers.cancel(refinement.id);
 }
 
 let lastImport = null;
 let importStarted = 0;
 
-// Removes a kept import, so the next open imports again.
-const forgetImport = (name) => forgetKept(name);
+// Removes what was kept of a file by its name, so the next open imports again.
+async function forgetImport(name) {
+  await forgetKept(name);
+  await forgetNamed(name);
+}
 
 // Dropping files: holding ⌘ adds them to what is shown.
 let dragDepth = 0;
@@ -805,6 +1037,9 @@ if (params.has("token")) {
 if (params.get("test") === "import") runImportTest().catch((error) => post({ error: error.message }));
 else if (params.get("test") === "library") runLibraryTest().catch((error) => post({ error: error.message }));
 else if (params.get("test") === "refine") runRefineTest().catch((error) => post({ error: error.message }));
+else if (params.get("test") === "thumbs") runThumbsTest().catch((error) => post({ error: error.message }));
+else if (params.get("test") === "worker") runWorkerTest().catch((error) => post({ error: error.message }));
+else if (params.get("test") === "gallery") runGalleryTest().catch((error) => post({ error: error.message, stack: error.stack }));
 else if (params.has("test")) runTest().catch((error) => post({ error: error.message }));
 
 // ---- The launcher's bridge ---------------------------------------------------------------------
@@ -966,8 +1201,12 @@ function bridgeHandlers() {
 
 function testLabel() {
   // A report's name is a file's, so an imported fixture's folder joins it with a dash.
-  const name = (model ?? params.get("file") ?? "none").replaceAll("/", "-");
-  return `${params.get("label") ?? "unlabelled"}-p4-${params.get("test")}-${name}`;
+  const name = (model ?? params.get("file") ?? (params.get("test") === "gallery" ? params.get("folder") : null) ?? "none")
+    .replaceAll("/", "-");
+  // The gallery's checks are reported with its measurements.
+  const phase = ["thumbs", "worker"].includes(params.get("test")) ? "g1"
+    : params.get("test") === "gallery" ? "g9" : "p4";
+  return `${params.get("label") ?? "unlabelled"}-${phase}-${params.get("test")}-${name}`;
 }
 
 async function post(report) {
@@ -1017,7 +1256,7 @@ async function runImportTest() {
 // is left, so the first open shows whether it lasted.
 async function runLibraryTest() {
   const name = params.get("file") ?? "pack.step";
-  if (!params.has("keep")) await forgetKept(name);
+  if (!params.has("keep")) await forgetImport(name);
   const keptBefore = (await libraryEntries()).map((e) => e.name);
   let id;
   if (libraryStore.kind === "shell") {
@@ -1040,6 +1279,9 @@ async function runLibraryTest() {
   }
   await showConnected([id]);
   const listed = (await libraryStore.folders.list(id, "")).map((e) => e.name).sort();
+  // A gallery's walk: its folders and model files, by path.
+  const walked = [];
+  for await (const entry of libraryStore.folders.walk(id)) walked.push(`${entry.kind}:${entry.path}`);
 
   lastImport = null;
   const opened = performance.now();
@@ -1074,13 +1316,467 @@ async function runLibraryTest() {
     const opfs = await navigator.storage.getDirectory();
     await opfs.removeEntry("library-test", { recursive: true }).catch(() => {});
   }
-  await post({ backend: libraryStore.kind, origin: location.origin, keptBefore, listed, firstMs, imported,
+  await post({ backend: libraryStore.kind, origin: location.origin, keptBefore, listed, walked, firstMs, imported,
                stayedOnLibrary, stillOnLibrary: !library.element.hidden || phone,
                recentFirst: recent[0]?.key,
                recentWhere: recent[0]?.where, reopenMs, reopenedFromCache,
                idleFrames: idle.frames - settled.frames, looping: idle.looping, rows });
 }
 
+// Draws fixtures' pictures in the gallery's picture worker, one after another as the gallery
+// will, and reports how long each took, the most memory the worker held and how often it was
+// replaced; the first eight go on a sheet, kept as a PNG.
+async function runThumbsTest() {
+  const { Thumbnailer } = await import("./thumbs.js");
+  const files = (params.get("files") ?? "gallery-drive,gallery-motor").split(",");
+  const count = Number(params.get("count") ?? 40);
+  const thumbnailer = new Thumbnailer({ recycleMB: Number(params.get("recycle") ?? 256) });
+  const blobs = await Promise.all(files.map(async (f) => (await fetch(`${fixtures}${f}.geoblob`)).blob()));
+  const spec = { pixels: Number(params.get("size") ?? 256), style: Number(params.get("style") ?? 0),
+                 colorMode: 1, pixelsPerPoint: 2, lineScale: 0.5 };
+  const times = [];
+  let firstMs = 0, maxHeapMB = 0, firstPicture = null;
+  const kept = [];
+  for (let i = 0; i < count; i++) {
+    const started = performance.now();
+    const picture = await thumbnailer.draw(blobs[i % blobs.length], spec, i % 4);
+    const ms = performance.now() - started;
+    if (i === 0) firstMs = ms;
+    else times.push(ms);
+    maxHeapMB = Math.max(maxHeapMB, thumbnailer.heapMB);
+    firstPicture ??= { width: picture.width, partRect: picture.partRect, inkRect: picture.inkRect,
+                       worldPerPixel: picture.worldPerPixel, pngBytes: picture.png.size };
+    if (kept.length < 8) kept.push(picture.bitmap);
+    else picture.bitmap.close();
+  }
+  thumbnailer.close();
+  const sheet = new OffscreenCanvas(spec.pixels * kept.length, spec.pixels);
+  const context = sheet.getContext("2d");
+  context.fillStyle = "#f2ead8";
+  context.fillRect(0, 0, sheet.width, sheet.height);
+  kept.forEach((bitmap, i) => context.drawImage(bitmap, i * spec.pixels, 0));
+  const png = await sheet.convertToBlob({ type: "image/png" });
+  await fetch(`/png?label=${encodeURIComponent(testLabel())}`, { method: "POST", body: png }).catch(() => {});
+  times.sort((a, b) => a - b);
+  const at = (q) => Math.round(times[Math.min(times.length - 1, Math.floor(q * times.length))] * 100) / 100;
+  await post({ files, count, size: spec.pixels, style: spec.style, firstMs: Math.round(firstMs),
+               p50Ms: at(0.5), p90Ms: at(0.9), maxHeapMB, recycled: thumbnailer.recycled, firstPicture });
+}
+
+// The import worker's gallery messages: a STEP file's structure alone, as one model segment; and
+// an import cancelled soon after it starts, which stops with its slices out.
+async function runWorkerTest() {
+  const name = params.get("file") ?? "pack.step";
+  const file = new File([await (await fetch(`${fixtures}step/${name}`)).blob()], name);
+  const worker = new Worker(new URL("./import-worker.js", import.meta.url), { type: "module" });
+  const ask = (message, onSegment = () => {}) => new Promise((resolve) => {
+    worker.onmessage = ({ data }) => {
+      if (data.type === "segment") onSegment(data.bytes);
+      else if (data.type !== "progress") resolve(data);
+    };
+    worker.postMessage(message);
+  });
+  let started = performance.now();
+  const segments = [];
+  const structure = await ask({ type: "structure", file }, (bytes) => segments.push(bytes.length));
+  const structureMs = Math.round(performance.now() - started);
+
+  started = performance.now();
+  let progressed = false;
+  const cancelled = new Promise((resolve) => {
+    worker.onmessage = ({ data }) => {
+      if (data.type === "progress" && data.done > 0 && !progressed) {
+        progressed = true;
+        worker.postMessage({ type: "cancel" });
+      } else if (data.type === "done" || data.type === "failed") {
+        resolve(data);
+      }
+    };
+  });
+  worker.postMessage({ type: "import", file, kind: "step", name, key: "worker-test", keepSource: false,
+                       workers: importWorkers, threads: false, progressive: false });
+  const outcome = await cancelled;
+  const cancelMs = Math.round(performance.now() - started);
+  worker.terminate();
+  await forgetKeptKey("worker-test");
+  await post({ file: name, structure: structure.type, structureMs, structureSegments: segments,
+               cancelOutcome: outcome.type, cancelled: outcome.cancelled ?? false, cancelMs,
+               message: outcome.message ?? "" });
+}
+
+// A served folder's gallery (?folder=test-models), measured as the Mac's --gallery-check measures
+// its own: in Illustration, Blueprint and Studio, the folder and its first subfolders, every
+// alignment group as painted, and how far anything was painted from where the core laid it. Then
+// the view is scrolled through its tallest folder while long tasks are counted, and the 3D view's
+// frames while the gallery covers it.
+async function runGalleryTest() {
+  const dir = params.get("folder") ?? "test-models";
+  const name = dir.split("/").pop();
+  let id, listing;
+  if (libraryStore.kind === "shell") {
+    // On the iPhone: the folder the shell connected from its own storage, walked as the gallery
+    // walks it.
+    id = (await libraryStore.folders.folders()).find((f) => f.name === name)?.id;
+    if (!id) throw new Error(`The shell connected no folder named ${name}.`);
+    listing = [];
+    for await (const entry of libraryStore.folders.walk(id)) listing.push({ path: entry.path, folder: entry.kind === "folder" });
+  } else {
+    listing = await (await fetch(`/list?dir=${encodeURIComponent(dir)}`)).json();
+    if (!libraryStore.folders.adoptRemote) throw new Error("Run with backend=visit.");
+    id = libraryStore.folders.adoptRemote(name, listing, `/viewer/${dir}/`);
+  }
+  await library.refresh();
+  const root = { id, name };
+  const g = galleryFor();
+  await showGallery(root, "");
+  const settle = async () => {
+    const started = performance.now();
+    while (g.waitingInView > 0 && performance.now() - started < Number(params.get("wait") ?? 240000)) await sleep(250);
+    await sleep(400);
+    g.view.repaint();
+    await new Promise(requestAnimationFrame);
+    return Math.round(performance.now() - started) / 1000;
+  };
+  const subfolders = [...new Set(listing.filter((e) => e.folder && !e.path.includes("/")).map((e) => e.path))]
+    .filter((p) => listing.some((e) => !e.folder && e.path.startsWith(`${p}/`))).sort().slice(0, 3);
+  const runs = [];
+  let worst = 0, over = 0, deviation = 0;
+  // Every alignment group as painted, and how far each item was painted from where the core laid it.
+  const measure = () => {
+    const { lines, columns } = g.view.measured();
+    const result = g.core.check(lines, columns, 0.5);
+    const items = g.core.items;
+    let off = 0, worstItem = null;
+    for (let i = 0; i < items.length; i++) {
+      const it = items[i];
+      const d = Math.max(Number.isNaN(lines[i]) ? 0 : Math.abs(lines[i] - it.line),
+                         it.column && !Number.isNaN(columns[i]) ? Math.abs(columns[i] - it.columnLine) : 0);
+      if (d > off) {
+        off = d;
+        // The item furthest off, to look into: what it is, where laid and where painted.
+        worstItem = { kind: it.kind, flags: it.flags, x: it.x, y: it.y, width: it.width, height: it.height,
+                      line: it.line, painted: lines[i], column: it.columnLine, paintedColumn: columns[i],
+                      lineWidth: it.lineWidth, fontSize: it.fontSize, group: it.group };
+      }
+    }
+    deviation = Math.max(deviation, off);
+    worst = Math.max(worst, ...result.over.map((o) => o.spread), 0);
+    over += result.over.length;
+    // The toolbar fits its room: folded as it must be, never cut off.
+    const bar = galleryToolbar.element;
+    return { groupsChecked: result.checked, over: result.over, painted: lines.filter((v) => !Number.isNaN(v)).length,
+             maxDeviation: Math.round(off * 1000) / 1000, ...(off > 0.1 ? { worstItem } : {}), toolbarCut: Math.max(0, bar.scrollWidth - bar.clientWidth),
+             toolbarFold: bar.classList.contains("tighter") ? 2 : bar.classList.contains("tight") ? 1 : 0 };
+  };
+  // checkViews (a list, "4" or "0,4") runs only those, for looking into one.
+  const views = params.has("checkViews") ? params.get("checkViews").split(",").map(Number)
+    : params.get("views") === "all" ? [0, 1, 2, 3, 4] : [0, 1];
+  // scrollOnly skips the styles' runs, for timing a scroll alone; styles=0 runs Illustration only,
+  // to keep a phone's run short.
+  const styles = params.has("styles") ? params.get("styles").split(",").map(Number) : [0, 3, 5];
+  for (const style of params.has("scrollOnly") ? [] : styles) {
+    const next = Object.assign(Object.create(Object.getPrototypeOf(look)), look);
+    next.choose(style);
+    applyLook(next, { remember: false });
+    for (const view of views) {
+      g.setView(view);
+      for (const path of ["", ...subfolders]) {
+        await g.show(root, path);
+        g.setView(view);
+        await sleep(600); // past any move
+        const waited = await settle();
+        if (params.has("shots") && path === "") {
+          // Whoever runs the browser takes a screenshot while the page waits.
+          await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-${dir.replaceAll("/", "-")}-${["plates", "sheet", "ladders", "atlas", "catalogue"][view]}-${style}`)}`);
+          await sleep(1500);
+        }
+        runs.push({ style, view, folder: path, waited, ...measure() });
+        if (view === 4) {
+          // Catalogue's other spreads: the contents, a plate and its table, the index.
+          const { spreads } = g.core.catalogue;
+          for (const spread of [...new Set([1, 2, 3, Math.floor(spreads / 2), spreads - 1])].filter((s) => s > 0 && s < spreads)) {
+            g.catalogue({ spread });
+            await sleep(200);
+            await settle();
+            if (params.has("shots") && path === "") {
+              await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-${dir.replaceAll("/", "-")}-catalogue-${style}-s${spread}`)}`);
+              await sleep(1500);
+            }
+            runs.push({ style, view, spread, folder: path, waited: 0, ...measure() });
+          }
+        }
+        if (view === 3) {
+          // Atlas closer in: the districts, then every part named.
+          for (const level of [1, 2]) {
+            g.atlas({ level });
+            await sleep(300);
+            await settle();
+            runs.push({ style, view, level, folder: path, waited: 0, ...measure() });
+          }
+        }
+      }
+    }
+  }
+  if (params.has("lost")) {
+    // The folder drawn, then unreadable, as when the browser's permission lapses: shown again from
+    // what was kept, faded, with Reconnect; then readable again.
+    g.setView(0);
+    await g.show(root, "");
+    await settle();
+    await sleep(2500); // past the listing being kept
+    const folders = libraryStore.folders;
+    const { walk, file } = folders;
+    const denied = () => { throw new DOMException("The folder cannot be read.", "NotAllowedError"); };
+    folders.walk = async function* () { denied(); };
+    folders.file = async () => denied();
+    g.root = null;
+    await g.show(root, "");
+    await sleep(3000);
+    g.view.repaint();
+    await new Promise(requestAnimationFrame);
+    const items = g.core.items;
+    const pictures = items.filter((i) => i.kind === 2 && !(i.flags & 16));
+    const shown = [...g.view.element.querySelectorAll(".gallery-content img.g-picture:not([hidden])")]
+      .filter((img) => img.style.visibility !== "hidden" && img.src).length;
+    const lost = { items: items.length, faded: items.filter((i) => i.flags & 128).length,
+                   card: items.filter((i) => i.flags & 16).length, pictures: pictures.length, picturesShown: shown,
+                   ...measure() };
+    if (params.has("shots")) {
+      await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-lost`)}`);
+      await sleep(1500);
+    }
+    folders.walk = walk;
+    folders.file = file;
+    await g.reconnected();
+    await settle();
+    const back = { faded: g.core.items.filter((i) => i.flags & 128).length, items: g.core.items.length };
+    await post({ folder: dir, lost, back });
+    return;
+  }
+  if (params.has("poster")) {
+    // The folder as a poster in each view: aligned as painted, and drawn as PNG.
+    const posters = [];
+    const names = ["plates", "sheet", "ladders", "atlas", "catalogue"];
+    for (const view of params.get("views") === "all" ? [0, 1, 2, 3, 4] : [0, 1]) {
+      await g.show(root, "");
+      g.setView(view);
+      setGalleryPoster(true);
+      await sleep(600);
+      await settle();
+      const run = { view, ...measure(), contentHeight: Math.round(g.core.contentHeight) };
+      const png = await g.view.posterPNG();
+      run.pngBytes = png?.size ?? 0;
+      // Its PDF too: a page, or in Catalogue the book, a spread a page.
+      const pdfStart = performance.now();
+      let counted = 0, label = "";
+      const pdf = await g.posterPDF((page, pages) => {
+        counted++;
+        galleryToolbar.savingPDF(`Page ${page} of ${pages}\u2026`); // as the button counts them
+        label = galleryToolbar.posterBar.textContent;
+      });
+      galleryToolbar.savingPDF(null);
+      run.pdfPagesCounted = counted;
+      run.pdfLabel = label;
+      run.pdfBytes = pdf.size;
+      run.pdfMs = Math.round(performance.now() - pdfStart);
+      await fetch(`/png?type=pdf&label=${encodeURIComponent(`${params.get("label") ?? "web"}-poster-${names[view]}`)}`,
+                  { method: "POST", body: pdf });
+      if (png) await fetch(`/png?label=${encodeURIComponent(`${params.get("label") ?? "web"}-poster-${names[view]}`)}`, { method: "POST", body: png });
+      if (params.has("shots")) {
+        await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-poster-screen-${view}`)}`);
+        await sleep(1500);
+      }
+      setGalleryPoster(false);
+      posters.push(run);
+    }
+    await post({ folder: dir, posters, groupsOver: over, maxDeviation: Math.round(deviation * 1000) / 1000 });
+    return;
+  }
+  const g3 = params.has("scrollOnly") ? null : await galleryMotionChecks(g, root, subfolders, measure, settle);
+  // Scrolling the tallest folder: long tasks over 50 ms while it moves.
+  const tall = params.get("scroll") ?? subfolders.at(-1) ?? "";
+  await g.show(root, tall);
+  await settle();
+  if (params.has("expand")) {
+    // Every size band shown whole: "show all" on each, then their pictures.
+    for (let band = 0; band < 12; band++) g.view.act(g.core.click(3, band, false));
+    await settle();
+  }
+  const longTasks = [];
+  const observer = new PerformanceObserver((list) => {
+    for (const entry of list.getEntries()) longTasks.push(Math.round(entry.duration));
+  });
+  try {
+    observer.observe({ type: "longtask", buffered: false });
+  } catch {
+    // No long tasks reported here.
+  }
+  const clip = g.view.element.querySelector(".gallery-clip");
+  const height = clip.scrollHeight - clip.clientHeight;
+  const scrollStarted = performance.now();
+  for (let i = 1; i <= 120; i++) {
+    clip.scrollTop = (height * i) / 120;
+    await new Promise(requestAnimationFrame);
+  }
+  const scrollMs = Math.round(performance.now() - scrollStarted);
+  await sleep(200);
+  observer.disconnect();
+  // No 3D frames while the gallery covers the view.
+  const before = engine.stats().frames;
+  await sleep(2000);
+  const framesWhileCovered = engine.stats().frames - before;
+  // Detail pictures: Catalogue's plate figure, drawn large.
+  const details = { galleryBefore: galleryShown };
+  if (views.includes(4)) {
+    await g.show(root, "");
+    g.setView(4);
+    g.catalogue({ spread: 2 });
+    await settle();
+    const detailStart = performance.now();
+    const wanted = g.core.details().length;
+    while (g.view.detailCount < wanted && performance.now() - detailStart < 60_000) await sleep(200);
+    Object.assign(details, { catalogueWanted: wanted, catalogueShown: g.view.detailCount,
+                             catalogueSeconds: Math.round(performance.now() - detailStart) / 1000 });
+    if (params.has("shots")) {
+      await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-detail-catalogue`)}`);
+      await sleep(1500);
+    }
+  }
+  // What the person found trying the gallery: Esc with the Look card open closes the card first,
+  // and × leaves the gallery.
+  const galleryBefore = galleryShown;
+  toggleCard(lookCard);
+  const lookOpened = !lookCard.element.hidden;
+  // Pressed as a key is, at the page's focus: the window's capturing listener sees it first.
+  document.body.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true }));
+  const escape = { galleryBefore, lookOpened, lookOpenAfter: !lookCard.element.hidden, galleryAfter: galleryShown };
+  masthead.onClose();
+  const close = { galleryAfter: galleryShown, viewHidden: g.view.element.hidden,
+                  emptyShown: !status.element.hidden };
+  await post({ folder: dir, files: listing.filter((e) => !e.folder).length, runs, groupsOver: over,
+               window: { escape, close, details },
+               worstSpread: worst, maxDeviation: Math.round(deviation * 1000) / 1000,
+               scroll: { folder: tall, height: Math.round(height), frames: 120, ms: scrollMs, longTasks,
+                         items: g.core.items.length,
+                         longest: Math.max(0, ...longTasks) },
+               framesWhileCovered, ...(g3 ? { g3 } : {}),
+               // Nothing scrolls sideways, the page or the gallery, at any width.
+               overflowX: { page: document.scrollingElement.scrollWidth - innerWidth,
+                            gallery: clip.scrollWidth - clip.clientWidth, width: innerWidth } });
+}
+
+// G3's checks in the page: a heading of Sheet's stays at the top as its block scrolls under it; a
+// search fades what it did not find; Peek is painted over the view and aligned; and each move plays
+// for as long as the spec says, the selection kept.
+async function galleryMotionChecks(g, root, subfolders, measure, settle) {
+  const clip = g.view.element.querySelector(".gallery-clip");
+  const out = {};
+  // Sticky headings, in Sheet at the top, scrolled a third of the way.
+  await g.show(root, "");
+  g.setView(1);
+  await sleep(600);
+  await settle();
+  clip.scrollTop = Math.round((clip.scrollHeight - clip.clientHeight) / 3);
+  await new Promise(requestAnimationFrame);
+  await new Promise(requestAnimationFrame);
+  const top = clip.getBoundingClientRect().top;
+  const items = g.core.items;
+  let stuck = null;
+  for (const [i, box] of g.view.paintedBoxes()) {
+    const item = items[i];
+    if (item.kind !== 0 || !(item.stickyUntil > 0)) continue;
+    const dy = clip.scrollTop - item.stickyTop;
+    if (dy > 0 && dy < item.stickyUntil) {
+      // On screen, the band's top sits at the view's top.
+      const node = [...clip.querySelectorAll(".g-rect")].find((n) => !n.hidden && Number(n.style.zIndex) === items.length + i);
+      stuck = { stickyTop: item.stickyTop, scroll: clip.scrollTop,
+                fromViewTop: node ? Math.round((node.getBoundingClientRect().top - top) * 1000) / 1000 : null,
+                layoutTop: Math.round(box.y * 1000) / 1000 };
+      break;
+    }
+  }
+  out.sticky = { ...stuck, aligned: measure() };
+  clip.scrollTop = 0;
+  // A search: what it did not find painted at 22%.
+  const probe = g.core.path(g.core.wanted()[0]?.file ?? 0).split("/").pop().slice(0, 3);
+  g.setSearch(probe);
+  await new Promise(requestAnimationFrame);
+  const faded = [...g.view.element.querySelectorAll(".gallery-content > :not([hidden])")].filter((n) => n.style.opacity === "0.22").length;
+  out.search = { query: probe, found: g.core.matches, fadedNodes: faded, aligned: measure() };
+  g.setSearch("");
+  // Peek over the first file of the first subfolder, in Sheet, where → selects a file. A folder
+  // shows the view it last showed, so the view is chosen once in it.
+  await g.show(root, subfolders[0] ?? "");
+  g.setView(1);
+  await sleep(600);
+  await settle();
+  g.view.key(1); // → selects the first file
+  g.view.key(5); // Space
+  await new Promise(requestAnimationFrame);
+  const fixed = g.view.element.querySelectorAll(".gallery-fixed > :not([hidden])").length;
+  out.peek = { file: g.core.peeking === null ? null : g.core.path(g.core.peeking), fixedNodes: fixed, aligned: measure() };
+  if (params.has("shots")) {
+    await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-peek`)}`);
+    await sleep(1500);
+  }
+  // Peek's turntable: its frames come, then → turns the part a frame at a time.
+  const turnStart = performance.now();
+  while (!g.core.peekTurnable && performance.now() - turnStart < 60_000) await sleep(100);
+  await new Promise(requestAnimationFrame);
+  const turn = { seconds: Math.round(performance.now() - turnStart) / 1000, turnable: g.core.peekTurnable,
+                 aligned: measure() };
+  if (params.has("shots")) {
+    await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-peek-turn-0`)}`);
+    await sleep(1500);
+  }
+  for (let i = 0; i < 6; i++) g.view.key(1); // a quarter turn, at 24 frames
+  turn.frameAfterSix = g.view.turnFrameShown;
+  turn.peekingStill = g.core.peeking === null ? null : g.core.path(g.core.peeking);
+  if (params.has("shots")) {
+    await fetch(`/shot?name=${encodeURIComponent(`${params.get("label") ?? "web"}-gallery-peek-turn-6`)}`);
+    await sleep(1500);
+  }
+  out.peekTurn = turn;
+  g.view.key(6); // Esc closes Peek
+  // A switch from Plates to Sheet, which shows more: its transition and tracks, and the animations
+  // playing. Parts in both fly; those new to Sheet fade in.
+  g.setView(0);
+  await sleep(700);
+  const selected = g.core.selected;
+  g.setView(1);
+  const t = g.core.transition, tracks = g.core.tracks;
+  const playing = document.getAnimations().map((a) => a.effect?.getTiming?.()).filter(Boolean);
+  out.switch = {
+    transition: { kind: t.kind, duration: t.duration, fadeOut: t.fadeOut },
+    fly: tracks.filter((k) => k.kind === 0).length, fadeIn: tracks.filter((k) => k.kind === 1).length,
+    flyTiming: [...new Set(tracks.filter((k) => k.kind === 0).map((k) => `${k.delay}+${k.duration}`))],
+    fadeTiming: [...new Set(tracks.filter((k) => k.kind === 1).map((k) => `${Math.round(k.delay)}+${Math.round(k.duration)}`))],
+    animations: playing.length,
+    animationTimings: [...new Set(playing.map((p) => `${Math.round(p.delay)}+${Math.round(p.duration)}`))],
+    selectionKept: g.core.selected === selected && selected !== null,
+  };
+  await sleep(700);
+  // Into a folder from its plate, and back out.
+  await g.show(root, "");
+  g.setView(0);
+  await sleep(600);
+  await settle();
+  const plate = g.core.items.find((i) => i.targetKind === 1);
+  if (plate) {
+    g.view.act(g.core.click(1, plate.target, false));
+    const into = g.core.transition;
+    const zoom = document.getAnimations().map((a) => a.effect?.getTiming?.()).filter(Boolean);
+    await sleep(600);
+    g.view.key(6); // Esc: up again
+    const back = g.core.transition;
+    out.zoom = { into: { kind: into.kind, duration: into.duration, rect: into.rect.map(Math.round) },
+                 out: { kind: back.kind, duration: back.duration, rect: back.rect.map(Math.round) },
+                 animations: zoom.length, animationTimings: [...new Set(zoom.map((p) => `${Math.round(p.delay)}+${Math.round(p.duration)}`))] };
+    await sleep(600);
+  }
+  return out;
+}
+
 // Waits for an imported file's scene, zooms in on the middle of the view, and reports how many
 // triangles refinement brought, and how long after the view settled they were all in.
 async function runRefineTest() {