@shivaedev/work-board 0.2.1 → 0.3.0

package/src/page/board.ts

@@ -1,7 +1,9 @@
 import { Effect } from "effect";
 import { type Board, countsOf, type Section } from "#render/board.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
 import { renderMarkdown } from "#render/markdown.ts";
 import { escapeHtml } from "./escape.ts";
+import { readingTools } from "./readingTools.ts";
 import { updated } from "./updated.ts";
 
 const counts = (board: Board): string =>
@@ -12,22 +14,30 @@ const counts = (board: Board): string =>
 type Render = (fragment: string) => ReturnType<typeof renderMarkdown>;
 
 const section = Effect.fn("WorkBoard.section")(function* ({ heading, items, notes }: Section, render: Render) {
-	const rendered = yield* Effect.forEach(items, (item) => Effect.map(render(item), (html) => `<article class="item">${html}</article>`));
+	const title = yield* render(heading);
 	const note = notes === "" ? "" : `<div class="notes">${yield* render(notes)}</div>`;
-	return `<section>${yield* render(heading)}${note}${rendered.join("")}</section>`;
+	const rendered = yield* Effect.forEach(items, (item) => Effect.map(render(item), (html) => `<article class="item">${html}</article>`));
+	return `<section>${title}${note}${rendered.join("")}</section>`;
 });
 
