@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/page/runtime.ts

@@ -1,111 +0,0 @@
-import { itemContextScript } from "./itemContextScript.ts";
-import { preferencesScript } from "./preferencesScript.ts";
-import { routeQueryOptions } from "./routeQuery.ts";
-
-export const client = `
-import "/_board/diagnostics.js";
-import "/_board/saved-views.js";
-import "/_board/history.js";
-import "/_board/preferences.js";
-import "/_board/search.js";
-import { tick } from "/_board/ages.js";
-import { renderDiagrams } from "/_board/diagrams.js";
-import { applyNavigation, applyPage } from "/_board/page-state.js";
-import "/_board/navigation.js";
-import { remember, swap } from "/_board/swap.js";
-import { refreshLibrary } from "/_board/library.js";
-import { revealCurrentFile } from "/_board/sidebar.js";
-import { resolvedDocumentFailure, session } from "/_board/native.js";
-
-document.documentElement.dataset.js = "true";
-${itemContextScript()}
-remember(document.getElementById("doc"));
-let native = session(window);
-const live = document.getElementById("live");
-const toggle = document.getElementById("updates-toggle");
-let pageFailure = "";
-let navFailure = "";
-let pageWaiting = true;
-let watching = false;
-let navWaiting = true;
-let active = "";
-let releasePage;
-let selected;
-let releaseNavigation;
-const show = () => {
-  const state = native.registry.get(native.updates.status);
-  const paused = native.registry.get(native.updates.paused);
-  const failure = pageFailure || navFailure;
-  live.dataset.state = paused ? "paused" : failure ? "stale" : !watching || state.connection !== "live" ? "down" : pageWaiting || navWaiting ? "refreshing" : "live";
-  live.textContent = paused ? "updates paused · " + state.pending + (state.pending === 256 ? "+" : "") + " pending updates" : failure || (!watching || state.connection !== "live" ? "reconnecting" : pageWaiting || navWaiting ? "refreshing" : "live");
-  toggle.textContent = paused ? "Resume updates" : "Pause updates";
-  toggle.setAttribute("aria-pressed", String(paused));
-  live.title = "Connection: " + state.connection + "; last observed source watcher: " + (watching ? "watching" : "unavailable") + "; " + (paused ? "automatic reads paused" : pageWaiting || navWaiting ? "reads pending" : failure ? "showing retained source" : "reads settled");
-};
-const watchNavigation = () => {
-  const doc = document.getElementById("doc");
-  const current = doc.dataset.view ? "" : doc.dataset.file;
-  if (current === selected) return;
-  selected = current;
-  releaseNavigation?.();
-  releaseNavigation = native.registry.subscribe(native.api.navigation.query({ current }), (value) => {
-    navWaiting = value.waiting || value._tag === "Initial";
-    if (value._tag === "Failure") navFailure = "navigation refresh failed";
-    if (value._tag === "Success" && !value.waiting) {
-      navFailure = "";
-      if (!document.querySelector("[data-board-react-root]")) applyNavigation(value.value);
-    }
-    show();
-  }, { immediate: true });
-};
-const watchPage = () => {
-  watchNavigation();
-  const doc = document.getElementById("doc");
-  const path = location.pathname + location.search;
-  const selection = path + (doc.hasAttribute("data-react-document") ? ":document" : ":page");
-  if (selection === active) return;
-  active = selection;
-  releasePage?.();
-  pageFailure = "";
-  const atom = doc.hasAttribute("data-react-document") ? native.api.document.query({ url: path }, ${JSON.stringify(routeQueryOptions)}) : native.api.page.query({ url: path }, ${JSON.stringify(routeQueryOptions)});
-  releasePage = native.registry.subscribe(atom, (value) => {
-    pageWaiting = value.waiting || value._tag === "Initial";
-    if (value._tag === "Failure") pageFailure = resolvedDocumentFailure(value.cause) ? "" : "refresh failed";
-    if (value._tag === "Success" && !value.waiting && active === selection && path === location.pathname + location.search) {
-      if (document.querySelector("[data-board-react-root]")) { pageFailure = ""; show(); return; }
-      const next = new DOMParser().parseFromString(value.value.html, "text/html");
-      pageFailure = applyPage(next, true) ? "" : "refresh failed";
-      tick();
-    }
-    show();
-  }, { immediate: true });
-};
-const observe = () => {
-native.registry.subscribe(native.api.watcher.query(), (value) => {
-  watching = value._tag === "Success" && value.value.watching;
-  show();
-}, { immediate: true });
-native.registry.subscribe(native.updates.status, show);
-native.registry.subscribe(native.updates.paused, (paused) => { show(); if (!paused) document.dispatchEvent(new Event("board-updates-resumed")); });
-};
-document.addEventListener("board-page", () => { tick(); renderDiagrams(document); refreshLibrary(); });
-document.addEventListener("board-index-change", () => { tick(); refreshLibrary(); revealCurrentFile(); });
-observe();
-toggle.disabled = false;
-toggle.addEventListener("click", () => native.registry.set(native.updates.paused, !native.registry.get(native.updates.paused)));
-document.addEventListener("board-page", watchPage);
-watchPage();
-window.addEventListener("pagehide", () => { releasePage?.(); releaseNavigation?.(); selected = undefined; active = ""; });
-window.addEventListener("pageshow", (event) => {
-  if (!event.persisted) return;
-  native = session(window);
-  pageWaiting = navWaiting = true;
-  watching = false;
-  pageFailure = navFailure = "";
-  observe();
-  watchPage();
-});
-
-renderDiagrams(document);
-`;
-export const preferences = preferencesScript();

