@shivaedev/work-board 0.2.1 → 0.3.0

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;
+};
+`;
+}

package/src/page/style.ts

@@ -1,36 +1,12 @@
-const tokens = `
-:root {
-  color-scheme: light dark;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-  --bg: #ffffff; --surface: #f6f8fa; --text: #1f2328; --muted: #59636e; --border: #d1d9e0; --link: #0969da; --danger: #b3261e;
-}
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #1e1e1e; --surface: #272727; --text: #e8e8e8; --muted: #a8a8a8; --border: #3d3d3d; --link: #58a6ff; --danger: #ff8a80; }
-}
-`;
-
-const page = `
-body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
-a { color: var(--link); }
-.page { box-sizing: content-box; max-width: 72ch; margin: 0 auto; padding: 0 16px 64px; }
-.bar { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
-.files { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
-.files a { color: var(--text); text-decoration: none; }
-.files a:hover, .files a[aria-current="page"] { color: var(--link); text-decoration: underline; }
-.files details[open] { flex-basis: 100%; }
-.files summary { cursor: pointer; color: var(--muted); }
-.files ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--border); }
-.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; }
-.live { color: var(--muted); font: 12px/1.9 var(--mono); }
-.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
-.meta { color: var(--muted); font-size: 14px; margin: 0; }
-.meta .age { margin: 0; }
-`;
+import { workStyle } from "#views/workStyle.ts";
+import { metadataStyles } from "./metadata.ts";
+import { readingStyles } from "./readingStyles.ts";
+import { searchStyles } from "./searchDialog.ts";
+import { layout, theme } from "./workspaceStyles.ts";
 
 const prose = `
 h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.5em; }
-h1 { font-size: 1.9em; margin-top: 1em; }
+h1 { overflow-wrap: anywhere; font-size: 1.9em; margin-top: 1em; }
 h2 { font-size: 1.45em; }
 h3 { font-size: 1.15em; }
 h1 strong, h2 strong, h3 strong { font-weight: inherit; }
@@ -43,7 +19,8 @@ code { font: 0.875em var(--mono); background: var(--surface); padding: 0.1em 0.3
 pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
 pre code { background: none; padding: 0; font-size: 0.85em; }
 .shiki span { color: var(--shiki-light); }
-@media (prefers-color-scheme: dark) { .shiki span { color: var(--shiki-dark); } }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shiki span { color: var(--shiki-dark); } }
+:root[data-theme="dark"] .shiki span { color: var(--shiki-dark); }
 table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.925em; }
 th, td { text-align: left; vertical-align: top; padding: 6px 10px; border: 1px solid var(--border); }
 tr:nth-child(2n) td { background: var(--surface); }
@@ -59,9 +36,11 @@ const board = `
 .board-head .intro { color: var(--muted); }
 .counts { margin: 0; }
 .counts b { font-variant-numeric: tabular-nums; }
-.board section { margin-top: 2.2em; }
-.board section > h2 { margin: 0 0 0.2em; }
-.item, .notes { padding: 0.9em 0 0.1em; border-top: 1px solid var(--border); }
+.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space); margin-top: 2em; align-items: start; }
+.board section { min-width: 0; }
+.board section > h2 { margin: 0 0 0.8em; font-size: 1.1em; overflow-wrap: anywhere; }
+.item, .notes { padding: var(--card-space); margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow-wrap: anywhere; }
+.item > :last-child, .notes > :last-child { margin-bottom: 0; }
 .item > h3 { margin: 0 0 0.4em; }
 .item > h3 > code:first-child { background: none; padding: 0; margin-right: 0.6em; color: var(--muted); font-weight: 400; }
 footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.925em; }
@@ -76,4 +55,4 @@ figure.diagram[data-state="failed"]::after { content: attr(data-error); color: v
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
 `;
 
-export const style = tokens + page + prose + board + diagrams;
+export const style = theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle();

package/src/page/swap.ts

