@shivaedev/work-board 0.11.0 → 0.12.0

package/src/client/page/navigationScript.ts

@@ -0,0 +1,113 @@
+import { navigationHistoryScript } from "./navigationHistoryScript.ts";
+import { reactNavigationScript } from "./reactNavigationScript.ts";
+import { routeQueryOptions } from "./routeQuery.ts";
+
+export function navigationScript(): string {
+	return `
+import { applyPage, capturePage } from "/_board/page-state.js";
+import { reportMissingPassage, restoreReading, scrollToPassage } from "/_board/reading-state.js";
+import { refreshLibrary } from "/_board/library.js";
+import { revealCurrentFile } from "/_board/sidebar.js";
+import { session } from "/_board/native.js";
+
+let router;
+export const connectRouter = (control) => {
+  router = control;
+  router.before(() => saveCurrent(false));
+  let resolved = location.href;
+  router.subscribe(() => {
+    if (location.href === resolved) return;
+    const previous = new URL(resolved);
+    const target = new URL(location.href);
+    resolved = location.href;
+    const entry = history.state?.workBoard;
+    const id = entry?.id && entry.id !== displayedId ? entry.id : newId();
+    const hashOnly = target.pathname === previous.pathname && target.search === previous.search;
+    navigate(target, { ...entry, id, reading: id === entry?.id ? entry.reading : null }, hashOnly);
+  });
+};
+const open = async (target) => {
+  if (!router) return navigate(target);
+  const sameRoute = target.href === location.href;
+  saveCurrent();
+  await router.navigate(target.pathname + target.search + target.hash);
+  if (!sameRoute || target.href !== location.href) return;
+  const native = session(window);
+  const page = document.getElementById("doc").hasAttribute("data-react-document") ? native.api.document.query({ url: target.pathname + target.search }, ${JSON.stringify(routeQueryOptions)}) : native.api.page.query({ url: target.pathname + target.search }, ${JSON.stringify(routeQueryOptions)});
+  if (native.registry.get(page)._tag === "Failure") {
+    delete document.getElementById("doc").dataset.route;
+    native.registry.refresh(page);
+    await navigate(target, history.state?.workBoard ?? { id: newId() });
+  }
+};
+${navigationHistoryScript()}
+
+${reactNavigationScript()}
+
+const navigate = async (target, entry, hashOnly = false) => {
+  const route = target.pathname + target.search;
+  const sameDocument = route === displayedRoute;
+  if (!router) saveCurrent(!entry);
+  const id = entry?.id ?? newId();
+  if (!entry) history.pushState(stateWith(id), "", target);
+  else if (history.state?.workBoard?.id !== id) history.replaceState(stateWith(id, entry.reading), "");
+  const mine = ++version;
+  controller?.abort();
+  controller = new AbortController();
+  const status = document.getElementById("navigation-status");
+  status.textContent = "";
+  if (sameDocument && (!entry || hashOnly)) {
+    displayedId = id;
+    const reading = savedReading[id] ?? entry?.reading;
+    if (reading) restoreReading(reading);
+    else scrollToPassage(target.hash);
+    return;
+  }
+  const cached = cache.get(id);
+  if (cached && !router) {
+    applyPage(cached.page);
+    displayedId = id;
+    displayedRoute = route;
+    restoreReading(cached.reading);
+  } else status.textContent = "Opening document…";
+  try {
+    if (router) { await navigateReact(route, mine, id, entry, cached, target, status); return; }
+    const native = session(window);
+    const response = await native.read(native.api.page.query({ url: target.pathname + target.search }, ${JSON.stringify(routeQueryOptions)}), controller.signal);
+    const page = new DOMParser().parseFromString(response.html, "text/html");
+    if (mine !== version) return;
+    if (!applyPage(page, Boolean(cached))) throw new Error("Invalid page");
+    displayedId = id;
+    displayedRoute = route;
+    status.textContent = response.status < 400 ? "" : response.status === 404 ? "This document is missing or was renamed." : "This document could not be opened.";
+    if (response.status < 400) reportMissingPassage();
+    if (!cached) {
+      document.getElementById("doc").focus({ preventScroll: true });
+      if (savedReading[id] ?? entry?.reading) restoreReading(savedReading[id] ?? entry.reading);
+      else scrollToPassage(target.hash);
+    }
+  } catch (error) {
+    if (mine !== version || controller.signal.aborted) return;
+    status.textContent = "Could not open this document. Retry the link or reload the page.";
+  }
+};
+document.addEventListener("click", (event) => {
+  const link = event.target.closest?.("a[href]");
+  if (!link || event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey || link.hasAttribute("download") || (link.target && link.target !== "_self")) return;
+  const target = new URL(link.href, location.href);
+  if (target.origin !== location.origin || !(target.pathname === "/" || target.pathname === "/_board/diagnostics" || target.pathname === "/_board/handoff" || target.pathname === "/_board/result" || target.pathname === "/_board/respond" || target.pathname === "/_board/start" || target.pathname === "/_board/changes" || target.pathname === "/_board/inbox" || target.pathname === "/_board/overview" || target.pathname === "/_board/work" || target.pathname.startsWith("/_board/item/") || /\\.md$/i.test(target.pathname))) return;
+  event.preventDefault();
+  document.dispatchEvent(new Event("board-navigate"));
+  open(target);
+});
+document.addEventListener("submit", (event) => {
+  const form = event.target;
+  if (!form.matches?.("#work-filters")) return;
+  event.preventDefault();
+  const target = new URL(form.action, location.href);
+  target.search = new URLSearchParams([...new FormData(form)].map(([key, value]) => [key, String(value)])).toString();
+  open(target);
+});
+window.addEventListener("popstate", (event) => { if (!router) navigate(new URL(location.href), event.state?.workBoard ?? { id: newId() }); });
+`;
+}