package/src/client/page/scripts.ts

@@ -1,91 +0,0 @@
-export const diagrams = `
-import { diagramTools } from "/_board/visuals.js";
-const rendered = new Map();
-const dark = matchMedia("(prefers-color-scheme: dark)");
-let mermaid;
-let counter = 0;
-
-const token = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
-
-const load = async () => {
-  mermaid ??= (await import("/_board/mermaid/mermaid.esm.min.mjs")).default;
-  mermaid.initialize({
-    startOnLoad: false,
-    suppressErrorRendering: true,
-    securityLevel: "strict",
-    theme: "base",
-    themeVariables: {
-      darkMode: schemeNow() === "dark",
-      background: token("--bg"),
-      primaryColor: token("--surface"),
-      primaryTextColor: token("--text"),
-      primaryBorderColor: token("--border"),
-      lineColor: token("--muted"),
-      textColor: token("--text"),
-      fontFamily: token("--sans"),
-    },
-  });
-  return mermaid;
-};
-
-const schemeNow = () => document.documentElement.dataset.scheme ?? (dark.matches ? "dark" : "light");
-let lastScheme = schemeNow();
-
-const draw = async (figure) => {
-  const source = figure.querySelector(".diagram-source").textContent;
-  const scheme = schemeNow();
-  const key = scheme + ":" + source;
-  if (!rendered.has(key)) {
-    rendered.set(key, load().then((engine) => engine.render("diagram-" + ++counter, source)).then((result) => result.svg));
-  }
-  try {
-    const svg = await rendered.get(key);
-    if (scheme !== schemeNow()) {
-      rendered.delete(key);
-      return;
-    }
-    figure.querySelector(".diagram-svg")?.remove();
-    figure.querySelector("[data-diagram-error]")?.remove();
-    figure.insertAdjacentHTML("afterbegin", '<div class="diagram-svg">' + svg + "</div>");
-    figure.dataset.state = "drawn";
-    diagramTools(figure);
-  } catch (error) {
-    rendered.delete(key);
-    if (scheme !== schemeNow()) return;
-    figure.querySelector(".diagram-svg")?.remove();
-    figure.dataset.state = "failed";
-    figure.dataset.error = String(error?.message ?? error);
-    figure.querySelector("[data-diagram-error]")?.remove();
-    const message = document.createElement("p"); message.setAttribute("data-diagram-error", ""); message.setAttribute("role", "status");
-    message.textContent = "Diagram could not be drawn: " + figure.dataset.error; figure.append(message);
-    diagramTools(figure);
-  }
-};
-
-const forget = (root) => {
-  const shown = new Set([...root.querySelectorAll("figure.diagram .diagram-source")].map((source) => source.textContent));
-  for (const key of rendered.keys()) {
-    if (!shown.has(key.slice(key.indexOf(":") + 1))) rendered.delete(key);
-  }
-};
-
-export const renderDiagrams = (root, selector = "figure.diagram:not([data-state=drawn])") => {
-  forget(root);
-  for (const figure of root.querySelectorAll("figure.diagram[data-react-diagram]")) diagramTools(figure);
-  return Promise.all([...root.querySelectorAll(selector)].filter((figure) => !figure.hasAttribute("data-react-diagram")).map(draw));
-};
-
-const themeChanged = () => {
-  const scheme = schemeNow();
-  if (lastScheme === scheme) return;
-  lastScheme = scheme;
-  const doc = document.getElementById("doc");
-  if (doc) doc.dataset.scheme = scheme;
-  mermaid = undefined;
-  renderDiagrams(document, "figure.diagram");
-};
-document.addEventListener("board-theme", themeChanged);
-dark.addEventListener("change", themeChanged);
-`;
-
-export const swap = `export { remember, swap } from "/_board/native.js";`;

