geometryview 0.1.2 → 0.3.0

package/web/kept.js

@@ -0,0 +1,263 @@
+// What this browser keeps of its imports, in the origin-private file system under library2/: each
+// file's cache file, its note, its pictures, and, for a STEP file that cannot be read again from
+// a connected folder, its source, for refining. Each is named by a key, a hash of where the file
+// came from, its path there, its size, its time and the cache version: two files of one name in
+// two folders never meet, and a changed file is a new key.
+//
+//   library2/blobs/<key>.geoblob     the cache file
+//   library2/sources/<key>.source    a STEP file's source, when it cannot be had again
+//   library2/thumbs/<key>.<T>.png    its pictures, one per drawing spec T, each with a .json note
+//   library2/notes/<key>.json        the note, written last: an entry without one is unfinished
+//
+// What is kept is evicted least recently used first, to a budget from the browser's storage
+// estimate. The first library/ folder, named by bare file names, is still read until its files are
+// imported again.
+
+export const kRoot = "library2";
+const kNote = "notes", kBlobs = "blobs", kSources = "sources", kThumbs = "thumbs";
+
+/**
+ * The key of a file: the first 128 bits of SHA-256 over where it came from (a connected folder's
+ * name, or "file" for one opened on its own), its path there, its size, its modification time and
+ * the cache version, as 32 hex digits.
+ */
+export async function keyOf({ source, path, size, modified, version }) {
+  const text = JSON.stringify([String(source), String(path), Number(size), Number(modified), Number(version)]);
+  const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(text)));
+  return [...digest.subarray(0, 16)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+/** The share of the browser's quota each kind of entry may take. */
+export const kBlobShare = 0.5;
+export const kPictureShare = 0.02;
+
+/**
+ * Which entries to delete so that what is kept fits `budget` bytes: the least recently used first,
+ * never those in `keep`. Notes are { key, bytes, usedAt }.
+ */
+export function evictions(notes, budget, keep = new Set()) {
+  let total = notes.reduce((sum, note) => sum + (note.bytes ?? 0), 0);
+  const dropped = [];
+  for (const note of [...notes].sort((a, b) => (a.usedAt ?? 0) - (b.usedAt ?? 0))) {
+    if (total <= budget) break;
+    if (keep.has(note.key)) continue;
+    dropped.push(note.key);
+    total -= note.bytes ?? 0;
+  }
+  return dropped;
+}
+
+// ---- The origin-private file system ------------------------------------------------------------
+
+async function folder(name) {
+  const root = await (await navigator.storage.getDirectory()).getDirectoryHandle(kRoot, { create: true });
+  return root.getDirectoryHandle(name, { create: true });
+}
+
+async function readText(directory, name) {
+  return (await (await directory.getFileHandle(name)).getFile()).text();
+}
+
+// Written whole through a writable stream, which replaces the file only when closed.
+async function writeText(directory, name, text) {
+  const writable = await (await directory.getFileHandle(name, { create: true })).createWritable();
+  await writable.write(text);
+  await writable.close();
+}
+
+/** A cache file's version, from its header: 8 bytes of magic, then a little-endian u32. */
+export async function versionOf(blob) {
+  const header = new DataView(await blob.slice(0, 12).arrayBuffer());
+  return header.byteLength >= 12 ? header.getUint32(8, true) : -1;
+}
+
+/** An entry's note, or null if it is not kept whole. */
+export async function noteOf(key) {
+  try {
+    return JSON.parse(await readText(await folder(kNote), `${key}.json`));
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The kept import of `key`: { blob, note }, or null if there is none, it is unfinished, or its
+ * cache file is in another version than `version`. Marks it used.
+ */
+export async function keptImport(key, version = null) {
+  const note = await noteOf(key);
+  if (!note) return null;
+  try {
+    const blob = await (await (await folder(kBlobs)).getFileHandle(`${key}.geoblob`)).getFile();
+    if (version !== null && (await versionOf(blob)) !== version) return null;
+    await touch(key, note);
+    return { blob, note };
+  } catch {
+    return null;
+  }
+}
+
+/** The STEP source kept for `key`, or null if none was kept whole. */
+export async function keptSource(key) {
+  const note = await noteOf(key);
+  if (!note?.sourceBytes) return null;
+  try {
+    const source = await (await (await folder(kSources)).getFileHandle(`${key}.source`)).getFile();
+    return source.size === note.sourceBytes ? source : null;
+  } catch {
+    return null;
+  }
+}
+
+/** Marks an entry as just used, so eviction keeps it longest. */
+export async function touch(key, note = null) {
+  note ??= await noteOf(key);
+  if (!note) return;
+  note.usedAt = Date.now();
+  await writeText(await folder(kNote), `${key}.json`, JSON.stringify(note)).catch(() => {});
+}
+
+/** Deletes everything kept for `key`: its note first, so a reader never sees half an entry. */
+export async function forget(key) {
+  try {
+    await (await folder(kNote)).removeEntry(`${key}.json`).catch(() => {});
+    await (await folder(kBlobs)).removeEntry(`${key}.geoblob`).catch(() => {});
+    await (await folder(kSources)).removeEntry(`${key}.source`).catch(() => {});
+    const thumbs = await folder(kThumbs);
+    for await (const name of thumbs.keys()) {
+      if (name.startsWith(`${key}.`)) await thumbs.removeEntry(name).catch(() => {});
+    }
+  } catch {
+    // No origin-private file system here: nothing is kept.
+  }
+}
+
+/** Deletes everything kept of files named `name`, wherever they came from: for checks. */
+export async function forgetNamed(name) {
+  for (const note of await notes()) if (note.name === name) await forget(note.key);
+}
+
+/** Every finished entry's note. */
+export async function notes() {
+  const found = [];
+  try {
+    const directory = await folder(kNote);
+    for await (const [name, handle] of directory.entries()) {
+      if (handle.kind !== "file" || !name.endsWith(".json")) continue;
+      try {
+        found.push(JSON.parse(await (await handle.getFile()).text()));
+      } catch {
+        // Being written: not finished.
+      }
+    }
+  } catch {
+    // Nothing kept here.
+  }
+  return found;
+}
+
+/** The bytes kept imports may hold: a share of the browser's quota. */
+export async function blobBudget() {
+  const { quota = 0 } = (await navigator.storage?.estimate?.().catch(() => null)) ?? {};
+  return quota > 0 ? quota * kBlobShare : 2 * 1024 ** 3;
+}
+
+/** Evicts kept imports to the budget, sparing `keep` (keys open or in view). Returns the keys dropped. */
+export async function evict(keep = new Set(), budget = null) {
+  budget ??= await blobBudget();
+  const dropped = evictions(await notes(), budget, keep);
+  for (const key of dropped) await forget(key);
+  return dropped;
+}
+
+let persisted = false;
+/** Asks once that what is kept not be cleared under storage pressure: once a folder is connected. */
+export function persistOnce() {
+  if (persisted) return;
+  persisted = true;
+  navigator.storage?.persist?.().catch(() => {});
+}
+
+// ---- Writing, from a worker --------------------------------------------------------------------
+
+async function writeWhole(directory, name, bytes) {
+  const access = await (await directory.getFileHandle(name, { create: true })).createSyncAccessHandle();
+  access.truncate(0);
+  for (let at = 0; at < bytes.length;) at += access.write(bytes.subarray(at), { at });
+  access.flush();
+  access.close();
+}
+
+/**
+ * Keeps an import, from a worker, where sync access handles write a cache file without holding a
+ * second copy: the cache file, then the note, last, which makes it whole.
+ */
+export async function keepImport(key, bytes, note) {
+  await writeWhole(await folder(kBlobs), `${key}.geoblob`, bytes);
+  const whole = { ...note, key, bytes: bytes.length, sourceBytes: 0, usedAt: Date.now() };
+  await writeWhole(await folder(kNote), `${key}.json`, new TextEncoder().encode(JSON.stringify(whole)));
+  return whole;
+}
+
+/**
+ * Keeps a STEP file's source beside its kept import, from a worker, read in pieces, once the import
+ * is done, since nothing waits for it; then notes it, so a copy cut short is never read.
+ */
+export async function keepSource(key, file) {
+  const access = await (await (await folder(kSources)).getFileHandle(`${key}.source`, { create: true }))
+    .createSyncAccessHandle();
+  access.truncate(0);
+  for (let at = 0; at < file.size; at += kSourcePiece) {
+    const piece = new Uint8Array(await file.slice(at, at + kSourcePiece).arrayBuffer());
+    for (let done = 0; done < piece.length;) done += access.write(piece.subarray(done), { at: at + done });
+  }
+  access.flush();
+  access.close();
+  const note = await noteOf(key);
+  if (!note) return;
+  note.sourceBytes = file.size;
+  note.bytes += file.size;
+  await writeWhole(await folder(kNote), `${key}.json`, new TextEncoder().encode(JSON.stringify(note)));
+}
+const kSourcePiece = 8 << 20;
+
+// ---- Pictures and facts --------------------------------------------------------------------------
+
+/** The key of a picture of a file: a hash of how it is drawn and the engine's version. */
+export async function pictureKeyOf({ style, colorMode, pixels, pixelsPerPoint, lineScale, folderColor, version,
+                                     supersample = 1 }) {
+  // Supersampled: another picture, smoother; one drawn plainly keeps its key.
+  const fields = [style, colorMode, pixels, pixelsPerPoint, lineScale, folderColor, version];
+  const text = JSON.stringify(supersample > 1 ? [...fields, `ss${supersample}`] : fields);
+  const digest = new Uint8Array(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(text)));
+  return [...digest.subarray(0, 8)].map((byte) => byte.toString(16).padStart(2, "0")).join("");
+}
+
+/** A file's facts and its picture kept under `key`: { facts, png, note } or null for each missing. */
+export async function keptPicture(key, picture) {
+  try {
+    const thumbs = await folder(kThumbs);
+    const facts = JSON.parse(await readText(thumbs, `${key}.facts.json`));
+    let png = null, note = null;
+    try {
+      note = JSON.parse(await readText(thumbs, `${key}.${picture}.json`));
+      png = await (await thumbs.getFileHandle(`${key}.${picture}.png`)).getFile();
+    } catch {
+      // Drawn in another style, or not at all.
+    }
+    return { facts, png, note };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Keeps a picture, its note and the file's facts, from a worker: the PNG, then the facts, then the
+ * note, last, which marks the picture whole.
+ */
+export async function keepPicture(key, picture, png, note, facts) {
+  const thumbs = await folder(kThumbs);
+  await writeWhole(thumbs, `${key}.${picture}.png`, new Uint8Array(await png.arrayBuffer()));
+  if (facts) await writeWhole(thumbs, `${key}.facts.json`, new TextEncoder().encode(JSON.stringify(facts)));
+  await writeWhole(thumbs, `${key}.${picture}.json`, new TextEncoder().encode(JSON.stringify(note)));
+}

package/web/library-store.js

@@ -8,8 +8,11 @@
 //           for this visit only.
 //
 // Nothing is read until it is shown: a folder is listed when it is opened, by names alone, and a
-// file is read when it is opened. The recent files are kept in IndexedDB everywhere.
+// file is read when it is opened. A gallery walks a folder with walk(), which yields its folders
+// and STEP and STL files, by names first wherever the browser allows. The recent files are kept in
+// IndexedDB everywhere.
 
+import { keptImport } from "./kept.js";
 import { keptFile } from "./library.js";
 import { remember as rememberIn } from "./library-rows.js";
 
@@ -42,6 +45,10 @@ const all = (name) => store(name, "readonly", (s) => s.getAll()).catch(() => [])
 const put = (name, value) => store(name, "readwrite", (s) => s.put(value)).catch(() => {});
 const remove = (name, key) => store(name, "readwrite", (s) => s.delete(key)).catch(() => {});
 
+// What a gallery shows, and how far a walk goes, as on the Mac (Engine/library/scan.h).
+export const isModelName = (name) => /\.(step|stp|stl)$/i.test(name);
+export const kWalkLimits = { depth: 32, files: 20000 };
+
 const kModelTypes = [{ description: "STEP, STL or cache files",
                        accept: { "application/octet-stream": [".step", ".stp", ".stl", ".geoblob"] } }];
 
@@ -120,6 +127,28 @@ class AccessFolders {
     return (await this.#directory(id, parts.join("/"))).getFileHandle(name);
   }
 
+  // A gallery's walk, by names alone: { path, kind, handle } for each folder and STEP or STL file.
+  // A file's size and time come from handle.getFile(), asked for when its tile is in view.
+  async *walk(id, path = "", { depth = kWalkLimits.depth, files = kWalkLimits.files } = {}) {
+    const start = await this.#directory(id, path);
+    const pending = [[start, path, 0]];
+    let found = 0;
+    while (pending.length > 0) {
+      const [directory, at, level] = pending.shift();
+      for await (const [name, handle] of directory.entries()) {
+        if (name.startsWith(".")) continue;
+        const inner = at ? `${at}/${name}` : name;
+        if (handle.kind === "directory") {
+          yield { path: inner, kind: "folder", handle };
+          if (level + 1 < depth) pending.push([handle, inner, level + 1]);
+        } else if (isModelName(name)) {
+          if (found++ === files) return;
+          yield { path: inner, kind: "file", handle };
+        }
+      }
+    }
+  }
+
   async file(id, path) {
     return (await this.fileHandle(id, path)).getFile();
   }
@@ -172,6 +201,21 @@ class VisitFolders {
     return this.#add({ name, files });
   }
 
+  // A folder served elsewhere, for checks: its listing [{ path, folder, bytes, modified }], each
+  // file read from `base` + its path only when asked for.
+  adoptRemote(name, listing, base) {
+    const files = new Map();
+    for (const entry of listing) {
+      if (entry.folder) continue;
+      files.set(entry.path, async () => {
+        const response = await fetch(base + entry.path.split("/").map(encodeURIComponent).join("/"));
+        if (!response.ok) throw new Error(`${entry.path} could not be read.`);
+        return new File([await response.blob()], entry.path.split("/").pop(), { lastModified: entry.modified });
+      });
+    }
+    return this.#add({ name, files, listing });
+  }
+
   #add(folder) {
     const id = crypto.randomUUID();
     this.#folders.push({ id, ...folder });
@@ -218,7 +262,10 @@ class VisitFolders {
   async file(id, path) {
     const folder = this.#folders.find((f) => f.id === id);
     if (!folder) throw new Error("That folder is no longer connected.");
-    if (folder.files) return folder.files.get(path);
+    if (folder.files) {
+      const file = folder.files.get(path);
+      return typeof file === "function" ? file() : file;
+    }
     const parts = path.split("/");
     const name = parts.pop();
     const directory = await this.#entry(folder.entry, parts.join("/"));
@@ -227,6 +274,57 @@ class VisitFolders {
   }
 
   pickFiles() { return Promise.resolve(undefined); } // the page's own file input instead
+
+  // A gallery's walk: { path, kind, file? }, files with their File where the folder came whole.
+  async *walk(id, path = "", { depth = kWalkLimits.depth, files = kWalkLimits.files } = {}) {
+    const folder = this.#folders.find((f) => f.id === id);
+    if (!folder) throw new Error("That folder is no longer connected.");
+    let found = 0;
+    if (folder.listing) {
+      const prefix = path ? `${path}/` : "";
+      for (const entry of folder.listing) {
+        if (!entry.path.startsWith(prefix)) continue;
+        if (!entry.folder && found++ === files) return;
+        yield { path: entry.path, kind: entry.folder ? "folder" : "file", bytes: entry.bytes, modified: entry.modified };
+      }
+      return;
+    }
+    if (folder.files) {
+      const prefix = path ? `${path}/` : "";
+      const folders = new Set();
+      for (const [inner, file] of folder.files) {
+        if (!inner.startsWith(prefix)) continue;
+        const parts = inner.slice(prefix.length).split("/");
+        if (parts.some((part) => part.startsWith(".")) || parts.length > depth) continue;
+        for (let i = 1; i < parts.length; i++) {
+          const dir = prefix + parts.slice(0, i).join("/");
+          if (!folders.has(dir)) {
+            folders.add(dir);
+            yield { path: dir, kind: "folder" };
+          }
+        }
+        if (!isModelName(inner)) continue;
+        if (found++ === files) return;
+        yield { path: inner, kind: "file", file };
+      }
+      return;
+    }
+    const pending = [[path, 0]];
+    while (pending.length > 0) {
+      const [at, level] = pending.shift();
+      for (const entry of await this.list(id, at)) {
+        if (entry.name.startsWith(".")) continue;
+        const inner = at ? `${at}/${entry.name}` : entry.name;
+        if (entry.kind === "folder") {
+          yield { path: inner, kind: "folder" };
+          if (level + 1 < depth) pending.push([inner, level + 1]);
+        } else if (isModelName(entry.name)) {
+          if (found++ === files) return;
+          yield { path: inner, kind: "file" };
+        }
+      }
+    }
+  }
 }
 
 // ---- The iPhone shell ------------------------------------------------------------------------
@@ -262,6 +360,20 @@ class ShellFolders {
     return this.#fetchFile(`/open/${id}/${encodePath(path)}`, path.split("/").pop());
   }
 
+  // A gallery's walk, from the shell's /scan, which walks the folder natively: { path, kind, bytes,
+  // modified, cloud }, a file that lives only in iCloud marked cloud.
+  async *walk(id, path = "", { depth = kWalkLimits.depth, files = kWalkLimits.files } = {}) {
+    const response = await fetch(`/scan/${id}/${encodePath(path)}?depth=${depth}&limit=${files}`);
+    if (!response.ok) throw new Error("This folder could not be read.");
+    const prefix = path ? `${path}/` : "";
+    for (const line of (await response.text()).split("\n")) {
+      if (!line) continue;
+      const entry = JSON.parse(line);
+      if (entry.done) return;
+      yield { ...entry, path: prefix + entry.path };
+    }
+  }
+
   async #fetchFile(url, name) {
     const response = await fetch(url);
     if (!response.ok) throw new Error(`${name} could not be read.`);
@@ -357,7 +469,8 @@ export class LibraryStore {
     }
     const permission = await entry.handle?.queryPermission?.({ mode: "read" }).catch(() => "denied");
     if (permission === "granted") return { file: await entry.handle.getFile() };
-    const cache = await keptFile(entry.name).catch(() => null);
+    const cache = (entry.cacheKey ? (await keptImport(entry.cacheKey))?.blob : null) ??
+                  await keptFile(entry.name).catch(() => null);
     if (cache) return { cache };
     if (entry.handle && (await entry.handle.requestPermission({ mode: "read" }).catch(() => "denied")) === "granted") {
       return { file: await entry.handle.getFile() };

package/web/library.js

@@ -108,7 +108,12 @@ export class LibraryCard {
   #recent = [];
   #open = new Set();
 
-  // `on` takes: open({ root, path, name }, add), reopen(entry, add), choose(), connect(), switch(show)
+  // `on` takes: open({ root, path, name }, add), reopen(entry, add), choose(), connect(), switch(show),
+  // showFolder(root, path), search(query) while the gallery shows
+  #search;
+  #searchBox;
+  #found;
+
   constructor(store, on) {
     this.#store = store;
     this.#on = on;
@@ -124,12 +129,29 @@ export class LibraryCard {
     connect.hidden = !store.canConnect;
     this.#list = new VirtualList({ role: "tree", rowHeight, count: () => this.#rows.length,
                                    row: (index) => this.#row(this.#rows[index]) });
+    // While the gallery shows: search the folder in view. Typing in the gallery searches too.
+    this.#search = el("input.search", { type: "search", placeholder: "Search this folder",
+                                        "aria-label": "Search this folder" });
+    this.#search.addEventListener("input", () => on.search?.(this.#search.value));
+    this.#found = el("span.match");
+    this.#searchBox = el("label.searchbox", { hidden: true },
+                         [el("span.glyph", { html: icons.search(14) }), this.#search, this.#found]);
     this.element = el("section.card.structure.library", { hidden: true, "aria-label": "Library" }, [
       el("div.header", {}, [this.switcher.element, el("span.grow"), add, connect]),
+      this.#searchBox,
       this.#list.element,
     ]);
   }
 
+  /** Shows the gallery's search, with its query and how many files it found (null: no search). */
+  showSearch(shown, query = "", found = null) {
+    this.#searchBox.hidden = !shown;
+    if (this.#search.value !== query) this.#search.value = query;
+    this.#found.textContent = found === null ? "" : `${found} found`;
+  }
+
+  get searchInput() { return this.#search; }
+
   // Reads the folders and recent files again; `kept` are the imports this browser kept, which
   // fill Recent on a first visit.
   async refresh(kept) {
@@ -212,6 +234,8 @@ export class LibraryCard {
       this.#expanded.add(row.key);
       await this.#readListing(row.root, row.path);
     }
+    // A folder's gallery shows beside the card.
+    this.#on.showFolder?.({ id: row.root, name: this.folderName(row.root) }, row.path);
   }
 
   async #disconnect(row) {

package/web/pdf.js

@@ -0,0 +1,54 @@
+// A PDF of pictures: each page one JPEG, at its size in points. No fonts and no dependencies: the
+// gallery's posters and its catalogue, drawn as they show, for the browser to save. (The Mac's are
+// drawn from its layers, their text and lines kept as text and lines.)
+
+/**
+ * @param {{ jpeg: Uint8Array, width: number, height: number, points: [number, number] }[]} pages
+ *   each page's JPEG, its size in pixels, and the page's size in points
+ * @returns {Blob}
+ */
+export function pdfOfJpegs(pages) {
+  const encoder = new TextEncoder();
+  const chunks = [];
+  const offsets = [];
+  let length = 0;
+  const push = (data) => {
+    const bytes = typeof data === "string" ? encoder.encode(data) : data;
+    chunks.push(bytes);
+    length += bytes.length;
+  };
+  const object = (n, body) => {
+    offsets[n] = length;
+    push(`${n} 0 obj\n`);
+    body();
+    push("\nendobj\n");
+  };
+  const number = (v) => (Math.round(v * 100) / 100).toString();
+  // The header, and a comment of high bytes so tools take the file as binary.
+  push("%PDF-1.4\n");
+  push(new Uint8Array([0x25, 0xe2, 0xe3, 0xcf, 0xd3, 0x0a]));
+  // 1 the catalogue, 2 the page tree, then for each page: the page, its content, its picture.
+  const count = 3 + pages.length * 3;
+  object(1, () => push("<< /Type /Catalog /Pages 2 0 R >>"));
+  object(2, () => push(`<< /Type /Pages /Kids [${pages.map((_, i) => `${3 + i * 3} 0 R`).join(" ")}] /Count ${pages.length} >>`));
+  pages.forEach((p, i) => {
+    const page = 3 + i * 3, content = page + 1, picture = page + 2;
+    const [w, h] = p.points.map(number);
+    object(page, () => push(`<< /Type /Page /Parent 2 0 R /MediaBox [0 0 ${w} ${h}] ` +
+                            `/Resources << /XObject << /P ${picture} 0 R >> >> /Contents ${content} 0 R >>`));
+    const draw = `q ${w} 0 0 ${h} 0 0 cm /P Do Q`;
+    object(content, () => push(`<< /Length ${draw.length} >>\nstream\n${draw}\nendstream`));
+    object(picture, () => {
+      push(`<< /Type /XObject /Subtype /Image /Width ${p.width} /Height ${p.height} /ColorSpace /DeviceRGB ` +
+           `/BitsPerComponent 8 /Filter /DCTDecode /Length ${p.jpeg.length} >>\nstream\n`);
+      push(p.jpeg);
+      push("\nendstream");
+    });
+  });
+  // The cross-reference table: each entry exactly 20 bytes.
+  const table = length;
+  push(`xref\n0 ${count}\n0000000000 65535 f \n`);
+  for (let n = 1; n < count; n++) push(`${String(offsets[n]).padStart(10, "0")} 00000 n \n`);
+  push(`trailer\n<< /Size ${count} /Root 1 0 R >>\nstartxref\n${table}\n%%EOF\n`);
+  return new Blob(chunks, { type: "application/pdf" });
+}

package/web/thumbs-worker.js

@@ -0,0 +1,86 @@
+// The gallery's picture worker: the engine's WebGPU renderer with a GPU device of its own
+// (geometryview-thumbs-web, Engine/browser/web_thumbs.cpp), drawing cache files one at a time as
+// the Mac's thumbnailer does, so pictures never hold up the page's own frames.
+//
+// Messages in:  { type: "draw", id, blob, pixels, style, colorMode, pixelsPerPoint, lineScale,
+//                 firstColor, folderColor, keep }, blob a cache file as a Blob or ArrayBuffer.
+//                 A file of one part takes `folderColor`, if given. With keep { key, picture },
+//                 the picture, its note and the file's facts are kept in the origin-private file
+//                 system (kept.js), written here since only a worker can write there everywhere.
+//               { type: "trim" }, between pictures: lets go of the last file drawn
+// Messages out: { type: "ready" } or { type: "failed", message }, once
+//               { type: "drawn", id, bitmap, png, width, height, worldPerPixel, partRect, inkRect,
+//                 facts, firstColor, heapMB }, the bitmap to show at once and the PNG to keep; or
+//               { type: "drawn", id, message } if it could not be drawn
+//
+// Its memory never shrinks, so the page replaces it once heapMB passes a limit.
+
+import createThumbs from "./build/geometryview-thumbs-web.mjs";
+import { keepPicture } from "./kept.js";
+
+let module = null;
+let answer = null; // the draw waiting for thumbsHost.drawn
+
+const host = {
+  ready() {
+    self.postMessage({ type: "ready" });
+  },
+  failed(message) {
+    self.postMessage({ type: "failed", message });
+  },
+  drawn(pixels, width, height, worldPerPixel, rects, message) {
+    const resolve = answer;
+    answer = null;
+    resolve?.({ pixels, width, height, worldPerPixel, rects, message });
+  },
+};
+
+async function draw(data) {
+  const bytes = new Uint8Array(data.blob instanceof Blob ? await data.blob.arrayBuffer() : data.blob);
+  // Each call may grow the heap, which detaches views made before it: read them after.
+  const staging = module._thumbs_staging(bytes.length);
+  module.HEAPU8.set(bytes, staging);
+  // Its facts first: drawing lets go of the staged file.
+  const factsText = module.UTF8ToString(module._thumbs_facts());
+  const facts = factsText ? JSON.parse(factsText) : null;
+  const firstColor = data.folderColor >= 0 && facts?.parts === 1 ? data.folderColor : data.firstColor ?? -1;
+  const drawn = await new Promise((resolve) => {
+    answer = resolve;
+    module._thumbs_draw(data.pixels, data.style, data.colorMode, data.pixelsPerPoint ?? 2,
+                        data.lineScale ?? 0.5, firstColor, data.turn ?? 0, data.worldPerPixel ?? 0,
+                        data.supersample ?? 1);
+  });
+  const heapMB = Math.round(module._thumbs_heap_bytes() / 2 ** 20);
+  if (!drawn.pixels) {
+    self.postMessage({ type: "drawn", id: data.id, message: drawn.message || "This picture could not be drawn.", heapMB });
+    return;
+  }
+  const { width, height } = drawn;
+  const canvas = new OffscreenCanvas(width, height);
+  canvas.getContext("2d").putImageData(new ImageData(new Uint8ClampedArray(drawn.pixels.buffer), width, height), 0, 0);
+  const png = await canvas.convertToBlob({ type: "image/png" });
+  const bitmap = canvas.transferToImageBitmap();
+  const note = { width, height, mmPerPixel: drawn.worldPerPixel, part: drawn.rects.slice(0, 4),
+                 ink: drawn.rects.slice(4, 8), firstColor };
+  if (data.keep) await keepPicture(data.keep.key, data.keep.picture, png, note, facts).catch(() => {});
+  self.postMessage({ type: "drawn", id: data.id, bitmap, png, width, height, worldPerPixel: drawn.worldPerPixel,
+                     partRect: note.part, inkRect: note.ink, facts, firstColor, heapMB }, [bitmap]);
+}
+
+// One message at a time, in order, so a draw never starts while another waits for the GPU.
+let queue = Promise.resolve();
+self.onmessage = ({ data }) => {
+  queue = queue.then(async () => {
+    try {
+      if (data.type === "draw") await draw(data);
+      else if (data.type === "trim") module?._thumbs_trim();
+    } catch (error) {
+      if (data.type === "draw") self.postMessage({ type: "drawn", id: data.id, message: String(error.message ?? error) });
+    }
+  });
+};
+
+createThumbs({ thumbsHost: host }).then((created) => {
+  module = created;
+  module._thumbs_start();
+}, (error) => host.failed(String(error.message ?? error)));