prime8dev

shell.js (25564B)

---

 // Interactive prompt at the bottom of the about page. Starts from the same
 // virtual fs as the SSH shell (internal/tui/shell.go, served at /api/fs) and
 // layers the visitor's own changes on top in localStorage (shell-fs.js).
 //
 // It tries to feel like a real terminal over ssh: a little round-trip latency
 // per command, output that streams in instead of appearing at once, typeahead
 // that queues while a command runs, ^C to interrupt, double-tab listings.
 
 import { isEditableTarget } from "./dom.js";
 import { COMMAND_NAMES, SPECIAL, commands, longDate, writeFile } from "./shell-cmds.js";
 import { STORE_KEY, VFS, displayPath, lookup, resolvePath, sortedChildren } from "./shell-fs.js";
 import { expandWord, parse, resolveWord, tokenize } from "./shell-lang.js";
 
 const MAX_LINES = 2000;
 const MAX_HISTORY = 500;
 const HIST_KEY = "prime8.history.v1";
 const LOGIN_KEY = "prime8.lastlogin.v1";
 const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
 let fsPromise = null;
 const shellHandlers = { keydown: null, storage: null, click: null, winFocus: null, revealed: null };
 
 function loadFS() {
   if (!fsPromise) {
     fsPromise = fetch("/api/fs", { credentials: "same-origin" })
       .then((res) => (res.ok ? res.json() : Promise.reject(new Error(String(res.status)))))
       .then((data) => new VFS(data))
       .catch((err) => {
         fsPromise = null;
         throw err;
       });
   }
   return fsPromise;
 }
 
 function store(key, value) {
   try {
     window.localStorage.setItem(key, value);
   } catch {
     /* private mode, full, ... */
   }
 }
 
 function load(key) {
   try {
     return window.localStorage.getItem(key);
   } catch {
     return null;
   }
 }
 
 function sleep(ms) {
   return new Promise((r) => setTimeout(r, ms));
 }
 
 function jitter(min, max) {
   return min + Math.random() * (max - min);
 }
 
 function nextFrame() {
   return new Promise((r) => requestAnimationFrame(() => r()));
 }
 
 function commonPrefix(words) {
   if (words.length === 0) return "";
   const sorted = [...words].sort();
   const first = sorted[0];
   const last = sorted[sorted.length - 1];
   let i = 0;
   while (i < first.length && i < last.length && first[i] === last[i]) i++;
   return first.slice(0, i);
 }
 
 function span(cls, text) {
   const el = document.createElement("span");
   el.className = cls;
   el.textContent = text;
   return el;
 }
 
 function promptNodes(user, path, input) {
   return [
     span("shell-user", user),
     document.createTextNode("@"),
     span("shell-host", "prime8"),
     document.createTextNode(":"),
     span("shell-path", path),
     span("shell-dollar", "$"),
     document.createTextNode(" "),
     span("shell-cmd", input),
   ];
 }
 
 export function initShell() {
   const section = document.getElementById("shell");
   if (!section || section.dataset.bound === "true") return;
   section.dataset.bound = "true";
 
   const layout = section.closest(".about-layout");
   const historyEl = section.querySelector(".shell-history");
   const live = section.querySelector(".shell-live");
   const input = section.querySelector(".shell-input");
   const pathEl = live?.querySelector(".shell-path");
   const beforeEl = live?.querySelector("[data-before]");
   const afterEl = live?.querySelector("[data-after]");
   const cursorEl = live?.querySelector(".shell-cursor");
   if (!historyEl || !live || !input || !pathEl || !beforeEl || !afterEl || !cursorEl) return;
 
   const initialUser = section.dataset.user || "visitor";
   let saved = [];
   try {
     saved = JSON.parse(load(HIST_KEY) || "[]");
   } catch {
     saved = [];
   }
 
   // --- shell state ---
 
   const sh = {
     fs: null,
     user: initialUser,
     home: "/home/" + initialUser,
     cwd: "/home/" + initialUser,
     oldpwd: "",
     status: 0,
     bootTime: Date.now(),
     history: Array.isArray(saved) ? saved.filter((l) => typeof l === "string").slice(-MAX_HISTORY) : [],
     vars: {},
     get env() {
       return {
         HOME: this.home,
         USER: this.user,
         LOGNAME: this.user,
         HOSTNAME: "prime8",
         SHELL: "/bin/bash",
         TERM: "xterm-256color",
         LANG: "en_US.UTF-8",
         PATH: "/usr/local/bin:/usr/bin:/bin",
         PWD: this.cwd,
         ...(this.oldpwd ? { OLDPWD: this.oldpwd } : {}),
         ...this.vars,
         "?": this.status,
       };
     },
     resolve(p) {
       return resolvePath(this.home, this.cwd, p);
     },
     chdir(abs) {
       this.oldpwd = this.cwd;
       this.cwd = abs;
     },
     setVar(k, v) {
       this.vars[k] = v;
     },
     unsetVar(k) {
       delete this.vars[k];
     },
     clearHistory() {
       this.history.length = 0;
       store(HIST_KEY, "[]");
     },
   };
 
   let recallIndex = sh.history.length;
   let draft = "";
   let busy = false;
   let job = null;
   const typeahead = [];
   let lastTab = "";
 
   function scrollToPrompt() {
     live.scrollIntoView({ block: "nearest" });
   }
 
   let lastValue = null;
   let lastCaret = -1;
   function render() {
     pathEl.textContent = displayPath(sh.home, sh.cwd);
     const value = input.value;
     const caret = input.selectionStart ?? value.length;
     lastValue = value;
     lastCaret = caret;
     beforeEl.textContent = value.slice(0, caret);
     cursorEl.textContent = value.slice(caret, caret + 1) || "\u00a0";
     afterEl.textContent = value.slice(caret + 1);
     holdCursor();
   }
 
   // Real terminals restart the blink on every keystroke, so the cursor stays
   // solid while you type and only starts blinking again once you pause.
   let blinkTimer = 0;
   function holdCursor() {
     cursorEl.classList.add("solid");
     clearTimeout(blinkTimer);
     blinkTimer = setTimeout(() => cursorEl.classList.remove("solid"), 530);
   }
 
   function setInput(value, caret = value.length) {
     input.value = value;
     input.setSelectionRange(caret, caret);
     render();
   }
 
   function trim() {
     while (historyEl.childElementCount > MAX_LINES) historyEl.firstElementChild?.remove();
   }
 
   function appendLine(nodes, cls) {
     const line = document.createElement("div");
     line.className = cls;
     if (typeof nodes === "string") line.textContent = nodes;
     else line.append(...nodes);
     historyEl.appendChild(line);
     trim();
     return line;
   }
 
   function clearScreen() {
     term.reset();
     historyEl.replaceChildren();
     layout?.classList.add("shell-cleared");
   }
 
   // --- terminal output: queued lines drained a few per frame ---
 
   const term = {
     q: [],
     open: null,
     pumping: null,
     write(text, cls = "") {
       const parts = text.split("\n");
       parts.forEach((p, i) => {
         const end = i < parts.length - 1;
         if (!end && p === "") return;
         this.q.push({ text: p, cls, end });
       });
       this.kick();
     },
     line(nodes, cls = "") {
       this.q.push({ nodes, cls, end: true });
       this.kick();
     },
     kick() {
       if (!this.pumping) this.pumping = this.pump();
     },
     emit(item) {
       let el = this.open;
       if (!el) {
         el = appendLine("", "shell-out shell-stream" + (item.cls === "err" ? " shell-err" : ""));
       }
       if (item.nodes) el.append(...item.nodes);
       else if (item.text) el.append(document.createTextNode(item.text));
       if (item.end) {
         if (!el.textContent) el.textContent = " ";
         this.open = null;
       } else this.open = el;
     },
     async pump() {
       // Yield once so push() has stored this promise before we can clear it;
       // a synchronous finish would leave a settled promise in `pumping` and
       // drain() would spin on it forever.
       await null;
       while (this.q.length) {
         const n = reducedMotion() ? this.q.length : Math.max(2, Math.ceil(this.q.length / 24));
         for (let i = 0; i < n && this.q.length; i++) this.emit(this.q.shift());
         scrollToPrompt();
         if (this.q.length) await nextFrame();
       }
       this.pumping = null;
     },
     async drain() {
       while (this.pumping) await this.pumping;
     },
     endLine() {
       this.open = null;
     },
     reset() {
       this.q.length = 0;
       this.open = null;
     },
   };
 
   // --- running commands ---
 
   function newJob() {
     const j = { aborted: false, wakers: new Set(), exit: false };
     j.sleep = (ms) =>
       new Promise((resolve) => {
         if (j.aborted) return resolve(false);
         const wake = () => {
           clearTimeout(t);
           resolve(false);
         };
         const t = setTimeout(() => {
           j.wakers.delete(wake);
           resolve(true);
         }, ms);
         j.wakers.add(wake);
       });
     j.abort = () => {
       j.aborted = true;
       for (const w of j.wakers) w();
       j.wakers.clear();
     };
     return j;
   }
 
   function expand(words) {
     const argv = [];
     for (const raw of words) {
       const w = resolveWord(raw, sh.env);
       if (!w.quoted && w.v === "") continue;
       argv.push(...expandWord(w, sh.fs.root, sh.home, sh.cwd));
     }
     return argv;
   }
 
   function shErr(msg) {
     term.write(`bash: ${msg}\n`, "err");
   }
 
   async function runCommand(cmd, stdin, last) {
     const argv = expand(cmd.words);
 
     // NAME=value with no command sets a shell variable
     const assign = /^([A-Za-z_][A-Za-z0-9_]*)=(.*)$/s;
     if (argv.length && argv.every((a) => assign.test(a)) && cmd.redirs.length === 0) {
       for (const a of argv) {
         const m = assign.exec(a);
         sh.setVar(m[1], m[2]);
       }
       return { status: 0, stdout: "" };
     }
     while (argv.length > 1 && assign.test(argv[0])) argv.shift();
 
     let input = stdin;
     let outFile = null;
     let errFile = null;
     let errToOut = false;
     for (const r of cmd.redirs) {
       if (r.op === "2>&1") {
         errToOut = true;
         continue;
       }
       const targets = expand([r.target]);
       if (targets.length !== 1) {
         shErr(`${resolveWord(r.target, sh.env).v}: ambiguous redirect`);
         return { status: 1, stdout: "" };
       }
       const t = targets[0];
       if (r.op === "<") {
         const n = sh.fs.get(sh.resolve(t));
         if (!n || n.dir) {
           shErr(`${t}: ${n ? "Is a directory" : "No such file or directory"}`);
           return { status: 1, stdout: "" };
         }
         input = n.content;
         continue;
       }
       const append = r.op.endsWith(">>");
       // the shell creates (and truncates) the target before the command runs
       const why = writeFile(sh, t, "", true);
       if (why) {
         shErr(`${t}: ${why}`);
         return { status: 1, stdout: "" };
       }
       if (!append) writeFile(sh, t, "", false);
       if (r.op.startsWith("2")) errFile = { path: t, buf: "" };
       else outFile = { path: t, buf: "" };
     }
 
     if (argv.length === 0) return { status: 0, stdout: "" };
     const name = argv[0];
     const toTerm = last && !outFile;
     let piped = "";
     const out = (s) => {
       if (outFile) outFile.buf += s;
       else if (toTerm) term.write(s);
       else piped += s;
     };
     const err = (s) => {
       if (errToOut) out(s);
       else if (errFile) errFile.buf += s;
       else term.write(s, "err");
     };
 
     let status;
     if (SPECIAL.has(name)) {
       if (name === "clear" || name === "reset") {
         if (toTerm) {
           await term.drain();
           clearScreen();
         }
       } else job.exit = true;
       status = 0;
     } else if (commands[name]) {
       const ctx = {
         argv,
         stdin: input,
         tty: toTerm,
         sh,
         out,
         err,
         line: (nodes) => term.line(nodes),
         span,
         sleep: job.sleep,
       };
       try {
         status = await commands[name](ctx);
       } catch (e) {
         err(`${name}: ${e && e.message ? e.message : "internal error"}\n`);
         status = 1;
       }
     } else if (name.includes("/")) {
       const n = sh.fs.get(sh.resolve(name));
       err(`bash: ${name}: ${n ? (n.dir ? "Is a directory" : "Permission denied") : "No such file or directory"}\n`);
       status = n ? 126 : 127;
     } else {
       err(`${name}: command not found\n`);
       status = 127;
     }
 
     for (const f of [outFile, errFile]) {
       if (!f || !f.buf) continue;
       const why = writeFile(sh, f.path, f.buf, true);
       if (why) shErr(`${f.path}: ${why}`);
     }
     return { status: status ?? 0, stdout: piped };
   }
 
   async function runLine(line) {
     const tk = tokenize(line, sh.env);
     if (tk.error) {
       shErr(tk.error);
       sh.status = 2;
       return;
     }
     const parsed = parse(tk.toks);
     if (parsed.error) {
       shErr(parsed.error);
       sh.status = 2;
       return;
     }
     for (const item of parsed.list) {
       if (item.conn === "&&" && sh.status !== 0) continue;
       if (item.conn === "||" && sh.status === 0) continue;
       let stdin = null;
       for (let i = 0; i < item.pipeline.length; i++) {
         const r = await runCommand(item.pipeline[i], stdin, i === item.pipeline.length - 1);
         stdin = r.stdout;
         sh.status = r.status;
         if (job.aborted || job.exit) break;
       }
       term.endLine();
       if (job.aborted) {
         sh.status = 130;
         return;
       }
       if (job.exit) return;
     }
   }
 
   function remember(line) {
     if (!line.trim() || line.startsWith(" ") || sh.history[sh.history.length - 1] === line) return;
     sh.history.push(line);
     if (sh.history.length > MAX_HISTORY) sh.history.shift();
     store(HIST_KEY, JSON.stringify(sh.history));
   }
 
   async function execute(line) {
     remember(line);
     recallIndex = sh.history.length;
     draft = "";
     const first = line.trim().split(/\s+/)[0] || "";
     // like the TUI, clear wipes the screen without echoing itself
     if (first !== "clear" && first !== "reset") appendLine(promptNodes(sh.user, displayPath(sh.home, sh.cwd), line), "shell-prompt");
     if (!line.trim()) return;
 
     job = newJob();
     // network round trip; the first command also waits on the real fetch
     const rtt = job.sleep(jitter(18, 55));
     try {
       sh.fs = await loadFS();
     } catch {
       await rtt;
       term.write("prime8: filesystem unavailable, try again in a bit\n", "err");
       return;
     }
     if (sh.fs.user && sh.fs.user !== sh.user) {
       sh.user = sh.fs.user;
       sh.home = sh.fs.home;
       sh.cwd = sh.home;
     }
     await rtt;
     if (!job.aborted) await runLine(line);
     await term.drain();
     term.endLine();
     if (!sh.fs.commit()) term.write("bash: write error: No space left on device\n", "err");
     await term.drain();
     if (job.exit) {
       job = null;
       disconnect();
     }
   }
 
   async function submit(line) {
     if (busy) {
       typeahead.push(line);
       return;
     }
     busy = true;
     live.classList.add("busy");
     try {
       typeahead.unshift(line);
       while (typeahead.length && !live.hidden) await execute(typeahead.shift());
     } finally {
       typeahead.length = 0;
       job = null;
       busy = false;
       live.classList.remove("busy");
       render();
       scrollToPrompt();
     }
   }
 
   function interrupt() {
     if (!busy || !job) return false;
     typeahead.length = 0;
     job.abort();
     term.reset();
     appendLine("^C", "shell-out shell-stream");
     scrollToPrompt();
     return true;
   }
 
   // --- completion ---
 
   async function complete() {
     const value = input.value.slice(0, input.selectionStart ?? input.value.length);
     const rest = input.value.slice(value.length);
     const idx = Math.max(value.lastIndexOf(" "), value.lastIndexOf("|"), value.lastIndexOf(";"), value.lastIndexOf(">"), value.lastIndexOf("<"));
     const word = value.slice(idx + 1);
     const before = value.slice(0, idx + 1);
     const commandPos = !/\S/.test(before.replace(/.*[|;&]/, ""));
     let names;
     let dirPart = "";
     let suffix = (m) => m + " ";
     if (commandPos && !word.includes("/")) {
       names = COMMAND_NAMES.filter((c) => c.startsWith(word));
     } else {
       let fs;
       try {
         fs = await loadFS();
       } catch {
         return;
       }
       const slash = word.lastIndexOf("/");
       dirPart = slash >= 0 ? word.slice(0, slash + 1) : "";
       const base = slash >= 0 ? word.slice(slash + 1) : word;
       const dir = lookup(fs.root, resolvePath(sh.home, sh.cwd, dirPart || "."));
       if (!dir || !dir.dir) return;
       const kids = sortedChildren(dir).filter((c) => c.name.startsWith(base) && (base.startsWith(".") || !c.name.startsWith(".")));
       names = kids.map((c) => c.name + (c.dir ? "/" : ""));
       suffix = (m) => (m.endsWith("/") ? m : m + " ");
     }
     if (names.length === 0) return;
     if (names.length === 1) {
       const done = before + dirPart + suffix(names[0]);
       setInput(done + rest, done.length);
       lastTab = "";
       return;
     }
     const p = commonPrefix(names);
     if (p.length > word.length - dirPart.length) {
       const done = before + dirPart + p;
       setInput(done + rest, done.length);
       lastTab = "";
       return;
     }
     // second tab with nothing more to fill: list the candidates, like bash
     if (lastTab === input.value) {
       appendLine(promptNodes(sh.user, displayPath(sh.home, sh.cwd), input.value), "shell-prompt");
       appendLine(names.join("  "), "shell-out");
       scrollToPrompt();
       lastTab = "";
       return;
     }
     lastTab = input.value;
   }
 
   // --- session ---
 
   function disconnect() {
     term.reset();
     historyEl.replaceChildren();
     layout?.classList.add("shell-cleared");
     appendLine("logout", "shell-out");
     appendLine("Connection to prime8.dev closed.", "shell-out shell-dim");
     const again = document.createElement("button");
     again.type = "button";
     again.className = "shell-reconnect";
     again.textContent = "[ reconnect ]";
     again.addEventListener("click", reconnect, { once: true });
     const row = document.createElement("div");
     row.className = "shell-out";
     row.appendChild(again);
     historyEl.appendChild(row);
     live.hidden = true;
     input.blur();
     again.focus({ preventScroll: true });
   }
 
   async function reconnect() {
     historyEl.replaceChildren();
     // ssh handshake
     await sleep(jitter(250, 700));
     const prev = load(LOGIN_KEY);
     store(LOGIN_KEY, String(Date.now()));
     if (prev && !Number.isNaN(Number(prev))) appendLine(`Last login: ${longDate(new Date(Number(prev)))} from web`, "shell-out shell-dim");
     sh.cwd = sh.home;
     sh.oldpwd = "";
     sh.status = 0;
     live.hidden = false;
     setInput("");
     input.focus({ preventScroll: true });
     scrollToPrompt();
   }
 
   function deleteWord() {
     const caret = input.selectionStart ?? input.value.length;
     const head = input.value.slice(0, caret).replace(/\S+\s*$/, "");
     const tail = input.value.slice(caret);
     setInput(head + tail, head.length);
   }
 
   input.addEventListener("keydown", (e) => {
     if (e.isComposing) return;
     if (e.key !== "Tab") lastTab = "";
     const ctrl = e.ctrlKey && !e.metaKey && !e.altKey;
     if (ctrl) {
       switch (e.key.toLowerCase()) {
         case "l":
           e.preventDefault();
           if (!busy) clearScreen();
           return;
         case "a":
           e.preventDefault();
           setInput(input.value, 0);
           return;
         case "e":
           e.preventDefault();
           setInput(input.value);
           return;
         case "u": {
           e.preventDefault();
           const caret = input.selectionStart ?? 0;
           setInput(input.value.slice(caret), 0);
           return;
         }
         case "k": {
           e.preventDefault();
           const caret = input.selectionStart ?? input.value.length;
           setInput(input.value.slice(0, caret), caret);
           return;
         }
         case "w":
           e.preventDefault();
           deleteWord();
           return;
         case "c":
           if (input.selectionStart !== input.selectionEnd) return; // let copy work
           e.preventDefault();
           if (interrupt()) {
             setInput("");
             return;
           }
           appendLine(promptNodes(sh.user, displayPath(sh.home, sh.cwd), input.value + "^C"), "shell-prompt");
           setInput("");
           recallIndex = sh.history.length;
           scrollToPrompt();
           return;
         case "d":
           e.preventDefault();
           if (input.value === "" && !busy) disconnect();
           return;
         default:
           return;
       }
     }
 
     // A focused prompt types digits like any terminal. Tab on an empty prompt
     // has nothing to complete, so it gives focus back and cycles tabs.
     if (input.value === "" && !busy && !e.ctrlKey && !e.metaKey && !e.altKey && e.key === "Tab") {
       e.preventDefault();
       e.stopPropagation();
       input.blur();
       document.dispatchEvent(new KeyboardEvent("keydown", { key: e.key, shiftKey: e.shiftKey, bubbles: true, cancelable: true }));
       return;
     }
 
     switch (e.key) {
       case "Enter": {
         e.preventDefault();
         const line = input.value;
         setInput("");
         submit(line);
         break;
       }
       case "Tab":
         // keep the tab-cycling shortcut out of the prompt
         e.preventDefault();
         e.stopPropagation();
         if (!busy) complete();
         break;
       case "ArrowUp":
         e.preventDefault();
         e.stopPropagation();
         if (busy) break;
         if (recallIndex === sh.history.length) draft = input.value;
         if (recallIndex > 0) setInput(sh.history[--recallIndex]);
         break;
       case "ArrowDown":
         e.preventDefault();
         e.stopPropagation();
         if (busy) break;
         if (recallIndex < sh.history.length) {
           recallIndex++;
           setInput(recallIndex === sh.history.length ? draft : sh.history[recallIndex]);
         }
         break;
       case "Escape":
         if (input.value) setInput("");
         else input.blur();
         break;
       default:
         break;
     }
   });
 
   input.addEventListener("input", render);
   input.addEventListener("select", render);
   // Only a real caret move re-renders: render() rewrites the cursor spans,
   // which itself fires selectionchange, and re-rendering on that kept the
   // cursor pinned solid forever (it never got to blink).
   document.addEventListener("selectionchange", () => {
     if (document.activeElement !== input) return;
     if (input.value === lastValue && input.selectionStart === lastCaret) return;
     render();
   });
   input.addEventListener("focus", () => {
     section.classList.add("focused");
     render();
     loadFS().catch(() => {});
   });
   input.addEventListener("blur", () => section.classList.remove("focused"));
 
   // another tab changed the files: pick them up
   if (shellHandlers.storage) window.removeEventListener("storage", shellHandlers.storage);
   shellHandlers.storage = (e) => {
     if (e.key !== STORE_KEY || !sh.fs || busy) return;
     sh.fs.load();
   };
   window.addEventListener("storage", shellHandlers.storage);
 
   // Typing with nothing focused goes to the prompt, but the tab/help
   // shortcuts (digits, ?, space, arrows, tab) keep working, like the TUI.
   if (shellHandlers.keydown) document.removeEventListener("keydown", shellHandlers.keydown);
   shellHandlers.keydown = (e) => {
     if (!section.isConnected) {
       document.removeEventListener("keydown", shellHandlers.keydown);
       shellHandlers.keydown = null;
       return;
     }
     if (live.hidden || e.defaultPrevented || e.ctrlKey || e.metaKey || e.altKey || e.isComposing) return;
     if (isEditableTarget(e.target) || window.isLightboxOpen?.()) return;
     const active = document.activeElement;
     if (active && active !== document.body && active !== document.documentElement) return;
     if (document.getElementById("help-overlay")?.classList.contains("visible")) return;
     if (e.key.length !== 1 || /[0-9? ]/.test(e.key)) return;
     e.preventDefault();
     input.focus({ preventScroll: true });
     setInput(input.value + e.key);
     scrollToPrompt();
   };
   document.addEventListener("keydown", shellHandlers.keydown);
 
   if (!load(LOGIN_KEY)) store(LOGIN_KEY, String(Date.now()));
   render();
 
   // The prompt takes focus only when asked: typing a letter (above) or a
   // click anywhere below the top bar. It is never grabbed on load, on a tab switch
   // or on window focus, so the page shortcuts keep the keyboard by default.
   // Touch screens are skipped, since focus pops the on-screen keyboard.
   const finePointer = window.matchMedia("(pointer: fine)").matches;
   const focusPrompt = () => {
     if (!section.isConnected || live.hidden || !finePointer) return;
     const active = document.activeElement;
     // a clicked tab keeps focus after the swap; that still counts as idle
     const idle = !active || active === document.body || active === document.documentElement ||
       !!active.closest?.("#tabs");
     if (idle && document.visibilityState === "visible") input.focus({ preventScroll: true });
   };
 
   for (const [ev, key, target] of [["click", "click", document], ["focus", "winFocus", window], ["reveal:done", "revealed", document]]) {
     if (shellHandlers[key]) target.removeEventListener(ev, shellHandlers[key]);
   }
   shellHandlers.click = (e) => {
     if (!section.isConnected || e.button !== 0) return;
     if (e.target.closest?.("header, #tabs")) return; // the top bar keeps its own clicks
     if (e.target.closest?.("a, button, input, textarea, select, label, summary, [tabindex], #help-overlay")) return;
     if (String(window.getSelection?.() || "")) return;
     if (window.isLightboxOpen?.()) return;
     focusPrompt();
   };
   shellHandlers.winFocus = null;
   shellHandlers.revealed = null;
   document.addEventListener("click", shellHandlers.click);
 }