package/src/client/page/searchResultsScript.ts

@@ -1,63 +0,0 @@
-export function searchResultsScript(): string {
-	return `
-const results = document.getElementById("search-results");
-const input = document.getElementById("search-query");
-let selected = -1;
-const commands = [
- { kind: "command", title: "Open workspace", href: "/" },
- { kind: "command", title: "Show or hide files", command: "sidebar-toggle" },
- { kind: "command", title: "Toggle compact density", command: "density" },
- { kind: "command", title: "Toggle light or dark theme", command: "theme" },
-];
-export const matchingCommands = (query) => commands.filter(item => item.title.toLowerCase().includes(query.trim().toLowerCase()));
-export const choose = (index) => {
- const options = [...results.querySelectorAll("a")];
- selected = options.length ? (index + options.length) % options.length : -1;
- options.forEach((option, at) => option.setAttribute("aria-selected", String(at === selected)));
- if (selected >= 0) {
-  input.setAttribute("aria-activedescendant", options[selected].id);
-  options[selected].scrollIntoView({ block: "nearest" });
- } else input.removeAttribute("aria-activedescendant");
-};
-export const move = (delta) => choose(selected + delta);
-export const activate = () => results.querySelector('a[aria-selected="true"]')?.click();
-export const showResults = (items) => {
- results.replaceChildren();
- items.forEach((item, index) => {
-  const li = document.createElement("li");
-  li.setAttribute("role", "presentation");
-  const link = document.createElement("a");
-  link.id = "search-result-" + index;
-  link.href = item.href ?? "#";
-  link.setAttribute("role", "option");
-  if (item.command) link.dataset.command = item.command;
-  const title = document.createElement("strong");
-  title.textContent = item.title;
-  const source = document.createElement("small");
-  source.textContent = item.kind + (item.file ? " · " + item.file + (item.line ? ":" + item.line : "") : "");
-  link.append(title, source);
-  if (item.snippet) {
-   const snippet = document.createElement("p");
-   snippet.textContent = item.snippet;
-   link.append(snippet);
-  }
-  li.append(link); results.append(li);
- });
- choose(0);
-};
-results.addEventListener("click", (event) => {
- const link = event.target.closest("a");
- if (!link) return;
- const control = document.getElementById(link.dataset.command);
- if (control) {
-  event.preventDefault();
-  if (control.id === "sidebar-toggle") control.click();
-  else {
-   control.value = control.id === "density" ? (control.value === "compact" ? "comfortable" : "compact") : (control.value === "dark" ? "light" : "dark");
-   control.dispatchEvent(new Event("change"));
-  }
- }
- document.getElementById("search-dialog").close(!control && event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey ? "navigate" : "");
-});
-`;
-}

package/src/client/page/searchScript.ts