package/src/client/page/preferencesScript.ts

@@ -0,0 +1,45 @@
+export function preferencesScript(): string {
+	return `
+import { setupSidebar } from "/_board/sidebar.js";
+const root = document.documentElement;
+const key = "work-board:appearance:" + root.dataset.workspace;
+const theme = document.getElementById("theme");
+const density = document.getElementById("density");
+const status = document.getElementById("preference-status");
+const system = matchMedia("(prefers-color-scheme: dark)");
+let saved = {};
+try {
+  const value = JSON.parse(localStorage.getItem(key) ?? "{}");
+  if (value !== null && typeof value === "object" && !Array.isArray(value)) saved = value;
+} catch {
+  status.textContent = "Preferences apply to this page only.";
+}
+
+theme.value = ["light", "dark"].includes(saved.theme) ? saved.theme : "system";
+density.value = saved.density === "compact" ? "compact" : "comfortable";
+const sidebar = setupSidebar(typeof saved.closed === "boolean" && saved.closed);
+
+const appearance = () => {
+  root.dataset.theme = theme.value;
+  root.dataset.scheme = theme.value === "system" ? (system.matches ? "dark" : "light") : theme.value;
+  root.dataset.density = density.value;
+  document.dispatchEvent(new Event("board-theme"));
+};
+
+const save = () => {
+  appearance();
+  try {
+    localStorage.setItem(key, JSON.stringify({ theme: theme.value, density: density.value, closed: sidebar.closed() }));
+    status.textContent = "";
+  } catch {
+    status.textContent = "Preferences apply to this page only.";
+  }
+};
+
+theme.addEventListener("change", save);
+density.addEventListener("change", save);
+document.addEventListener("board-sidebar", save);
+system.addEventListener("change", appearance);
+appearance();
+`;
+}

package/src/client/page/reactNavigationScript.ts

@@ -0,0 +1,30 @@
+export function reactNavigationScript(): string {
+	return `
+const navigateReact = async (route, mine, id, entry, cached, target, status) => {
+      await new Promise((resolve, reject) => {
+        const signal = controller.signal;
+        const check = () => { if (document.getElementById("doc")?.dataset.route === route) { cleanup(); resolve(); } };
+        const cancel = () => { cleanup(); reject(new Error("Navigation cancelled")); };
+        const cleanup = () => { document.removeEventListener("board-page", check); signal.removeEventListener("abort", cancel); };
+        document.addEventListener("board-page", check);
+        signal.addEventListener("abort", cancel, { once: true });
+        check();
+      });
+      if (mine !== version) return;
+      if (cached && document.querySelector("[data-legacy-main]") && document.getElementById("doc")?.dataset.view === "changes") applyPage(cached.page);
+      const doc = document.getElementById("doc");
+      displayedId = id;
+      displayedRoute = route;
+      const code = Number(doc.dataset.status ?? 200);
+      status.textContent = code < 400 ? "" : code === 404 ? "This document is missing or was renamed." : "Could not open this document. Retry the link or reload the page.";
+      if (code < 400) reportMissingPassage();
+      revealCurrentFile(true);
+      refreshLibrary(true);
+      doc.focus({ preventScroll: true });
+      const reading = savedReading[id] ?? entry?.reading ?? cached?.reading;
+      if (reading) restoreReading(reading);
+      else scrollToPassage(target.hash);
+      return;
+};
+`;
+}

package/src/client/page/readingStateScript.ts