-export const boardHtml = Effect.fn("WorkBoard.boardHtml")(function* (board: Board, fallbackTitle: string, modified: number) {
+export const boardHtml = Effect.fn("WorkBoard.boardHtml")(function* (board: Board, fallbackTitle: string, modified: number, metadata = "") {
 	let fragments = 0;
+	const headings = documentHeadings();
 	const render: Render = (fragment) => {
 		fragments += 1;
-		return renderMarkdown(board.definitions === "" ? fragment : `${fragment}\n\n${board.definitions}`, `part-${fragments}-`);
+		return renderMarkdown(board.definitions === "" ? fragment : `${fragment}\n\n${board.definitions}`, {
+			file: fallbackTitle,
+			headings,
+			idPrefix: `part-${fragments}-`,
+		});
 	};
 	const title = board.title === "" ? `<h1>${escapeHtml(fallbackTitle)}</h1>` : yield* render(board.title);
 	const intro = board.intro === "" ? "" : `<div class="intro">${yield* render(board.intro)}</div>`;
 	const sections = yield* Effect.forEach(board.sections, (each) => section(each, render));
 	const footer = board.footer === "" ? "" : `<footer>${yield* render(board.footer)}</footer>`;
 	return [
+		readingTools(headings.entries),
+		metadata,
 		`<header class="board-head">${title}${intro}`,
 		`<p class="counts">${counts(board)}</p>`,
 		`<p class="meta">${updated(modified)}</p></header>`,

package/src/page/client.ts

@@ -1,6 +1,11 @@
 export const client = `
+import "/_board/saved-views.js";
+import "/_board/preferences.js";
+import "/_board/search.js";
 import { renderDiagrams } from "/_board/diagrams.js";
-import { remember, swap } from "/_board/swap.js";
+import { applyPage } from "/_board/page-state.js";
+import { pageVersion } from "/_board/navigation.js";
+import { remember } from "/_board/swap.js";
 
 const since = (modified) => {
   const seconds = Math.max(0, Math.round((Date.now() - modified) / 1000));
@@ -32,22 +37,23 @@ const show = () => {
 };
 
 const load = async () => {
+  const version = pageVersion();
+  const path = location.pathname + location.search;
   try {
-    const response = await fetch(location.pathname, { cache: "no-store" });
+    const response = await fetch(path, { cache: "no-store" });
     const next = new DOMParser().parseFromString(await response.text(), "text/html");
     const files = next.getElementById("files");
     const doc = next.getElementById("doc");
+    if (version !== pageVersion()) return;
     if (files === null || doc === null) {
       failure = "refresh failed (" + response.status + ")";
       return;
     }
     failure = "";
-    swap(document.getElementById("files"), files);
-    swap(document.getElementById("doc"), doc);
-    document.title = next.title;
+    applyPage(next, true);
     tick();
-    renderDiagrams(document);
   } catch {
+    if (version !== pageVersion()) return;
     failure = "refresh failed";
   }
 };
@@ -71,6 +77,7 @@ const refresh = async () => {
 const events = new EventSource("/events");
 events.addEventListener("ready", () => {
   connected = true;
+  document.dispatchEvent(new Event("board-index-change"));
   show();
   if (dropped) refresh();
   dropped = false;
@@ -80,11 +87,62 @@ const down = () => {
   dropped = true;
   show();
 };
-events.addEventListener("change", refresh);
+events.addEventListener("change", () => { refresh(); document.dispatchEvent(new Event("board-index-change")); });
 events.addEventListener("down", down);
 events.addEventListener("error", down);
 
+document.addEventListener("board-page", tick);
 tick();
 setInterval(tick, 5000);
 renderDiagrams(document);
 `;
+export const preferences = `
+const root = document.documentElement;
+const key = "work-board:appearance:" + root.dataset.workspace;
+const theme = document.getElementById("theme");
+const density = document.getElementById("density");
+const sidebar = document.getElementById("sidebar");
+const toggle = document.getElementById("sidebar-toggle");
+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";
+let closed = typeof saved.closed === "boolean" ? saved.closed : matchMedia("(max-width: 760px)").matches;
+
+const appearance = () => {
+  root.dataset.theme = theme.value;
+  root.dataset.scheme = theme.value === "system" ? (system.matches ? "dark" : "light") : theme.value;
+  root.dataset.density = density.value;
+  root.dataset.sidebar = closed ? "closed" : "open";
+  sidebar.hidden = closed;
+  toggle.setAttribute("aria-expanded", String(!closed));
+  document.dispatchEvent(new Event("board-theme"));
+};
+
+const save = () => {
+  appearance();
+  try {
+    localStorage.setItem(key, JSON.stringify({ theme: theme.value, density: density.value, closed }));
+    status.textContent = "";
+  } catch {
+    status.textContent = "Preferences apply to this page only.";
+  }
+};
+
+theme.addEventListener("change", save);
+density.addEventListener("change", save);
+toggle.addEventListener("click", () => {
+  closed = !closed;
+  save();
+});
+system.addEventListener("change", appearance);
+appearance();
+`;

package/src/page/criteriaEvidence.ts

@@ -0,0 +1,36 @@
+import { referenceTarget } from "#metadata/links.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { escapeHtml } from "./escape.ts";
+import { documentReference } from "./metadataLinks.ts";
+
+function evidenceFor(reference: string, model: MetadataModel): string {
+	const records = model.documents.flatMap(
+		(document) =>
+			document.parsed.fields.evidence?.flatMap((evidence, index) =>
+				evidence.criterion === reference ? [{ file: document.file, index, line: document.parsed.lines[`evidence.${index}.source`] }] : [],
+			) ?? [],
+	);
+	if (records.length === 0) {
+		return "<p>No recorded evidence naming this criterion. Acceptance is not established.</p>";
+	}
+	return `<p>${records.length} recorded ${records.length === 1 ? "claim" : "claims"}, not verified acceptance:</p><ul>${records.map((record) => `<li><a href="${escapeHtml(documentReference(record.file, model, `#recorded-evidence-${record.index}`))}">${escapeHtml(record.file)}${record.line === undefined ? "" : `:${record.line}`} — open recorded evidence</a></li>`).join("")}</ul>`;
+}
+
+export function criteriaEvidence(parsed: ParsedMetadata, model: MetadataModel): string {
+	const criteria = parsed.fields.criteria ?? [];
+	if (criteria.length === 0) {
+		return "";
+	}
+	return `<h3>Criteria and recorded evidence</h3><ul>${criteria
+		.map((criterion) => {
+			const unique = criteria.filter((candidate) => candidate.id === criterion.id).length === 1;
+			const reference = parsed.fields.id ? `${parsed.fields.id}#${criterion.id}` : "";
+			const evidence =
+				reference && referenceTarget(reference, model)
+					? evidenceFor(reference, model)
+					: "<p>Evidence association requires unique item/criterion IDs and a readable workspace. Acceptance is not established.</p>";
+			return `<li${unique ? ` id="criterion-${escapeHtml(criterion.id)}" tabindex="-1"` : ""}><b>${escapeHtml(criterion.id)}</b>: ${escapeHtml(criterion.text)}${evidence}</li>`;
+		})
+		.join("")}</ul>`;
+}

package/src/page/diagrams.ts

@@ -13,7 +13,7 @@ const load = async () => {
     securityLevel: "strict",
     theme: "base",
     themeVariables: {
-      darkMode: dark.matches,
+      darkMode: schemeNow() === "dark",
       background: token("--bg"),
       primaryColor: token("--surface"),
       primaryTextColor: token("--text"),
@@ -26,7 +26,8 @@ const load = async () => {
   return mermaid;
 };
 
-const schemeNow = () => (dark.matches ? "dark" : "light");
+const schemeNow = () => document.documentElement.dataset.scheme ?? (dark.matches ? "dark" : "light");
+let lastScheme = schemeNow();
 
 const draw = async (figure) => {
   const source = figure.querySelector(".diagram-source").textContent;
@@ -65,8 +66,15 @@ export const renderDiagrams = (root, selector = "figure.diagram:not([data-state=
   return Promise.all([...root.querySelectorAll(selector)].map(draw));
 };
 
-dark.addEventListener("change", () => {
+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);
 `;

package/src/page/document.ts

@@ -1,10 +1,13 @@
 import { Effect } from "effect";
 import type { MarkdownFile } from "#files/list.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
 import { renderMarkdown } from "#render/markdown.ts";
 import { escapeHtml } from "./escape.ts";
+import { readingTools } from "./readingTools.ts";
 import { updated } from "./updated.ts";
 
-export const documentHtml = Effect.fn("WorkBoard.documentHtml")(function* (source: string, file: MarkdownFile) {
-	const html = yield* renderMarkdown(source);
-	return `<p class="meta">${escapeHtml(file.path)} · ${updated(file.modified)}</p><article class="doc">${html}</article>`;
+export const documentHtml = Effect.fn("WorkBoard.documentHtml")(function* (source: string, file: MarkdownFile, metadata = "") {
+	const headings = documentHeadings();
+	const html = yield* renderMarkdown(source, { file: file.path, headings });
+	return `${readingTools(headings.entries)}<p class="meta">${escapeHtml(file.path)} · ${updated(file.modified)}</p>${metadata}<article class="doc">${html}</article>`;
 });

package/src/page/libraryScript.ts

@@ -0,0 +1,72 @@
+export function libraryScript(): string {
+	return `
+const root = document.documentElement;
+const key = "work-board:library:" + root.dataset.workspace;
+const library = document.getElementById("reading-library");
+let favorites = [];
+let recents = [];
+let notice = "";
+const valid = (items) => Array.isArray(items) ? items.filter((item) => item && typeof item.file === "string" && item.file !== "" && typeof item.title === "string") : [];
+try {
+  const saved = JSON.parse(localStorage.getItem(key) ?? "{}");
+  favorites = valid(saved?.favorites);
+  recents = valid(saved?.recents);
+} catch { notice = "Reading history applies to this page only."; }
+const save = () => {
+  try { localStorage.setItem(key, JSON.stringify({ favorites, recents })); notice = ""; }
+  catch { notice = "Reading history applies to this page only."; }
+};
+const hrefOf = (file) => "/" + file.split("/").map(encodeURIComponent).join("/");
+const list = (title, items) => {
+  const heading = document.createElement("h2");
+  heading.className = "nav-heading";
+  heading.textContent = title;
+  const ul = document.createElement("ul");
+  const available = new Set([...document.querySelectorAll("#files a")].map((a) => new URL(a.href).pathname));
+  for (const item of items) {
+    const li = document.createElement("li");
+    const a = document.createElement("a");
+    a.href = hrefOf(item.file);
+    a.textContent = item.title;
+    if (item.file === document.getElementById("doc").dataset.file) a.setAttribute("aria-current", "page");
+    if (!available.has(a.pathname)) {
+      a.textContent += " (missing)";
+      a.className = "missing";
+    }
+    li.append(a); ul.append(li);
+  }
+  return [heading, ul];
+};
+export const refreshLibrary = (visit = false) => {
+  const doc = document.getElementById("doc");
+  const title = doc.querySelector("h1")?.textContent.trim() || doc.dataset.file;
+  document.title = title ? title + " · Work Board" : "Work Board";
+  const active = document.querySelector('#files a[aria-current="page"]');
+  if (active) active.title = title;
+  const toggle = document.getElementById("favorite-toggle");
+  if (toggle) {
+    const saved = favorites.some((item) => item.file === doc.dataset.file);
+    toggle.disabled = false;
+    toggle.setAttribute("aria-pressed", String(saved));
+    toggle.textContent = saved ? "Remove favorite" : "Save favorite";
+    if (visit) {
+      recents = [{ file: doc.dataset.file, title }, ...recents.filter((item) => item.file !== doc.dataset.file)].slice(0, 10);
+      save();
+    }
+  }
+  const status = document.createElement("p");
+  status.className = "library-status";
+  status.setAttribute("role", "status");
+  status.textContent = notice;
+  library.replaceChildren(...(favorites.length ? list("Favorites", favorites) : []), ...(recents.length ? list("Recent documents", recents) : []), ...(notice ? [status] : []));
+  library.hidden = favorites.length === 0 && recents.length === 0 && notice === "";
+};
+document.addEventListener("click", (event) => {
+  if (!event.target.closest?.("#favorite-toggle")) return;
+  const doc = document.getElementById("doc");
+  const file = doc.dataset.file;
+  favorites = favorites.some((item) => item.file === file) ? favorites.filter((item) => item.file !== file) : [...favorites, { file, title: doc.querySelector("h1")?.textContent.trim() || file }];
+  save(); refreshLibrary();
+});
+`;
+}

package/src/page/metadata.ts

@@ -0,0 +1,40 @@
+import { identityUrl } from "#metadata/links.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { stateOf, viewUrl } from "#views/state.ts";
+import { backlinksHtml } from "./backlinksHtml.ts";
+import { escapeHtml } from "./escape.ts";
+import { metadataDetails } from "./metadataDetails.ts";
+
+export function metadataHtml(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
+	const backlinks = backlinksHtml(file, model);
+	const diagnostics = model.diagnostics.get(file) ?? parsed.diagnostics;
+	if (parsed.raw === undefined && diagnostics.length === 0) {
+		return backlinks;
+	}
+	const fields = parsed.fields;
+	const unique = model.unavailable.length === 0 && fields.id !== undefined && model.ids.get(fields.id)?.length === 1;
+	const problems =
+		diagnostics.length > 0
+			? `<div class="metadata-problems" role="status"><b>Source diagnostics</b><ul>${diagnostics.map((problem) => `<li>${escapeHtml(file)}:${problem.line} — ${escapeHtml(problem.message)}</li>`).join("")}</ul></div>`
+			: "";
+	const identity =
+		unique && fields.id
+			? `<a href="${identityUrl(fields.id)}">Item link: ${escapeHtml(fields.id)}</a>`
+			: `ID: ${escapeHtml(fields.id ?? "Not recorded")}`;
+	const details = metadataDetails(parsed, file, model);
+	const boardLink =
+		unique && fields.kind === "board" && fields.id
+			? `<p><a href="${escapeHtml(viewUrl(stateOf("/"), { board: fields.id }))}">View this board</a></p>`
+			: "";
+	return `<section class="work-meta" aria-label="Recorded work"><p class="metadata-summary">Recorded work · ${identity}${fields.status ? ` · ${escapeHtml(fields.status)}` : ""}${fields.owner ? ` · ${escapeHtml(fields.owner)}` : ""}</p>${fields.nextAction ? `<p>Next action: ${escapeHtml(fields.nextAction)}</p>` : ""}${boardLink}${problems}<details data-key="work-metadata"><summary>Work details and source</summary>${details}<p>Source: ${escapeHtml(file)}:${parsed.lines.id ?? 1}; prose starts at line ${parsed.bodyLine}.</p>${parsed.raw ? `<details data-key="frontmatter-source"><summary>Original frontmatter</summary><pre>${escapeHtml(parsed.raw)}</pre></details>` : ""}</details></section>${backlinks}`;
+}
+
+export const metadataStyles = `
+.work-meta{font-size:.9rem;margin:16px 0 24px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow-wrap:anywhere}
+.metadata-summary{font-weight:600;margin:0}.work-meta>p{margin-bottom:8px}.work-meta details{margin:0}.work-meta summary{color:var(--link)}
+.work-meta dl{display:grid;grid-template-columns:minmax(80px,auto) minmax(0,1fr);gap:4px 12px;margin:12px 0}.work-meta dt{color:var(--muted)}.work-meta dd{margin:0}
+.work-meta pre{max-height:300px;overflow:auto;margin-top:12px}.metadata-problems{color:var(--danger);margin:12px 0}.metadata-problems ul{margin:4px 0 12px;padding-left:20px}
+.work-context{font-size:.9rem;margin:12px 0 24px;padding:12px 16px;border:1px solid var(--border);border-radius:8px;overflow-wrap:anywhere}.work-context details{margin:0}.work-context ul{margin:12px 0}.work-context p{font-size:13px;color:var(--muted);margin:8px 0 0}
+[id^="recorded-evidence-"],[id^="criterion-"]{scroll-margin-top:20px}
+`;

package/src/page/metadataDetails.ts

@@ -0,0 +1,24 @@
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { relationshipLabel } from "#metadata/relationshipLabel.ts";
+import { criteriaEvidence } from "./criteriaEvidence.ts";
+import { escapeHtml } from "./escape.ts";
+import { referenceHtml, valueHtml } from "./metadataLinks.ts";
+import { recordedEvidence } from "./recordedEvidence.ts";
+
+export function metadataDetails(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
+	const fields = parsed.fields;
+	const details = [
+		`<dl><dt>Kind</dt><dd>${valueHtml(fields.kind)}</dd><dt>Status</dt><dd>${valueHtml(fields.status)}</dd><dt>Owner</dt><dd>${valueHtml(fields.owner)}</dd><dt>Next action</dt><dd>${valueHtml(fields.nextAction)}</dd></dl>`,
+		fields.relationships?.length
+			? `<h3>Relationships</h3><ul>${fields.relationships.map((link) => `<li>${escapeHtml(relationshipLabel(link.kind))}: ${referenceHtml(link.target, link.target, model)}</li>`).join("")}</ul>`
+			: "",
+		fields.items?.length
+			? `<h3>Declared board membership</h3><ul>${fields.items.map((id) => `<li>${referenceHtml(id, id, model)}</li>`).join("")}</ul>`
+			: "",
+
+		criteriaEvidence(parsed, model),
+		recordedEvidence(parsed, file, model),
+	].join("");
+	return details;
+}

package/src/page/metadataLinks.ts

@@ -0,0 +1,35 @@
+import { fileUrl } from "#files/url.ts";
+import { referenceTarget } from "#metadata/links.ts";
+import type { MetadataModel } from "#metadata/model.ts";
+import { sourceFile, sourceHref } from "#metadata/sourceLinks.ts";
+import { escapeHtml } from "./escape.ts";
+
+export function referenceHtml(label: string, target: string, model: MetadataModel): string {
+	const href = referenceTarget(target, model);
+	return href
+		? `<a href="${escapeHtml(href)}">${escapeHtml(label)}</a>`
+		: `<span>${escapeHtml(label)} (unresolved, ambiguous, or unavailable)</span>`;
+}
+
+export function sourceHtml(source: string, file: string, model: MetadataModel): string {
+	const href = sourceHref(source, file);
+	if (!href) {
+		return escapeHtml(source);
+	}
+	const target = sourceFile(source, file, model);
+	const missing = target && !model.documents.some((document) => document.file === target);
+	let problem = "";
+	if (missing) {
+		problem = model.unavailable.includes(target) ? " (source unavailable)" : " (missing Markdown source)";
+	}
+	return `<a href="${escapeHtml(href)}" rel="noreferrer">${escapeHtml(source)}</a>${problem}`;
+}
+
+export function documentReference(file: string, model: MetadataModel, hash = ""): string {
+	const id = model.documents.find((document) => document.file === file)?.parsed.fields.id;
+	return ((id ? referenceTarget(id, model) : undefined) ?? fileUrl(file)) + hash;
+}
+
+export function valueHtml(text: string | undefined): string {
+	return escapeHtml(text ?? "Not recorded");
+}

package/src/page/nav.ts

@@ -1,16 +1,15 @@
 import type { MarkdownFile } from "#files/list.ts";
+import { fileUrl } from "#files/url.ts";
 import { escapeHtml } from "./escape.ts";
 
 const nameOf = (path: string): string => path.slice(path.lastIndexOf("/") + 1).replace(/\.md$/u, "");
 
 const folderOf = (path: string): string => path.slice(0, Math.max(0, path.lastIndexOf("/")));
 
-const hrefOf = (path: string): string => `/${path.split("/").map(encodeURIComponent).join("/")}`;
-
 const link = (file: MarkdownFile, current: string): string => {
 	const here = file.path === current ? ' aria-current="page"' : "";
 	const age = `<span class="age short" data-modified="${file.modified}"></span>`;
-	return `<a href="${hrefOf(file.path)}"${here}>${escapeHtml(nameOf(file.path))}</a>${age}`;
+	return `<a href="${fileUrl(file.path)}"${here}>${escapeHtml(nameOf(file.path))}</a>${age}`;
 };
 
 const folder = (name: string, files: readonly MarkdownFile[], current: string): string => {
@@ -23,6 +22,8 @@ export const navHtml = (files: readonly MarkdownFile[], current: string, home: s
 	const ordered = [...files.filter((file) => file.path === home), ...files.filter((file) => file.path !== home)];
 	const folders = Map.groupBy(ordered, (file) => (file.path === home ? "" : folderOf(file.path)));
 	return [...folders]
-		.map(([name, grouped]) => (name === "" ? grouped.map((file) => `<span>${link(file, current)}</span>`).join("") : folder(name, grouped, current)))
+		.map(([name, grouped]) =>
+			name === "" ? `<ul>${grouped.map((file) => `<li>${link(file, current)}</li>`).join("")}</ul>` : folder(name, grouped, current),
+		)
 		.join("");
 };

package/src/page/navigationScript.ts

@@ -0,0 +1,103 @@
+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";
+
+const cache = new Map();
+const readingKey = "work-board:reading:" + document.documentElement.dataset.workspace;
+let savedReading = {};
+try {
+  const saved = JSON.parse(sessionStorage.getItem(readingKey) ?? "{}");
+  if (saved && typeof saved === "object" && !Array.isArray(saved)) savedReading = saved;
+} catch {}
+let count = 0;
+const newId = () => Date.now() + "-" + ++count;
+let displayedId = history.state?.workBoard?.id ?? newId();
+let version = 0;
+let controller;
+export const pageVersion = () => version;
+const stateWith = (id, reading = null) => ({ ...history.state, workBoard: { id, reading } });
+history.replaceState(stateWith(displayedId, history.state?.workBoard?.reading), "");
+history.scrollRestoration = "manual";
+document.getElementById("doc").dataset.scheme = document.documentElement.dataset.scheme;
+refreshLibrary(true);
+const initialReading = savedReading[displayedId] ?? history.state.workBoard.reading;
+requestAnimationFrame(() => {
+  if (initialReading) restoreReading(initialReading);
+  else scrollToPassage(location.hash);
+  reportMissingPassage();
+});
+
+const saveCurrent = (write = true) => {
+  const snapshot = capturePage();
+  cache.delete(displayedId);
+  cache.set(displayedId, snapshot);
+  delete savedReading[displayedId];
+  savedReading[displayedId] = snapshot.reading;
+  savedReading = Object.fromEntries(Object.entries(savedReading).slice(-30));
+  try { sessionStorage.setItem(readingKey, JSON.stringify(savedReading)); } catch {}
+  if (cache.size > 30) cache.delete(cache.keys().next().value);
+  if (write && history.state?.workBoard?.id === displayedId) history.replaceState(stateWith(displayedId, snapshot.reading), "");
+};
+window.addEventListener("pagehide", () => saveCurrent(false));
+
+const navigate = async (target, entry) => {
+  const sameDocument = document.getElementById("favorite-toggle") !== null && displayedId === history.state?.workBoard?.id && target.pathname === location.pathname && target.search === location.search;
+  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 (!entry && sameDocument) {
+    displayedId = id;
+    scrollToPassage(target.hash);
+    return;
+  }
+  const cached = cache.get(id);
+  if (cached) {
+    applyPage(cached.page);
+    displayedId = id;
+    restoreReading(cached.reading);
+  } else status.textContent = "Opening document…";
+  try {
+    const response = await fetch(target.pathname + target.search, { cache: "no-store", signal: controller.signal });
+    const page = new DOMParser().parseFromString(await response.text(), "text/html");
+    if (mine !== version) return;
+    if (!applyPage(page, Boolean(cached))) throw new Error("Invalid page");
+    displayedId = id;
+    status.textContent = response.ok ? "" : response.status === 404 ? "This document is missing or was renamed." : "This document could not be opened.";
+    if (response.ok) 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 || error.name === "AbortError") 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/work" || target.pathname.startsWith("/_board/item/")) || /\\.md$/i.test(target.pathname))) return;
+  event.preventDefault();
+  navigate(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();
+  navigate(target);
+});
+window.addEventListener("popstate", (event) => navigate(new URL(location.href), event.state?.workBoard ?? { id: newId() }));
+`;
+}

package/src/page/readingStateScript.ts

@@ -0,0 +1,61 @@
+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,
+    details: [...root.querySelectorAll("details")].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");
+  [...root.querySelectorAll("details")].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/page/readingStyles.ts

@@ -0,0 +1,28 @@
+export function readingStyles(): string {
+	return `
+.reading-tools { display: flex; align-items: start; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; font-size: 13px; }
+.reading-tools button[aria-pressed="true"] { background: var(--surface); border-color: var(--link); }
+.outline { margin: 0; min-width: 180px; max-width: 100%; }
+.outline > summary { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
+.outline nav { margin-top: 12px; padding: 0 12px; max-height: 40vh; overflow-y: auto; }
+.outline ol { padding-left: 18px; }
+.outline li { overflow-wrap: anywhere; }
+.outline li[data-depth="3"], .outline li[data-depth="4"] { margin-left: 12px; }
+.outline li[data-depth="5"], .outline li[data-depth="6"] { margin-left: 24px; }
+.heading-anchor { display: inline-block; margin-left: 8px; font-size: 0.7em; text-decoration: none; opacity: 0.35; }
+.heading-anchor::after { content: "#"; }
+.heading-anchor:hover, .heading-anchor:focus-visible { opacity: 1; }
+[id^="heading-"] { scroll-margin-top: 20px; }
+.reading-library { font-size: 13px; margin-bottom: 24px; }
+.reading-library[hidden] { display: none; }
+.reading-library ul { list-style: none; padding: 0 12px; margin: 0 0 20px; }
+.reading-library a { color: var(--sidebar-text); overflow-wrap: anywhere; }
+.reading-library a[aria-current="page"] { font-weight: 600; }
+.reading-library .missing { color: var(--sidebar-muted); }
+.library-status { padding: 0 12px; color: var(--sidebar-muted); }
+#navigation-status { color: var(--danger); overflow-wrap: anywhere; }
+#navigation-status:empty { display: none; }
+.bar:has(#navigation-status:not(:empty)) { flex-wrap: wrap; }
+#navigation-status:not(:empty) { flex-basis: 100%; }
+`;
+}