@@ -1,74 +0,0 @@
-export function searchScript(): string {
-	return `
-import { activate, matchingCommands, move, showResults } from "/_board/search-results.js";
-import { session } from "/_board/native.js";
-const dialog = document.getElementById("search-dialog");
-const input = document.getElementById("search-query");
-const status = document.getElementById("search-status");
-const open = document.getElementById("search-open");
-open.disabled = false;
-let previous;
-let version = 0;
-let timer;
-let controller;
-const invalidate = () => {
- ++version;
- clearTimeout(timer);
- controller?.abort();
-};
-const search = async () => {
- invalidate();
- const mine = version;
- const query = input.value.trim();
- const commands = matchingCommands(query);
- showResults(commands);
- if (!query) { status.textContent = "Type to search this workspace, or choose a command."; return; }
- status.textContent = "Searching…";
- controller = new AbortController();
- try {
-  const native = session(window);
-  const atom = native.api.search.query({ query });
-  native.registry.refresh(atom);
-  const body = await native.read(atom, controller.signal);
-  if (mine !== version || !dialog.open) return;
-  showResults([...commands, ...body.results]);
-  status.textContent = (body.total ? (body.total > body.results.length ? "Showing " + body.results.length + " of " : "") + body.total + " matches." : "No document matches.") + (body.unavailable.length ? " Could not read " + body.unavailable.length + " files; results are incomplete." : "");
- } catch (error) {
-  if (mine !== version || controller.signal.aborted) return;
-  status.textContent = "Search could not be completed. Press Search to retry.";
- }
-};
-open.addEventListener("click", () => {
- previous = document.activeElement;
- dialog.returnValue = "";
- dialog.showModal();
- input.focus();
- input.select();
- search();
-});
-document.getElementById("search-close").addEventListener("click", () => dialog.close());
-dialog.addEventListener("close", () => { invalidate(); if (dialog.returnValue !== "navigate") previous?.focus({ preventScroll: true }); });
-dialog.addEventListener("cancel", () => invalidate());
-dialog.addEventListener("keydown", (event) => {
- if (event.key === "Escape") { event.preventDefault(); dialog.close(); }
-});
-input.addEventListener("input", () => {
- invalidate();
- showResults([]);
- status.textContent = input.value.trim() ? "Searching…" : "Type to search this workspace.";
- timer = setTimeout(search, 150);
-});
-document.getElementById("search-form").addEventListener("submit", (event) => { event.preventDefault(); search(); });
-input.addEventListener("keydown", (event) => {
- if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); move(event.key === "ArrowDown" ? 1 : -1); }
- if (event.key === "Enter" && document.querySelector('#search-results a[aria-selected="true"]')) { event.preventDefault(); activate(); }
-});
-document.addEventListener("keydown", (event) => {
- if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "k") {
-  event.preventDefault();
-  if (dialog.open) dialog.close(); else open.click();
- }
-});
-document.addEventListener("board-index-change", () => { if (dialog.open) search(); });
-`;
-}

package/src/client/page/sidebarScript.ts