@@ -1,5 +1,5 @@
 export const swap = `
-const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV"]);
+const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV", "FORM", "SELECT", "LABEL", "ASIDE"]);
 
 const structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === "");
 
@@ -56,6 +56,8 @@ const matches = (a, b) => {
 };
 
 const patch = (current, incoming) => {
+  const selected = current.tagName === "SELECT" ? current.value : null;
+  const fallback = incoming.tagName === "SELECT" ? incoming.value : null;
   if (!structural(current) || !structural(incoming)) {
     current.replaceChildren(...incoming.childNodes);
     for (const child of current.children) remember(child);
@@ -83,6 +85,7 @@ const patch = (current, incoming) => {
     i++;
     j++;
   }
+  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;
 };
 
 const keysOf = (root) => {

package/src/page/workspaceStyles.ts

@@ -0,0 +1,79 @@
+export const layout = `
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
+a { color: var(--link); }
+button, select { font: inherit; color: inherit; }
+button, select, summary { cursor: pointer; }
+button, select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+.skip { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 8px 16px; background: var(--card); }
+.skip:focus { top: 8px; }
+.workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
+:root[data-sidebar="closed"] .workspace { grid-template-columns: minmax(0, 1fr); }
+.sidebar { --focus: #e2bc79; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: var(--space) 16px; background: var(--sidebar); color: var(--sidebar-text); }
+.sidebar[hidden] { display: none; }
+.brand { display: block; padding: 0 12px 28px; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; text-decoration: none; color: var(--sidebar-text); }
+.brand span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sidebar-muted); }
+.sidebar .nav-heading { margin: 0 12px 12px; font: 600 12px var(--sans); color: var(--sidebar-muted); }
+.files { font-size: 14px; }
+.files ul { list-style: none; margin: 0 0 10px; padding: 0; }
+.files li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 5px; }
+.files li:has(a[aria-current="page"]) { background: #385242; }
+.files a { flex: 1; min-width: 0; color: var(--sidebar-text); text-decoration: none; overflow-wrap: anywhere; }
+.files a:hover, .files a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
+.files details { margin: 8px 0; }
+.files summary { padding: 6px 10px; color: var(--sidebar-muted); overflow-wrap: anywhere; }
+.files details ul { margin-left: 14px; border-left: 1px solid var(--sidebar-border); }
+.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; white-space: nowrap; }
+.files .age { color: var(--sidebar-muted); margin: 0; flex-shrink: 0; }
+.page { min-width: 0; }
+.bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--space); border-bottom: 1px solid var(--border); font-size: 13px; }
+.bar button { flex-shrink: 0; }
+.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.breadcrumbs > span:not(.separator) { min-width: 0; }
+.separator { color: var(--muted); }
+.live { color: var(--muted); font: 12px/1.9 var(--mono); }
+.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
+.preferences { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px var(--space) 0; color: var(--muted); font-size: 12px; }
+.preference { display: flex; gap: 8px; align-items: center; }
+#preference-status:empty { display: none; }
+#doc { padding: var(--space) var(--space) 64px; min-width: 0; }
+.document-view { max-width: calc(72ch + 2 * var(--space)); margin-inline: auto; }
+.board-view { max-width: 1600px; margin-inline: auto; }
+.meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
+.meta .age { margin: 0; }
+@media (max-width: 760px) {
+  .workspace { grid-template-columns: minmax(0, 1fr); }
+  .sidebar { position: static; height: auto; max-height: 42vh; border-bottom: 1px solid var(--border); }
+  .brand { padding-bottom: 16px; }
+  .bar { flex-wrap: wrap; gap: 12px; }
+  .breadcrumbs { flex-basis: calc(100% - 100px); }
+  .live { margin-left: auto; }
+  .preferences { justify-content: flex-start; }
+  :root { --space: 18px; }
+}
+`;
+const light = `
+  color-scheme: light;
+  --bg: #f7f8f4; --surface: #edf1e7; --card: #ffffff; --text: #263c34; --muted: #596957;
+  --border: #d5dfd0; --link: #315f45; --danger: #a03024; --focus: #976323;
+  --sidebar: #203a30; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #4a624c;
+`;
+const dark = `
+  color-scheme: dark;
+  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;
+  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;
+  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;
+`;
+
+export const theme = `
+:root {
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --space: 24px; --card-space: 20px;
+  ${light}
+}
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ${dark} } }
+:root[data-theme="dark"] { ${dark} }
+:root[data-density="compact"] { --space: 16px; --card-space: 12px; }
+`;

package/src/render/documentHeadings.ts

@@ -0,0 +1,52 @@
+import { defineHastPlugin } from "satteri";
+
+export interface Heading {
+	readonly depth: number;
+	readonly id: string;
+	readonly title: string;
+}
+
+export function documentHeadings() {
+	const entries: Heading[] = [];
+	const used = new Set<string>();
+	const plugin = defineHastPlugin({
+		element: {
+			filter: ["h1", "h2", "h3", "h4", "h5", "h6"],
+			visit: (element, context) => {
+				if (element.properties.id !== undefined) {
+					return;
+				}
+				const title = context.textContent(element).trim();
+				const slug =
+					title
+						.normalize("NFKC")
+						.toLowerCase()
+						.replace(/[^\p{Letter}\p{Number}\s_-]/gu, "")
+						.trim()
+						.replace(/\s+/gu, "-") || "section";
+				const base = `heading-${slug}`;
+				let id = base;
+				for (let suffix = 2; used.has(id); suffix += 1) {
+					id = `${base}-${suffix}`;
+				}
+				used.add(id);
+				entries.push({ depth: Number(element.tagName.slice(1)), id, title });
+				return {
+					...element,
+					children: [
+						...element.children,
+						{
+							children: [],
+							properties: { ariaLabel: `Link to ${title || "section"}`, className: ["heading-anchor"], href: `#${id}` },
+							tagName: "a",
+							type: "element" as const,
+						},
+					],
+					properties: { ...element.properties, id, tabIndex: -1 },
+				};
+			},
+		},
+		name: "work-board-headings",
+	});
+	return { entries, plugin };
+}

