geometryview 0.0.0-stage → 0.1.1

package/web/import-worker.js

@@ -0,0 +1,329 @@
+// Imports STEP and STL files off the page's thread, into cache files kept in the library.
+//
+// Each import gets a fresh supervisor (the portable StepImport as WebAssembly), whose memory goes
+// with it, since WebAssembly memory never shrinks. STEP slices go to a warm pool of OCCT workers
+// that outlives imports: a worker that traps, runs out of memory, takes too long or grows past
+// kRecycleMB is replaced, as in P2. The finished cache file is written to the origin-private file
+// system, where the page opens it, streamed, like any other.
+//
+// An STL file needs no OCCT. Where the page is cross-origin isolated its packer runs on threads,
+// in a worker of its own that the page ends afterwards, since a threaded module's memory is kept
+// by its threads until they end.
+//
+// A STEP file's source is kept beside its cache, so its definitions can be imported again, finer,
+// when the view comes close: a refinement, whose segments the page adds to the open document.
+//
+// Messages in:  { type: "import", file, kind: "step" | "stl", name, workers, threads, progressive }
+//               { type: "refine", file, level, definitions, workers }
+// Messages out: { type: "progress", done, total } and, if progressive or refining,
+//               { type: "segment", bytes } as each is written; then { type: "done", ... } or
+//               { type: "failed", message }
+
+import createStepImporter from "./occt/geometryview-step-web.mjs";
+
+// Some browsers refuse a worker that starts another worker by URL. Claude Desktop's built-in
+// browser is one: the nested worker fails at once, with no message and no request sent. A module
+// worker made from a blob whose one line imports the script starts there too. The script is
+// fetched exactly as before, and inside it import.meta.url is still its own.
+//
+// The OCCT pool starts its workers by URL, and by blob once one fails before its first message,
+// which costs nothing where URLs work. The threaded packer starts its own threads, which can't be
+// retried, so every other worker made here starts by blob: for those threads that measured the
+// same as by URL. Pages on the iPhone shell's geo:// scheme keep plain URLs, which a blob can't
+// import from.
+const kWorkerByUrl = self.Worker;
+const kBlobsWork = location.protocol === "http:" || location.protocol === "https:";
+const blobWrappers = new Map();
+
+function blobWrapper(href) {
+  let url = blobWrappers.get(href);
+  if (url === undefined) {
+    url = URL.createObjectURL(new Blob([`import ${JSON.stringify(href)};\n`], { type: "text/javascript" }));
+    blobWrappers.set(href, url); // kept: workers start from it again
+  }
+  return url;
+}
+
+function startWorker(url, options, byBlob) {
+  const href = new URL(url, import.meta.url).href;
+  return byBlob ? new kWorkerByUrl(blobWrapper(href), { ...options, type: "module" })
+                : new kWorkerByUrl(href, options);
+}
+
+if (kBlobsWork) {
+  self.Worker = class extends kWorkerByUrl {
+    constructor(url, options = {}) {
+      super(blobWrapper(new URL(url, import.meta.url).href), { ...options, type: "module" });
+    }
+  };
+}
+
+async function supervisor(threads) {
+  if (!threads) return createStepImporter();
+  const { default: create } = await import("./occt-threads/geometryview-step-web.mjs");
+  return create();
+}
+
+const kRecycleMB = 256;
+const kOutOfMemory = 2; // worker::ReplyStatus::OutOfMemory
+const kTimeoutMs = 120_000;
+
+let occtModule = null;
+const pool = [];
+
+let poolByBlob = false;
+
+function spawn() {
+  return new Promise((resolve, reject) => {
+    const byBlob = poolByBlob;
+    const worker = startWorker("./occt-worker.js", { type: "module" }, byBlob);
+    worker.onmessage = ({ data }) => {
+      if (data.ready) {
+        resolve({ worker, heapMB: 0, job: null, timer: 0 });
+      } else {
+        worker.terminate();
+        reject(new Error(`An OCCT worker failed to start: ${data.error}`));
+      }
+    };
+    worker.onerror = (event) => {
+      worker.terminate();
+      if (!byBlob && kBlobsWork) {
+        poolByBlob = true; // this browser won't start a worker from a worker by URL
+        spawn().then(resolve, reject);
+      } else {
+        reject(new Error(event.message ?? "An OCCT worker failed to start."));
+      }
+    };
+    worker.postMessage({ module: occtModule });
+  });
+}
+
+async function warm(size) {
+  occtModule ??= await WebAssembly.compileStreaming(fetch(new URL("./occt/geometryview-occt-web.wasm", import.meta.url)));
+  // All at once: each instantiates OCCT on its own thread.
+  const missing = size - pool.length;
+  if (missing > 0) pool.push(...await Promise.all(Array.from({ length: missing }, spawn)));
+}
+
+// Posts each segment the importer has written since the last call, so the page shows the model
+// while it imports.
+function postSegments(step) {
+  const place = step._malloc(16);
+  while (step._step_take_segment(place)) {
+    const [offset, size] = new Float64Array(step.HEAPF64.buffer, place, 2);
+    const pointer = step._step_read(offset, size);
+    if (pointer === 0) break;
+    const bytes = step.HEAPU8.slice(pointer, pointer + size);
+    self.postMessage({ type: "segment", bytes }, [bytes.buffer]);
+  }
+  step._free(place);
+}
+
+// Hands the supervisor's slices to the pool until every one is answered.
+function mesh(step, slots, progressive) {
+  const total = step._step_jobs();
+  let replies = 0;
+  const replacing = new Set();
+  return new Promise((resolve, reject) => {
+    const idle = [...slots];
+    let busy = 0;
+    let closed = false;
+
+    const pump = () => {
+      while (!closed && idle.length > 0) {
+        const id = step._step_next();
+        if (id === -2) {
+          if (busy === 0) {
+            closed = true;
+            Promise.all(replacing).then(() => resolve(replies));
+          }
+          return;
+        }
+        if (id === -1) {
+          if (busy === 0) reject(new Error("The import stalled with slices unanswered."));
+          return;
+        }
+        const text = step.HEAPU8.slice(step._step_text(), step._step_text() + step._step_text_size());
+        const [linear, angular, minSize] = new Float64Array(step.HEAPF64.buffer, step._step_request(), 3);
+        const slot = idle.pop();
+        slot.job = id;
+        busy += 1;
+        slot.worker.onmessage = (event) => answered(slot, event.data);
+        slot.worker.onerror = (event) => answered(slot, { crashed: true, error: event.message });
+        slot.timer = setTimeout(() => answered(slot, { crashed: true, error: "timed out" }), kTimeoutMs);
+        slot.worker.postMessage({ id, text: text.buffer, linear, angular, minSize }, [text.buffer]);
+      }
+    };
+
+    // Its memory may be corrupt, or full and never to shrink: a fresh worker takes its place.
+    const replace = (slot) => {
+      slot.worker.terminate();
+      const replaced = spawn().then((fresh) => Object.assign(slot, fresh));
+      replacing.add(replaced);
+      return replaced.finally(() => replacing.delete(replaced));
+    };
+
+    const answered = async (slot, answer) => {
+      if (slot.job === null) return;
+      clearTimeout(slot.timer);
+      const id = slot.job;
+      slot.job = null;
+      busy -= 1;
+      try {
+        if (answer.crashed) {
+          step._step_crash(id);
+          pump();
+          await replace(slot);
+        } else {
+          // Each call may grow the heap, which detaches views made before it: read them after.
+          const payload = new Uint8Array(answer.payload);
+          const pointer = step._step_payload(payload.length);
+          step.HEAPU8.set(payload, pointer);
+          step._step_reply(id, answer.status, answer.faces, answer.unmapped, answer.unmeshed,
+                           answer.read, answer.transfer, answer.mesh);
+          if (progressive) postSegments(step);
+          replies += 1;
+          slot.heapMB = answer.heapMB;
+          // A worker whose allocation failed is full, and its memory never shrinks.
+          if (slot.heapMB > kRecycleMB || answer.status === kOutOfMemory) await replace(slot);
+          if (replies % 8 === 0) self.postMessage({ type: "progress", done: replies, total });
+        }
+        idle.push(slot);
+        pump();
+      } catch (error) {
+        reject(error);
+      }
+    };
+    pump();
+  });
+}
+
+async function library() {
+  const root = await navigator.storage.getDirectory();
+  return root.getDirectoryHandle("library", { create: true });
+}
+
+async function openForWriting(folder, fileName) {
+  const access = await (await folder.getFileHandle(fileName, { create: true })).createSyncAccessHandle();
+  access.truncate(0);
+  return access;
+}
+
+// Writes the cache file to the library, with a note of the file it came from.
+async function keep(name, bytes, note) {
+  const folder = await library();
+  const write = async (fileName, data) => {
+    const access = await openForWriting(folder, fileName);
+    for (let at = 0; at < data.length;) at += access.write(data.subarray(at), { at });
+    access.flush();
+    access.close();
+  };
+  await write(`${name}.geoblob`, bytes);
+  await write(`${name}.json`, new TextEncoder().encode(JSON.stringify(note)));
+}
+
+// Keeps a STEP file beside its cache, read again in pieces rather than held through the import,
+// once the import is done, since nothing waits for it. The library uses it only when its size
+// matches the note's, so a copy cut short is never read.
+async function keepSource(name, file) {
+  const access = await openForWriting(await library(), `${name}.source`);
+  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 kSourcePiece = 8 << 20;
+
+// Reads `file` straight into the importer's input, a piece at a time, so it is never held whole a
+// second time on its way in: _step_open makes room for all of it, and nothing calls into the
+// importer while it fills, so the heap cannot grow and move under the copy.
+async function readInto(step, file) {
+  const pointer = step._step_open(file.size);
+  let at = pointer;
+  const reader = file.stream().getReader();
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    step.HEAPU8.set(value, at);
+    at += value.length;
+  }
+  if (at - pointer !== file.size) throw new Error(`${file.name} changed while it was read.`);
+}
+
+// Imports some of a STEP file's definitions again at a finer level, posting each segment as it is
+// written; they hold geometry only, for the page to add to the document already open.
+async function refine(data) {
+  try {
+    const step = await supervisor(false);
+    await readInto(step, data.file);
+    // Each call may grow the heap, which detaches views made before it: read them after.
+    const room = step._step_refine(data.level, data.definitions.length);
+    new Uint32Array(step.HEAPU8.buffer, room, data.definitions.length).set(data.definitions);
+    if (step._step_begin() !== 0) throw new Error(step.UTF8ToString(step._step_error()));
+    await warm(data.workers);
+    await mesh(step, pool, true);
+    if (step._step_finish() !== 0) throw new Error(step.UTF8ToString(step._step_error()));
+    postSegments(step);
+    // What it made, for the page's scripted check: a definition can mesh to nothing at all.
+    const stats = new Float64Array(step.HEAPF64.buffer, step._step_stats(), 17);
+    self.postMessage({ type: "done", triangles: stats[11], faces: stats[10], failedFaces: stats[12],
+                       crashedWorkers: stats[14], coarserFaces: stats[16] });
+  } catch (error) {
+    self.postMessage({ type: "failed", message: String(error.message ?? error) });
+  }
+}
+
+// Hands an STL file to the importer a piece at a time. False if it must be read whole instead,
+// which the importer says on seeing the first piece.
+async function readPieces(step, file) {
+  const room = step._stl_open(file.size);
+  const piece = step._stl_piece_size();
+  for (let at = 0; at < file.size; at += piece) {
+    const bytes = new Uint8Array(await file.slice(at, Math.min(file.size, at + piece)).arrayBuffer());
+    step.HEAPU8.set(bytes, room);
+    if (step._stl_take(bytes.length) === 0) return false;
+  }
+  return file.size > 0;
+}
+
+self.onmessage = async ({ data }) => {
+  if (data.type === "refine") {
+    await refine(data);
+    return;
+  }
+  if (data.type !== "import") return;
+  const started = performance.now();
+  try {
+    const step = await supervisor(data.threads && self.crossOriginIsolated);
+    // A binary STL file is read in pieces, so it is never held whole; anything else, whole.
+    const inPieces = data.kind === "stl" && await readPieces(step, data.file);
+    if (!inPieces) await readInto(step, data.file);
+    let slices = 0;
+    if (data.kind === "stl") {
+      const made = inPieces ? step._mesh_import_pieces() : step._mesh_import();
+      if (made !== 0) throw new Error(step.UTF8ToString(step._step_error()));
+    } else {
+      if (step._step_begin() !== 0) throw new Error(step.UTF8ToString(step._step_error()));
+      self.postMessage({ type: "progress", done: 0, total: step._step_jobs() });
+      if (data.progressive) postSegments(step); // the model, written by step_begin
+      await warm(data.workers);
+      slices = await mesh(step, pool, data.progressive);
+      if (step._step_finish() !== 0) throw new Error(step.UTF8ToString(step._step_error()));
+      if (data.progressive) postSegments(step);
+    }
+    const blob = step.HEAPU8.subarray(step._step_blob(), step._step_blob() + step._step_blob_size());
+    const stats = new Float64Array(step.HEAPF64.buffer, step._step_stats(), 17);
+    const result = { triangles: stats[11], faces: stats[10], failedFaces: stats[12],
+                     coarserFaces: stats[16], slices,
+                     importMs: Math.round(performance.now() - started), cacheBytes: blob.length,
+                     supervisorMB: Math.round(step.HEAPU8.length / 2 ** 20) };
+    await keep(data.name, blob, { name: data.name, size: data.file.size,
+                                  lastModified: data.file.lastModified, importedAt: Date.now(), ...result });
+    self.postMessage({ type: "done", ...result });
+    if (data.kind === "step") await keepSource(data.name, data.file).catch(() => {});
+  } catch (error) {
+    self.postMessage({ type: "failed", message: String(error.message ?? error) });
+  }
+};