@@ -1,86 +0,0 @@
-export function sidebarScript(): string {
-	return `
-export const revealCurrentFile = (expand = false) => {
-  const tree = document.getElementById("files");
-  const active = tree.querySelector('a[aria-current="page"]');
-  if (!active) return;
-  let folder = active.closest("details");
-  while (folder) {
-    if (expand) folder.open = true;
-    else if (!folder.open) return;
-    folder = folder.parentElement?.closest("details");
-  }
-  requestAnimationFrame(() => {
-    const bounds = tree.getBoundingClientRect();
-    const row = active.getBoundingClientRect();
-    if (row.top < bounds.top) tree.scrollTop += row.top - bounds.top;
-    else if (row.bottom > bounds.bottom) tree.scrollTop += row.bottom - bounds.bottom;
-  });
-};
-
-export const setupSidebar = (savedClosed) => {
-  const root = document.documentElement;
-  const sidebar = document.getElementById("sidebar");
-  const toggle = document.getElementById("sidebar-toggle");
-  const backdrop = document.getElementById("sidebar-backdrop");
-  const page = document.querySelector(".page");
-  const narrow = matchMedia("(max-width: 767px)");
-  let desktopClosed = savedClosed;
-  let drawerOpen = false;
-  const isOpen = () => narrow.matches ? drawerOpen : !desktopClosed;
-  const controls = () => [...sidebar.querySelectorAll('a[href], button:not(:disabled), summary')].filter((element) => element.getClientRects().length);
-  const render = () => {
-    const open = isOpen();
-    root.dataset.sidebar = open ? "open" : "closed";
-    sidebar.hidden = !open;
-    toggle.setAttribute("aria-expanded", String(open));
-    backdrop.hidden = !narrow.matches || !open;
-    page.inert = narrow.matches && open;
-    if (narrow.matches && open) {
-      sidebar.setAttribute("role", "dialog");
-      sidebar.setAttribute("aria-modal", "true");
-    } else {
-      sidebar.removeAttribute("role");
-      sidebar.removeAttribute("aria-modal");
-    }
-  };
-  const closeDrawer = () => {
-    if (!narrow.matches || !drawerOpen) return;
-    drawerOpen = false;
-    render();
-    toggle.focus({ preventScroll: true });
-  };
-  toggle.addEventListener("click", () => {
-    if (narrow.matches) drawerOpen = !drawerOpen;
-    else desktopClosed = !desktopClosed;
-    render();
-    if (narrow.matches && drawerOpen) {
-      sidebar.querySelector("a")?.focus({ preventScroll: true });
-    }
-    if (isOpen()) revealCurrentFile();
-    document.dispatchEvent(new Event("board-sidebar"));
-  });
-  backdrop.addEventListener("click", closeDrawer);
-  document.addEventListener("board-navigate", closeDrawer);
-  document.addEventListener("keydown", (event) => {
-    if (!narrow.matches || !drawerOpen || document.querySelector("dialog[open]")) return;
-    if (event.key === "Escape") { event.preventDefault(); closeDrawer(); }
-    if (event.key !== "Tab") return;
-    const items = controls();
-    const first = items[0];
-    const last = items.at(-1);
-    if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
-    else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
-  });
-  narrow.addEventListener("change", () => {
-    const focused = sidebar.contains(document.activeElement);
-    drawerOpen = false;
-    render();
-    if (focused && !isOpen()) toggle.focus({ preventScroll: true });
-    if (isOpen()) revealCurrentFile();
-  });
-  render();
-  return { closed: () => desktopClosed };
-};
-`;
-}

package/src/client/page/stateScript.ts