@@ -0,0 +1,64 @@
+export function readingStateScript(): string {
+	return `
+const pathOf = (node, root) => {
+  const path = [];
+  for (; node !== root; node = node.parentNode) {
+    if (!node?.parentNode) return null;
+    path.unshift([...node.parentNode.childNodes].indexOf(node));
+  }
+  return path;
+};
+const nodeAt = (path, root) => path.reduce((node, index) => node?.childNodes[index], root);
+
+export const captureReading = () => {
+  const root = document.getElementById("doc");
+  const selection = document.getSelection();
+  const anchor = selection?.anchorNode && pathOf(selection.anchorNode, root);
+  const focus = selection?.focusNode && pathOf(selection.focusNode, root);
+  return {
+    scroll: [scrollX, scrollY],
+    sidebar: document.getElementById("sidebar").scrollTop,
+    context: root.querySelector(".item-context")?.open,
+    details: [...root.querySelectorAll("details:not(.item-context)")].map((detail) => detail.open),
+    selection: anchor && focus ? { anchor, focus, a: selection.anchorOffset, f: selection.focusOffset } : null,
+  };
+};
+
+export const restoreReading = (state, restoreDetails = true) => {
+  if (!state || !Array.isArray(state.scroll) || state.scroll.length !== 2 || !state.scroll.every(Number.isFinite)) return;
+  const root = document.getElementById("doc");
+  const context = root.querySelector(".item-context");
+  if (restoreDetails && context && typeof state.context === "boolean") context.open = state.context;
+  [...root.querySelectorAll("details:not(.item-context)")].forEach((detail, index) => {
+    if (restoreDetails && typeof state.details?.[index] === "boolean") detail.open = state.details[index];
+  });
+  document.getElementById("sidebar").scrollTop = state.sidebar ?? 0;
+  const saved = state.selection;
+  if (saved && Array.isArray(saved.anchor) && Array.isArray(saved.focus) && Number.isInteger(saved.a) && Number.isInteger(saved.f) && saved.a >= 0 && saved.f >= 0) {
+    const anchor = nodeAt(saved.anchor, root);
+    const focus = nodeAt(saved.focus, root);
+    const limit = (node) => node.nodeType === 3 ? node.textContent.length : node.childNodes.length;
+    if (anchor && focus) document.getSelection()?.setBaseAndExtent(anchor, Math.min(saved.a, limit(anchor)), focus, Math.min(saved.f, limit(focus)));
+  }
+  scrollTo(...state.scroll);
+};
+
+const passageAt = (hash) => {
+  try { return document.getElementById(decodeURIComponent(hash.slice(1))); } catch { return null; }
+};
+export const reportMissingPassage = () => {
+  if (!location.hash || !document.getElementById("favorite-toggle")) return;
+  const status = document.getElementById("navigation-status");
+  if (!passageAt(location.hash)) status.textContent = "This passage is no longer in the document.";
+  else if (status.textContent === "This passage is no longer in the document.") status.textContent = "";
+};
+export const scrollToPassage = (hash) => {
+  if (!hash) { scrollTo(0, 0); return; }
+  const target = passageAt(hash);
+  if (!target) { reportMissingPassage(); return; }
+  for (let parent = target.parentElement; parent; parent = parent.parentElement) if (parent.tagName === "DETAILS") parent.open = true;
+  target.scrollIntoView();
+  target.focus({ preventScroll: true });
+};
+`;
+}

package/src/client/page/resolvedDocumentFailure.ts

@@ -0,0 +1,6 @@
+import { Cause, Option, Predicate } from "effect";
+
+export function resolvedDocumentFailure(cause: Cause.Cause<unknown>): boolean {
+	const error = Option.getOrUndefined(Cause.findErrorOption(cause));
+	return Predicate.isTagged(error, "NotFound") || Predicate.isTagged(error, "Conflict");
+}

package/src/client/page/routeQuery.ts

@@ -0,0 +1,16 @@
+import type { BrowserClient } from "#client/client.ts";
+
+interface PageApi {
+	readonly document: Pick<BrowserClient["api"]["document"], "query">;
+	readonly page: Pick<BrowserClient["api"]["page"], "query">;
+}
+
+export const routeQueryOptions = { timeToLive: 60_000 };
+
+export function documentQuery(api: PageApi, url: string) {
+	return api.document.query({ url }, routeQueryOptions);
+}
+
+export function pageQuery(api: PageApi, url: string) {
+	return api.page.query({ url }, routeQueryOptions);
+}

package/src/client/page/runtime.ts

@@ -0,0 +1,111 @@
+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

@@ -0,0 +1,91 @@
+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/sidebarScript.ts

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,95 @@
+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;
+};
+`;
+}