package/web/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+<title>GeometryView</title>
+<link rel="manifest" href="manifest.webmanifest">
+<link rel="icon" href="icons/icon-32.png" sizes="32x32" type="image/png">
+<link rel="apple-touch-icon" href="icons/icon-180.png">
+<link rel="stylesheet" href="viewer.css">
+</head>
+<body>
+<canvas id="viewport"></canvas>
+<div id="status" class="status" hidden></div>
+<script type="module" src="viewer.js"></script>
+</body>
+</html>

package/web/input.js

@@ -0,0 +1,255 @@
+// Pointer, wheel, touch and key input on the viewport, turned into the engine's events as the Mac
+// viewport turns AppKit's: drawable pixels from the top left, the same buttons and modifiers, the
+// wheel's lines and pixels scaled as the Mac scales them, and pinches as magnification.
+
+import { Buttons, Modifiers, Pointer, Tools } from "./engine.js";
+
+// What each key does, as the Mac's default key map has it. `hold` keys pick a tool while down.
+const kKeys = {
+  h: { hold: Tools.Hide }, g: { hold: Tools.Ghost },
+  f: { command: "fit" }, p: { command: "projection" }, Escape: { command: "clear" },
+  i: { command: "isolate" }, H: { command: "showAll" }, G: { command: "unghostAll" },
+  1: { command: "faces" }, 2: { command: "bodies" }, 3: { command: "parts" },
+  s: { command: "section" }, t: { command: "seeThrough" }, "?": { command: "shortcuts" },
+};
+
+export class ViewportInput {
+  #engine;
+  #canvas;
+  #onCommand;
+  #onTool;
+  #onPointer;
+  #pressed = new Set(); // buttons this view sent a press for
+  #touches = new Map(); // pointer id to its last position, for touch gestures
+  #pinch = null;
+  #space = false;
+  #heldKey = null;
+
+  // `onCommand(name)` for keys that are not tools, `onTool(tool)` when a held tool changes, and
+  // `onPointer(x, y)` with the pointer's CSS position in the viewport, or null when it leaves.
+  constructor(engine, canvas, { onCommand, onTool, onPointer }) {
+    this.#engine = engine;
+    this.#canvas = canvas;
+    this.#onCommand = onCommand;
+    this.#onTool = onTool;
+    this.#onPointer = onPointer;
+    canvas.addEventListener("pointerdown", (e) => this.#down(e));
+    canvas.addEventListener("pointermove", (e) => this.#move(e));
+    canvas.addEventListener("pointerup", (e) => this.#up(e));
+    canvas.addEventListener("pointercancel", (e) => this.#cancel(e));
+    canvas.addEventListener("pointerleave", (e) => this.#leave(e));
+    canvas.addEventListener("wheel", (e) => this.#wheel(e), { passive: false });
+    canvas.addEventListener("contextmenu", (e) => e.preventDefault());
+    // Safari's trackpad pinch.
+    canvas.addEventListener("gesturestart", (e) => { e.preventDefault(); this.#gestureScale = 1; });
+    canvas.addEventListener("gesturechange", (e) => this.#gesture(e));
+    addEventListener("keydown", (e) => this.#keyDown(e));
+    addEventListener("keyup", (e) => this.#keyUp(e));
+    addEventListener("blur", () => this.releaseHeldTool());
+  }
+
+  #gestureScale = 1;
+
+  #point(e) {
+    const rect = this.#canvas.getBoundingClientRect();
+    const scale = this.#engine.scale;
+    return { x: (e.clientX - rect.left) * scale, y: (e.clientY - rect.top) * scale,
+             cssX: e.clientX - rect.left, cssY: e.clientY - rect.top };
+  }
+
+  #modifiers(e) {
+    return (e.shiftKey ? Modifiers.Shift : 0) | (e.ctrlKey ? Modifiers.Control : 0) |
+           (e.altKey ? Modifiers.Option : 0) | (e.metaKey ? Modifiers.Command : 0) |
+           (this.#space ? Modifiers.Space : 0);
+  }
+
+  #button(e) {
+    return e.button === 0 ? Buttons.Left : e.button === 1 ? Buttons.Middle
+         : e.button === 2 ? Buttons.Right : Buttons.None;
+  }
+
+  #post(kind, button, e, delta = 0) {
+    const { x, y } = this.#point(e);
+    this.#engine.pointer(kind, button, x, y, delta, this.#modifiers(e), e.timeStamp / 1000);
+  }
+
+  #down(e) {
+    if (e.pointerType === "touch") {
+      this.#touchDown(e);
+      return;
+    }
+    const button = this.#button(e);
+    if (button === Buttons.None) return;
+    this.#canvas.setPointerCapture(e.pointerId);
+    this.#pressed.add(button);
+    this.#post(Pointer.Down, button, e);
+  }
+
+  #move(e) {
+    if (e.pointerType === "touch") {
+      this.#touchMove(e);
+      return;
+    }
+    const { cssX, cssY } = this.#point(e);
+    this.#onPointer?.(cssX, cssY);
+    // Coalesced moves since the last frame, so a fast drag keeps its path.
+    const events = e.getCoalescedEvents?.() ?? [e];
+    for (const each of events.length ? events : [e]) this.#post(Pointer.Move, Buttons.None, each);
+  }
+
+  #up(e) {
+    if (e.pointerType === "touch") {
+      this.#touchUp(e);
+      return;
+    }
+    const button = this.#button(e);
+    if (!this.#pressed.delete(button)) return;
+    this.#post(Pointer.Up, button, e);
+  }
+
+  #cancel(e) {
+    if (e.pointerType === "touch") {
+      this.#touchUp(e, true);
+      return;
+    }
+    if (this.#pressed.size === 0) return;
+    this.#pressed.clear();
+    this.#post(Pointer.Cancel, Buttons.None, e);
+  }
+
+  #leave(e) {
+    if (e.pointerType === "touch" || this.#pressed.size > 0) return;
+    this.#onPointer?.(null);
+    this.#post(Pointer.Leave, Buttons.None, e);
+  }
+
+  #wheel(e) {
+    e.preventDefault();
+    if (e.ctrlKey) {
+      // A trackpad pinch arrives as a wheel with Control held, in Chrome and Firefox.
+      this.#post(Pointer.Magnify, Buttons.None, e, -e.deltaY * 4);
+      return;
+    }
+    // As the Mac scales its scroll deltas: precise pixels by 2, whole lines by 30. The browser's
+    // count down where the Mac's count up, and a mouse wheel's notch arrives as about 100 pixels,
+    // which is held to two lines' worth.
+    const delta = e.deltaMode === 0 ? Math.max(-60, Math.min(60, -e.deltaY * 2))
+                                    : -e.deltaY * 30;
+    this.#post(Pointer.Scroll, Buttons.None, e, delta);
+  }
+
+  #gesture(e) {
+    e.preventDefault();
+    const change = e.scale / this.#gestureScale - 1;
+    this.#gestureScale = e.scale;
+    this.#post(Pointer.Magnify, Buttons.None, e, change * 400);
+  }
+
+  // ---- Touch: one finger rotates, two pan and pinch -----------------------------------------
+
+  #touchDown(e) {
+    this.#canvas.setPointerCapture(e.pointerId);
+    this.#touches.set(e.pointerId, this.#point(e));
+    if (this.#touches.size === 1) {
+      this.#pressed.add(Buttons.Left);
+      this.#post(Pointer.Down, Buttons.Left, e);
+    } else if (this.#touches.size === 2) {
+      // The rotation stops where it was, and a pan starts from between the fingers.
+      this.#pressed.delete(Buttons.Left);
+      this.#post(Pointer.Up, Buttons.Left, e);
+      const centre = this.#centre();
+      this.#pinch = { distance: this.#spread(), centre };
+      this.#engine.pointer(Pointer.Down, Buttons.Middle, centre.x, centre.y, 0, 0, e.timeStamp / 1000);
+      this.#pressed.add(Buttons.Middle);
+    }
+  }
+
+  #touchMove(e) {
+    if (!this.#touches.has(e.pointerId)) return;
+    this.#touches.set(e.pointerId, this.#point(e));
+    if (this.#touches.size === 1) {
+      this.#post(Pointer.Move, Buttons.None, e);
+    } else if (this.#touches.size === 2 && this.#pinch) {
+      const centre = this.#centre();
+      const spread = this.#spread();
+      const time = e.timeStamp / 1000;
+      this.#engine.pointer(Pointer.Move, Buttons.None, centre.x, centre.y, 0, 0, time);
+      if (this.#pinch.distance > 0) {
+        const change = spread / this.#pinch.distance - 1;
+        this.#engine.pointer(Pointer.Magnify, Buttons.None, centre.x, centre.y, change * 400, 0, time);
+      }
+      this.#pinch = { distance: spread, centre };
+    }
+  }
+
+  #touchUp(e, cancelled = false) {
+    if (!this.#touches.has(e.pointerId)) return;
+    const time = e.timeStamp / 1000;
+    if (this.#touches.size === 2 && this.#pinch) {
+      const { x, y } = this.#pinch.centre;
+      this.#engine.pointer(Pointer.Up, Buttons.Middle, x, y, 0, 0, time);
+      this.#pressed.delete(Buttons.Middle);
+      this.#pinch = null;
+    } else if (this.#touches.size === 1 && this.#pressed.delete(Buttons.Left)) {
+      this.#post(cancelled ? Pointer.Cancel : Pointer.Up, Buttons.Left, e);
+    }
+    this.#touches.delete(e.pointerId);
+    if (this.#touches.size === 0) {
+      this.#engine.pointer(Pointer.Leave, Buttons.None, 0, 0, 0, 0, time);
+    }
+  }
+
+  #centre() {
+    const [a, b] = [...this.#touches.values()];
+    return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  }
+
+  #spread() {
+    const [a, b] = [...this.#touches.values()];
+    return Math.hypot(a.x - b.x, a.y - b.y);
+  }
+
+  // ---- Keys --------------------------------------------------------------------------------
+
+  #keyDown(e) {
+    if (e.target instanceof HTMLInputElement) return;
+    if (e.code === "Space") {
+      this.#space = true;
+      e.preventDefault();
+      return;
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "z") {
+      e.preventDefault();
+      this.#onCommand?.(e.shiftKey ? "redo" : "undo");
+      return;
+    }
+    if (e.repeat || e.metaKey || e.ctrlKey || e.altKey) return;
+    const binding = kKeys[e.key];
+    if (!binding) return;
+    e.preventDefault();
+    if (binding.hold !== undefined) {
+      this.#heldKey = e.code;
+      this.#engine.setTool(binding.hold);
+      this.#onTool?.(binding.hold);
+    } else {
+      this.#onCommand?.(binding.command);
+    }
+  }
+
+  #keyUp(e) {
+    if (e.code === "Space") {
+      this.#space = false;
+    } else if (e.code === this.#heldKey) {
+      this.releaseHeldTool();
+    }
+  }
+
+  // Drops a held tool, as when the page loses focus while its key is down.
+  releaseHeldTool() {
+    this.#space = false;
+    if (this.#heldKey === null) return;
+    this.#heldKey = null;
+    this.#engine.setTool(Tools.Select);
+    this.#onTool?.(Tools.Select);
+  }
+}

package/web/isolation-worker.js

@@ -0,0 +1,21 @@
+// Makes a page served without the headers threads need, as GitHub Pages serves it, cross-origin
+// isolated: the page registers this worker, which adds COOP, COEP and CORP to each response from
+// the page's own origin. Served with the headers already, by the launcher, the page never
+// registers it. Everything the page loads is its own, so require-corp blocks nothing.
+
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim()));
+
+self.addEventListener("fetch", (event) => {
+  const request = event.request;
+  if (new URL(request.url).origin !== self.location.origin) return;
+  if (request.cache === "only-if-cached" && request.mode !== "same-origin") return;
+  event.respondWith(fetch(request).then((response) => {
+    if (response.status === 0 || response.type === "opaqueredirect") return response;
+    const headers = new Headers(response.headers);
+    headers.set("Cross-Origin-Opener-Policy", "same-origin");
+    headers.set("Cross-Origin-Embedder-Policy", "require-corp");
+    headers.set("Cross-Origin-Resource-Policy", "same-origin");
+    return new Response(response.body, { status: response.status, statusText: response.statusText, headers });
+  }));
+});