@@ -1,95 +0,0 @@
-import { formReadingScript } from "./formReadingScript.ts";
-
-export function pageStateScript(): string {
-	return `
-import { tick } from "/_board/ages.js";
-import { remember, swap } from "/_board/swap.js";
-import { renderDiagrams } from "/_board/diagrams.js";
-import { captureReading, reportMissingPassage, restoreReading } from "/_board/reading-state.js";
-import { revealCurrentFile } from "/_board/sidebar.js";
-import { refreshLibrary } from "/_board/library.js";
-import { navigationHtml } from "/_board/native.js";
-
-${formReadingScript()}
-export const syncInbox = () => {
-  const count = document.querySelector("#files [data-inbox-count]")?.dataset.inboxCount;
-  if (count !== undefined) for (const id of ["inbox-count", "inbox-topbar-count"]) {
-    const badge = document.getElementById(id);
-    if (badge) {
-      badge.textContent = count;
-      badge.setAttribute("aria-label", count + " waiting");
-    }
-  }
-  for (const id of ["inbox-open", "inbox-topbar"]) document.getElementById(id)?.setAttribute("aria-current", document.getElementById("doc").dataset.view === "inbox" ? "page" : "false");
-};
-
-export const applyNavigation = (data) => {
-  const files = document.getElementById("files");
-  const next = files.cloneNode(false);
-  next.innerHTML = navigationHtml(data);
-  swap(files, next);
-  syncInbox();
-  revealCurrentFile();
-  refreshLibrary();
-  tick();
-  document.dispatchEvent(new Event("board-index-change"));
-};
-
-export const capturePage = () => {
-  const page = document.implementation.createHTMLDocument(document.title);
-  for (const id of ["files", "doc", "breadcrumbs", "inbox-topbar"]) page.body.append(document.getElementById(id).cloneNode(true));
-  return { page, reading: captureReading() };
-};
-
-export const applyPage = (page, preserve = false) => {
-  const template = page.querySelector("#board-legacy-page");
-  if (template) page.body.replaceChildren(template.content.cloneNode(true));
-  const incoming = page.getElementById("doc");
-  const current = document.getElementById("doc");
-  if (!incoming || !page.getElementById("files")) return false;
-  const responseFocus = preserve ? captureResponseFocus() : null;
-  const reading = preserve ? captureReading() : null;
-  const cachedScheme = incoming.dataset.scheme;
-  if (preserve && (current.dataset.file === incoming.dataset.file || (current.dataset.identity && current.dataset.identity === incoming.dataset.identity))) {
-    if (current.dataset.view === "changes" && incoming.dataset.view === "changes") {
-      for (const selector of ["#changes-content", ".history-controls"]) {
-        const content = current.querySelector(selector);
-        if (content) incoming.querySelector(selector)?.replaceWith(content.cloneNode(true));
-      }
-    }
-    swap(current, incoming, true);
-  } else {
-    current.replaceWith(document.importNode(incoming, true));
-    remember(document.getElementById("doc"));
-  }
-  const doc = document.getElementById("doc");
-  doc.className = incoming.className;
-  doc.dataset.file = incoming.dataset.file;
-  if (incoming.dataset.identity) doc.dataset.identity = incoming.dataset.identity; else delete doc.dataset.identity;
-  doc.dataset.url = incoming.dataset.url;
-  if (incoming.dataset.view) doc.dataset.view = incoming.dataset.view; else delete doc.dataset.view;
-  document.getElementById("work-open")?.setAttribute("aria-current", doc.dataset.view === "work" ? "page" : "false");
-  document.getElementById("overview-open")?.setAttribute("aria-current", doc.dataset.view === "overview" ? "page" : "false");
-  document.getElementById("changes-open")?.setAttribute("aria-current", doc.dataset.view === "changes" ? "page" : "false");
-  document.getElementById("diagnostics-open")?.setAttribute("aria-current", doc.dataset.view === "diagnostics" ? "page" : "false");
-  document.getElementById("home-open")?.setAttribute("aria-current", location.pathname === "/" ? "page" : "false");
-  doc.dataset.scheme = document.documentElement.dataset.scheme;
-  if (!document.querySelector("[data-board-react-root]")) {
-  swap(document.getElementById("files"), page.getElementById("files"));
-  const inbox = page.getElementById("inbox-topbar");
-  if (inbox) document.getElementById("inbox-topbar").replaceWith(document.importNode(inbox, true));
-  syncInbox();
-  const crumbs = page.getElementById("breadcrumbs");
-  if (crumbs) document.getElementById("breadcrumbs").replaceChildren(...document.importNode(crumbs, true).childNodes);
-  }
-  revealCurrentFile(!preserve);
-  refreshLibrary(!preserve);
-  if (reading) restoreReading({ ...reading, selection: null }, false);
-  renderDiagrams(document, cachedScheme && cachedScheme !== doc.dataset.scheme ? "figure.diagram" : undefined);
-  reportMissingPassage();
-  document.dispatchEvent(new Event("board-page"));
-  restoreResponseFocus(responseFocus);
-  return true;
-};
-`;
-}

package/src/client/page/visualScript.ts