package/src/render/documentLinks.ts

@@ -0,0 +1,19 @@
+import { defineHastPlugin } from "satteri";
+import { fileUrl } from "#files/url.ts";
+
+export function documentLinks(file: string) {
+	return defineHastPlugin({
+		element: {
+			filter: ["a"],
+			visit: (element) => {
+				const href = element.properties.href;
+				if (typeof href !== "string" || href.startsWith("#") || href.startsWith("/") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
+					return;
+				}
+				const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
+				return { ...element, properties: { ...element.properties, href: target.pathname + target.search + target.hash } };
+			},
+		},
+		name: "work-board-document-links",
+	});
+}

package/src/render/markdown.ts

@@ -1,16 +1,33 @@
 import { Effect } from "effect";
-import { markdownToHtml } from "satteri";
+import { type HastPluginInput, markdownToHtml } from "satteri";
 import { codeBlocks } from "./code.ts";
+import type { documentHeadings } from "./documentHeadings.ts";
+import { documentLinks } from "./documentLinks.ts";
 import { RenderFailed } from "./failed.ts";
 import { footnoteIds } from "./footnotes.ts";
 import { Highlighter } from "./highlighter.ts";
 
-export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, idPrefix = "") {
+export interface RenderOptions {
+	readonly file?: string;
+	readonly headings?: ReturnType<typeof documentHeadings>;
+	readonly idPrefix?: string;
+}
+
+export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, options: RenderOptions = {}) {
 	const highlighter = yield* Highlighter;
+	const plugins: HastPluginInput[] = [codeBlocks(highlighter)];
+	if (options.idPrefix !== undefined) {
+		plugins.push(footnoteIds(options.idPrefix));
+	}
+	if (options.file !== undefined) {
+		plugins.push(documentLinks(options.file));
+	}
+	if (options.headings !== undefined) {
+		plugins.push(options.headings.plugin);
+	}
 	const { html } = yield* Effect.tryPromise({
 		catch: (cause) => new RenderFailed({ cause }),
-		try: async () =>
-			markdownToHtml(source, { hastPlugins: idPrefix === "" ? [codeBlocks(highlighter)] : [codeBlocks(highlighter), footnoteIds(idPrefix)] }),
+		try: async () => markdownToHtml(source, { hastPlugins: plugins }),
 	});
 	return html;
 });

package/src/search/collector.ts

@@ -0,0 +1,44 @@
+import type { Element } from "hast";
+import { defineHastPlugin } from "satteri";
+import { fileUrl } from "#files/url.ts";
+import type { Entry } from "./entries.ts";
+
+function sourceLine(element: Element, first: number | undefined, length: number): { readonly line?: number } {
+	if (!element.position || first === undefined || element.position.start.line > length) {
+		return {};
+	}
+	return { line: first + element.position.start.line - 1 };
+}
+
+export function searchCollector(file: string, startLine: () => number | undefined, length: () => number) {
+	const entries: Entry[] = [];
+	let passage = "";
+	let label = file;
+	const plugin = defineHastPlugin({
+		element: {
+			filter: ["h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "li", "td", "th"],
+			visit: (element, context) => {
+				const text = context.textContent(element).replace(/\s+/gu, " ").trim();
+				if (!text || element.properties.id === "footnote-label") {
+					return;
+				}
+				const heading = element.tagName.startsWith("h") && element.tagName !== "th";
+				if (heading && typeof element.properties.id === "string") {
+					passage = element.properties.id;
+					label = text;
+				}
+				entries.push({
+					file,
+					href: fileUrl(file) + (passage ? `#${encodeURIComponent(passage)}` : ""),
+					kind: heading ? "heading" : "passage",
+					...sourceLine(element, startLine(), length()),
+					text,
+					title: label,
+				});
+			},
+		},
+		name: "work-board-search-text",
+	});
+
+	return { entries, plugin };
+}