@shivaedev/work-board 0.2.0 → 0.3.0

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,28 +1,29 @@
-import type { MarkdownFile } from "../files/list.ts";
+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$/, "");
+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: ReadonlyArray<MarkdownFile>, current: string): string => {
+const folder = (name: string, files: readonly MarkdownFile[], current: string): string => {
 	const links = files.map((file) => `<li>${link(file, current)}</li>`).join("");
 	const open = files.some((file) => file.path === current) ? " open" : "";
 	return `<details data-key="folder:${escapeHtml(name)}"${open}><summary>${escapeHtml(name)}/ (${files.length})</summary><ul>${links}</ul></details>`;
 };
 
-export const navHtml = (files: ReadonlyArray<MarkdownFile>, current: string, home: string | undefined): string => {
+export const navHtml = (files: readonly MarkdownFile[], current: string, home: string | undefined): string => {
 	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%; }
+`;
+}

package/src/page/readingTools.ts

@@ -0,0 +1,12 @@
+import type { Heading } from "#render/documentHeadings.ts";
+import { escapeHtml } from "./escape.ts";
+
+export function readingTools(headings: readonly Heading[]): string {
+	const outline =
+		headings.length === 0
+			? ""
+			: `<details class="outline" data-key="outline"><summary>On this page</summary><nav aria-label="Document outline"><ol>${headings
+					.map(({ depth, id, title }) => `<li data-depth="${depth}"><a href="#${escapeHtml(id)}">${escapeHtml(title || "Section")}</a></li>`)
+					.join("")}</ol></nav></details>`;
+	return `<div class="reading-tools"><button id="favorite-toggle" type="button" aria-pressed="false" disabled>Save favorite</button>${outline}</div>`;
+}

package/src/page/recordedEvidence.ts

@@ -0,0 +1,12 @@
+import type { MetadataModel } from "#metadata/model.ts";
+import type { ParsedMetadata } from "#metadata/parse.ts";
+import { escapeHtml } from "./escape.ts";
+import { referenceHtml, sourceHtml, valueHtml } from "./metadataLinks.ts";
+
+export function recordedEvidence(parsed: ParsedMetadata, file: string, model: MetadataModel): string {
+	const records = parsed.fields.evidence ?? [];
+	if (records.length === 0) {
+		return "";
+	}
+	return `<h3>Recorded evidence</h3><p>Source claims — not independently verified. A recorded outcome does not establish human acceptance. Work Board does not check recorded revisions against the current workspace.</p><ul>${records.map((item, index) => `<li id="recorded-evidence-${index}" tabindex="-1">${sourceHtml(item.source, file, model)}<dl><dt>Recorded in</dt><dd>${escapeHtml(file)}:${parsed.lines[`evidence.${index}.source`] ?? parsed.lines.evidence ?? 1}</dd><dt>Criterion</dt><dd>${item.criterion ? referenceHtml(item.criterion, item.criterion, model) : "Not recorded"}</dd><dt>Checked revision</dt><dd>${valueHtml(item.checkedRevision)}</dd><dt>Observed time</dt><dd>${valueHtml(item.observedAt)}</dd><dt>Method</dt><dd>${valueHtml(item.method)}</dd><dt>Recorded outcome</dt><dd>${valueHtml(item.outcome)}</dd></dl></li>`).join("")}</ul>`;
+}

package/src/page/searchDialog.ts

@@ -0,0 +1,16 @@
+export const searchDialog = `<dialog id="search-dialog" aria-labelledby="search-title">
+<div class="search-header"><h2 id="search-title">Find work</h2><button type="button" id="search-close" aria-label="Close search">Close</button></div>
+<form id="search-form"><label for="search-query">Search documents, headings, and passages</label><input id="search-query" type="search" autocomplete="off" maxlength="200" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-controls="search-results"><button type="submit">Search</button></form>
+<p class="search-help">Ctrl/Cmd+K to open · ↑/↓ to choose · Enter to open · Escape to close</p>
+<p id="search-status" role="status"></p><ul id="search-results" role="listbox" aria-label="Search results"></ul>
+</dialog>`;
+
+export const searchStyles = `
+#search-dialog{width:min(680px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text)}
+#search-dialog::backdrop{background:rgb(0 0 0 / .45)}
+.search-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.search-header h2{margin:0;font-size:1.3rem}
+#search-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:16px}#search-form label{grid-column:1/-1}#search-query{min-width:0;width:100%;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font:inherit}
+.search-help{margin-top:12px}.search-help,#search-status{font-size:.85rem;color:var(--muted)}#search-results{list-style:none;padding:0;margin:0}
+#search-results a{display:block;padding:12px;border-radius:6px;text-decoration:none;overflow-wrap:anywhere}#search-results a[aria-selected="true"]{background:var(--surface);outline:2px solid var(--focus);outline-offset:-2px}
+#search-results strong,#search-results small,#search-results p{display:block}#search-results small{color:var(--muted);font-size:.8rem}#search-results p{margin:6px 0 0;font-size:.9rem}
+`;

package/src/page/searchResultsScript.ts

@@ -0,0 +1,63 @@
+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/page/searchScript.ts

@@ -0,0 +1,72 @@
+export function searchScript(): string {
+	return `
+import { activate, matchingCommands, move, showResults } from "/_board/search-results.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 response = await fetch("/_board/search?q=" + encodeURIComponent(query), { cache: "no-store", signal: controller.signal });
+  if (!response.ok) throw new Error("Search unavailable");
+  const body = await response.json();
+  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 || error.name === "AbortError") 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/page/shell.ts

@@ -1,12 +1,31 @@
+import { fileUrl } from "#files/url.ts";
 import { escapeHtml } from "./escape.ts";
+import { searchDialog } from "./searchDialog.ts";
 
-export const shell = (title: string, nav: string, main: string): string =>
+function location(file: string): string {
+	return file
+		.split("/")
+		.map((part) => `<span>${escapeHtml(part)}</span>`)
+		.join('<span class="separator">/</span>');
+}
+
+export const shell = (title: string, nav: string, main: string, workspace: string, board: boolean, identity?: string, view = false): string =>
 	[
-		'<!doctype html><html lang="en"><head><meta charset="utf-8">',
+		`<!doctype html><html lang="en" data-workspace="${escapeHtml(workspace)}"><head><meta charset="utf-8">`,
 		'<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="light dark">',
 		`<title>${escapeHtml(title)}</title>`,
 		'<link rel="stylesheet" href="/_board/style.css"><script type="module" src="/_board/client.js"></script>',
-		'</head><body><div class="page"><header class="bar">',
-		`<nav id="files" class="files">${nav}</nav><span id="live" class="live">connecting</span></header>`,
-		`<main id="doc">${main}</main></div></body></html>`,
+		'</head><body><a class="skip" href="#doc">Skip to content</a><div class="workspace">',
+		'<aside id="sidebar" class="sidebar"><a class="brand" href="/">work board<span>Local workspace</span></a>',
+		'<div id="reading-library" class="reading-library" hidden></div><h2 class="nav-heading">Project files</h2>',
+		`<nav id="files" class="files" aria-label="Project files">${nav}</nav></aside>`,
+		'<div class="page"><header class="bar"><button id="sidebar-toggle" type="button" aria-controls="sidebar" aria-expanded="true">Files</button>',
+		`<nav id="breadcrumbs" class="breadcrumbs" aria-label="File location"><a href="/">Workspace</a><span class="separator">/</span>${location(title)}</nav>`,
+		`<a id="work-open" class="work-open" href="/_board/work?view=board"${view ? ' aria-current="page"' : ""}>Work</a><button id="search-open" type="button" disabled aria-haspopup="dialog" aria-controls="search-dialog">Search <kbd>⌘/Ctrl K</kbd></button><span id="live" class="live" role="status">connecting</span><span id="navigation-status" role="status"></span></header>`,
+		'<div class="preferences" role="group" aria-label="Reading preferences">',
+		'<div class="preference"><label for="theme">Theme</label><select id="theme"><option value="system">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div>',
+		'<div class="preference"><label for="density">Density</label><select id="density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select></div>',
+		'<span id="preference-status" role="status"></span></div>',
+		`<main${view ? ' data-view="work"' : ""}${identity ? ` data-identity="${escapeHtml(identity)}"` : ""} id="doc" data-file="${escapeHtml(title)}" data-url="${escapeHtml(fileUrl(title))}" class="${board ? "board-view" : "document-view"}" tabindex="-1">${main}</main>`,
+		`</div></div>${searchDialog}</body></html>`,
 	].join("");

package/src/page/stateScript.ts

@@ -0,0 +1,48 @@
+export function pageStateScript(): string {
+	return `
+import { remember, swap } from "/_board/swap.js";
+import { renderDiagrams } from "/_board/diagrams.js";
+import { captureReading, reportMissingPassage, restoreReading } from "/_board/reading-state.js";
+import { refreshLibrary } from "/_board/library.js";
+
+export const capturePage = () => {
+  const page = document.implementation.createHTMLDocument(document.title);
+  for (const id of ["files", "doc", "breadcrumbs"]) page.body.append(document.getElementById(id).cloneNode(true));
+  return { page, reading: captureReading() };
+};
+
+export const applyPage = (page, preserve = false) => {
+  const incoming = page.getElementById("doc");
+  const current = document.getElementById("doc");
+  if (!incoming || !page.getElementById("files")) return false;
+  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))) {
+    swap(current, incoming);
+  } 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");
+  doc.dataset.scheme = document.documentElement.dataset.scheme;
+  swap(document.getElementById("files"), page.getElementById("files"));
+  const crumbs = page.getElementById("breadcrumbs");
+  if (crumbs) document.getElementById("breadcrumbs").replaceChildren(...document.importNode(crumbs, true).childNodes);
+  if (!preserve) {
+    document.querySelector('#files a[aria-current="page"]')?.closest("details")?.setAttribute("open", "");
+  }
+  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"));
+  return true;
+};
+`;
+}