@@ -1,41 +0,0 @@
-export function visualScript(): string {
-	return `
-import { inspectImage, inspectDiagram, inspectAttachment } from "/_board/visual-viewport.js";
-let revision = 0;
-const refresh = () => {
-  revision++;
-  for (const image of document.querySelectorAll("#doc img[data-local-image]")) {
-    image.tabIndex = 0; image.setAttribute("role", "button"); image.setAttribute("aria-label", "Inspect image: " + (image.alt || "Local image"));
-    const url = new URL(image.dataset.localImage, location.href); url.searchParams.set("_wb", Date.now() + "-" + revision); image.src = url.href;
-    image.onerror = () => {
-      if (!image.isConnected || image.nextElementSibling?.hasAttribute("data-image-error")) return;
-      const error = document.createElement("span"); error.setAttribute("data-image-error", ""); error.setAttribute("role", "status");
-      error.textContent = "Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit."; image.after(error);
-    };
-    image.onload = () => { if (image.nextElementSibling?.hasAttribute("data-image-error")) image.nextElementSibling.remove(); };
-  }
-};
-export const diagramTools = (figure) => {
-  let tools = figure.querySelector("[data-visual-tools]");
-  if (!tools) {
-    tools = document.createElement("span"); tools.setAttribute("data-visual-tools", "");
-    const button = document.createElement("button"); button.type = "button"; button.textContent = "Inspect diagram"; button.setAttribute("data-inspect-diagram", "");
-    tools.append(button); figure.append(tools);
-  }
-  tools.querySelector("button").disabled = figure.dataset.state !== "drawn";
-};
-document.addEventListener("click", (event) => {
-  if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
-  const diagram = event.target.closest?.("#doc [data-inspect-diagram]");
-  if (diagram && !diagram.disabled) { inspectDiagram(diagram.closest("figure.diagram"), diagram); return; }
-  const link = event.target.closest?.('#doc a[href^="/_board/attachment/"]');
-  if (link && !link.hasAttribute("download") && (!link.target || link.target === "_self")) { event.preventDefault(); inspectAttachment(link); return; }
-  const image = event.target.closest?.("#doc img[data-local-image]"); if (image) { event.preventDefault(); inspectImage(image); }
-});
-document.addEventListener("keydown", (event) => {
-  if (["Enter", " "].includes(event.key) && event.target.matches?.("#doc img[data-local-image]")) { event.preventDefault(); inspectImage(event.target); }
-});
-document.addEventListener("board-page", refresh);
-refresh();
-`;
-}

package/src/client/page/visualViewport.ts

@@ -1,86 +0,0 @@
-export function visualViewport(): string {
-	return `
-const dialog = document.getElementById("visual-dialog");
-const content = document.getElementById("visual-content");
-const viewport = document.getElementById("visual-viewport");
-const status = document.getElementById("visual-status");
-const download = document.getElementById("visual-download");
-let scale = 100;
-let baseWidth = 0;
-let objectUrl;
-let origin;
-let images = [];
-let selected = -1;
-const id = (name) => document.getElementById("visual-" + name);
-const release = () => { if (objectUrl) URL.revokeObjectURL(objectUrl); objectUrl = undefined; };
-const zoom = (next) => {
-  scale = Math.max(25, Math.min(800, next));
-  content.style.width = baseWidth ? (baseWidth * scale / 100) + "px" : scale + "%";
-  id("actual").setAttribute("aria-pressed", baseWidth ? "true" : "false");
-  id("fit").textContent = scale === 100 && !baseWidth ? "Fit" : Math.round(scale) + "% · Fit";
-};
-const fit = () => { baseWidth = 0; zoom(100); viewport.scrollTop = 0; viewport.scrollLeft = 0; };
-const showImage = () => {
-  release(); fit(); status.textContent = "";
-  const source = images[selected];
-  const image = new Image(); image.alt = source.alt;
-  image.onerror = () => { if (content.contains(image)) { status.textContent = "Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit."; download.removeAttribute("href"); download.setAttribute("aria-disabled", "true"); } };
-  image.src = source.src; content.replaceChildren(image);
-  id("context").textContent = (source.alt || "Local image") + " · " + (selected + 1) + " of " + images.length + " · " + source.dataset.localImage + " · " + document.getElementById("doc").dataset.file;
-  download.href = source.dataset.localImage;
-  try { download.download = decodeURIComponent(new URL(download.href).pathname.split("/").at(-1)); } catch { download.download = "work-board-image"; }
-  download.setAttribute("aria-disabled", "false");
-  id("previous").disabled = selected <= 0; id("next").disabled = selected >= images.length - 1;
-};
-export const inspectImage = (source) => {
-  origin = source; images = [...document.querySelectorAll("#doc img[data-local-image]")]; selected = images.indexOf(source);
-  id("previous").hidden = false; id("next").hidden = false; showImage(); dialog.showModal();
-};
-export const inspectAttachment = (link) => {
-  origin = link; const source = { alt: link.textContent, dataset: { localImage: link.getAttribute("href") }, src: link.href };
-  images = [source]; selected = 0; id("previous").hidden = false; id("next").hidden = false; showImage(); dialog.showModal();
-};
-export const inspectDiagram = (figure, trigger) => {
-  const drawing = figure.querySelector(".diagram-svg svg");
-  if (!drawing) return;
-  origin = trigger; selected = -1; images = []; release(); fit(); status.textContent = "";
-  const copy = drawing.cloneNode(true); copy.style.maxWidth = "none"; copy.style.width = "100%"; copy.style.height = "auto";
-  content.replaceChildren(copy);
-  id("context").textContent = "Mermaid diagram · " + document.getElementById("doc").dataset.file + " · Current drawing";
-  id("previous").hidden = true; id("next").hidden = true;
-  const xml = new XMLSerializer().serializeToString(drawing);
-  objectUrl = URL.createObjectURL(new Blob([xml], { type: "image/svg+xml" }));
-  download.href = objectUrl; download.download = "work-board-diagram.svg"; dialog.showModal();
-  download.setAttribute("aria-disabled", "false");
-};
-const move = (offset) => { if (selected < 0) return; selected = Math.max(0, Math.min(images.length - 1, selected + offset)); showImage(); };
-id("previous").addEventListener("click", () => move(-1)); id("next").addEventListener("click", () => move(1));
-id("in").addEventListener("click", () => zoom(scale * 1.5)); id("out").addEventListener("click", () => zoom(scale / 1.5));
-id("fit").addEventListener("click", fit);
-id("actual").addEventListener("click", () => {
-  const graphic = content.firstElementChild;
-  const width = graphic?.naturalWidth || graphic?.viewBox?.baseVal?.width;
-  if (!width) { status.textContent = "Original dimensions unavailable; Fit and zoom remain available."; return; }
-  baseWidth = width; zoom(100); viewport.scrollTop = 0; viewport.scrollLeft = 0;
-});
-id("close").addEventListener("click", () => dialog.close());
-id("fullscreen").addEventListener("click", async () => {
-  try { if (document.fullscreenElement) await document.exitFullscreen(); else await id("stage").requestFullscreen(); }
-  catch { status.textContent = "Fullscreen is unavailable here; the scrollable viewer remains available."; }
-});
-dialog.addEventListener("keydown", (event) => {
-  if (event.key === "ArrowLeft" && selected >= 0) { event.preventDefault(); move(-1); }
-  if (event.key === "ArrowRight" && selected >= 0) { event.preventDefault(); move(1); }
-  if (event.key === "Escape") { event.preventDefault(); dialog.close(); }
-});
-dialog.addEventListener("close", async () => {
-  release(); content.replaceChildren();
-  if (dialog.contains(document.fullscreenElement)) await document.exitFullscreen().catch(() => {});
-  (origin?.isConnected ? origin : document.getElementById("doc")).focus();
-});
-document.addEventListener("board-page", () => {
-  if (dialog.open) { status.textContent = "Source updated. This preview is the drawing/image opened earlier; close and reopen to inspect or save the latest source."; download.removeAttribute("href"); download.setAttribute("aria-disabled", "true"); }
-});
-window.addEventListener("pagehide", () => { release(); if (dialog.open) dialog.close(); });
-`;
-}

package/src/client/react/AnswerFocus.tsx

@@ -1,10 +0,0 @@
-import { type ReactNode, useLayoutEffect } from "react";
-import { attachResponses } from "#client/entry.ts";
-export function AnswerFocus({ children, context }: { readonly children: ReactNode; readonly context: string }) {
-	useLayoutEffect(() => {
-		if (context) {
-			attachResponses();
-		}
-	}, [context]);
-	return <div>{children}</div>;
-}