@shivaedev/work-board 0.10.0 → 0.12.0

package/src/client/handoffs/form.ts

@@ -0,0 +1,41 @@
+import { Effect, Layer } from "effect";
+import * as Atom from "effect/unstable/reactivity/Atom";
+import { make } from "@shivaedev/effect-form/form.ts";
+import { type Handoff, HandoffInput } from "#browser/handoffs/schema.ts";
+import { fieldFeedback, type formOwner } from "#client/fieldFeedback.ts";
+import type { Draft } from "#client/responses/drafts.ts";
+import type { handoffFields } from "./fields.ts";
+
+export function handoffForm(
+	dom: HTMLFormElement,
+	fields: NonNullable<ReturnType<typeof handoffFields>>,
+	draft: Draft,
+	owner: ReturnType<typeof formOwner>,
+	onSubmit: (input: HandoffInput) => Promise<Handoff>,
+) {
+	const model = make(HandoffInput, {
+		initialValues: {
+			constraints: fields.constraints.value,
+			goal: fields.goal.value,
+			id: draft.id,
+			item: dom.dataset.item ?? "",
+			nextAction: fields.nextAction.value,
+			recipient: fields.recipient.value,
+			revision: draft.revision,
+			source: dom.dataset.source ?? "",
+		},
+		onSubmit: (input) => Effect.tryPromise({ catch: (error) => error, try: () => onSubmit(input) }),
+		runtime: Atom.runtime(Layer.empty),
+	});
+	const valid = fieldFeedback(model, owner, [
+		{ control: fields.constraints, name: "constraints" },
+		{ control: fields.goal, name: "goal" },
+		{ control: fields.nextAction, name: "nextAction" },
+		{ control: fields.recipient, name: "recipient" },
+		{ name: "id" },
+		{ name: "item" },
+		{ name: "revision" },
+		{ name: "source" },
+	]);
+	return { model, valid };
+}

package/src/client/handoffs/setup.ts

@@ -0,0 +1,142 @@
+import { Effect, Schema } from "effect";
+import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
+import { InternalServerError } from "@shivaedev/platform/errors/taxonomy.ts";
+import { formOwner } from "#client/fieldFeedback.ts";
+import { copyPrompts, preparedPrompt } from "#client/handoffs/copy.ts";
+import { handoffFields, restoreFields } from "#client/handoffs/fields.ts";
+import { draftSession } from "#client/responses/draftSession.ts";
+import { session } from "#client/session.ts";
+import { PublicationUncertain, ResponseRejection } from "#rpc/rejections.ts";
+import { handoffForm } from "./form.ts";
+
+function attach() {
+	const doc = document.getElementById("doc");
+	if (doc?.dataset.view !== "handoff") {
+		return;
+	}
+	copyPrompts(doc);
+	const form = doc.querySelector<HTMLFormElement>("#handoff-form");
+	if (!form || form.dataset.bound === "true") {
+		return;
+	}
+	const found = handoffFields(form);
+	const status = form.querySelector<HTMLParagraphElement>("#handoff-status");
+	const preview = form.querySelector<HTMLPreElement>("#handoff-preview-content");
+	const previewButton = form.querySelector<HTMLButtonElement>("#handoff-preview");
+	const submit = form.querySelector<HTMLButtonElement>("#handoff-submit");
+	const clear = form.querySelector<HTMLButtonElement>("#handoff-clear");
+	const prepared = form.querySelector<HTMLElement>("#handoff-prepared");
+	if (!(found && status && preview && previewButton && submit && clear && prepared)) {
+		return;
+	}
+	const fields = found;
+	form.dataset.bound = "true";
+	const revision = form.dataset.revision ?? "";
+	const question = form.dataset.question ?? "";
+	let storage: Storage | undefined;
+	try {
+		storage = window.localStorage;
+	} catch {
+		storage = undefined;
+	}
+	if (status.textContent?.includes("JavaScript is required")) {
+		status.textContent = "Draft ready. Review and preview before preparing the file.";
+	}
+	const drafts = draftSession(
+		`handoff:${form.dataset.item}`,
+		revision,
+		storage,
+		`work-board:drafts:${document.documentElement.dataset.workspace}`,
+		(message) => {
+			status.textContent = message;
+		},
+		"handoff",
+	);
+	let draft = drafts.current();
+	restoreFields(fields, draft);
+	const owner = formOwner(form);
+	let pending = draft;
+	const { model, valid } = handoffForm(form, fields, draft, owner, async (input) => {
+		const native = session(window);
+		const saved = await native.mutate(native.handoffs.prepareHandoff.run(input));
+		const cleared = drafts.saved(pending);
+		draft = drafts.current();
+		if (form.isConnected) {
+			status.textContent = `Prepared: ${saved.file}. Receipt: ${saved.handoff.state}; execution and acceptance remain separate.${cleared ? "" : " Your newer draft remains unsaved."}`;
+			preparedPrompt(prepared, saved.id, saved.prompt);
+		}
+		return saved;
+	});
+	function save() {
+		model.change("recipient", fields.recipient.value);
+		model.change("constraints", fields.constraints.value);
+		model.change("goal", fields.goal.value);
+		model.change("nextAction", fields.nextAction.value);
+		const values = model.values.value;
+		draft = drafts.update({
+			author: values.recipient,
+			body: JSON.stringify({ constraints: values.constraints, goal: values.goal, nextAction: values.nextAction }),
+		});
+	}
+	form.addEventListener(
+		"input",
+		() => {
+			save();
+			preview.hidden = true;
+			submit.disabled = true;
+		},
+		{ signal: owner.signal },
+	);
+	previewButton.disabled = false;
+	clear.disabled = false;
+	clear.addEventListener("click", drafts.clear, { signal: owner.signal });
+	previewButton.addEventListener(
+		"click",
+		() => {
+			save();
+			draft = drafts.update({
+				id: draft.revision === revision && (!draft.question || draft.question === question) ? draft.id : `handoff.${crypto.randomUUID()}`,
+				question,
+				revision,
+			});
+			model.change("id", draft.id);
+			model.change("revision", revision);
+			const input = model.values.value;
+			preview.textContent = `New file: handoffs/${input.id}.md\nPrepared time and reviewed snapshot are assigned by the server.\n\n---\n${JSON.stringify({ handoff: { constraints: input.constraints, goal: input.goal, item: input.item, "next_action": input.nextAction, recipient: input.recipient, "reviewed_revision": input.revision, source: input.source, state: "requested" }, id: input.id, kind: "handoff" }, null, 2)}\n---\nThe complete reviewed source is preserved below the frontmatter.`;
+			preview.hidden = false;
+			submit.disabled = form.dataset.writable !== "true" || !valid();
+		},
+		{ signal: owner.signal },
+	);
+	form.addEventListener(
+		"submit",
+		async (event) => {
+			event.preventDefault();
+			if (submit.disabled || !valid() || !form.reportValidity()) {
+				return;
+			}
+			pending = draft;
+			submit.disabled = true;
+			previewButton.disabled = true;
+			status.textContent = "Pending: preparing the local handoff file…";
+			owner.registry.set(model.submit, undefined);
+			try {
+				await Effect.runPromise(AtomRegistry.getResult(owner.registry, model.submit, { suspendOnWaiting: true }));
+			} catch (error) {
+				if (form.isConnected) {
+					status.textContent = failureStatus(error);
+				}
+			}
+			previewButton.disabled = false;
+		},
+		{ signal: owner.signal },
+	);
+}
+function failureStatus(error: unknown) {
+	return `${Schema.is(ResponseRejection)(error) && !(error instanceof PublicationUncertain) && !(error instanceof InternalServerError) ? "Rejected" : "Uncertain"}: ${String(error)}. Draft retained; preview and retry.`;
+}
+export function setupHandoffs() {
+	document.addEventListener("board-page", attach);
+	window.addEventListener("pageshow", attach);
+	attach();
+}

package/src/client/legacyRuntime.ts

@@ -0,0 +1,11 @@
+export interface RouterBridge {
+	readonly before: (listener: () => void) => void;
+	readonly navigate: (url: string) => Promise<void>;
+	readonly subscribe: (listener: () => void) => void;
+}
+export async function legacyRuntime(): Promise<{ readonly connectRouter: (router: RouterBridge) => void }> {
+	const client = "/_board/client.js";
+	const navigation = "/_board/navigation.js";
+	await import(client);
+	return import(navigation);
+}

package/src/client/mockups/app.ts

@@ -0,0 +1,114 @@
+import { element } from "./element.ts";
+import { names, searchEntries } from "./sampleData.ts";
+import { renderWork, selectWork } from "./work.ts";
+
+let toastTimer: ReturnType<typeof setTimeout> | undefined;
+const searchDialog = element("#search-dialog", HTMLDialogElement);
+const searchInput = element("#search-input", HTMLInputElement);
+
+function navigate() {
+	const requested = location.hash.slice(1);
+	const screen = Object.hasOwn(names, requested) ? requested : "overview";
+	for (const section of document.querySelectorAll<HTMLElement>(".screen")) {
+		section.hidden = section.id !== screen;
+	}
+	for (const link of document.querySelectorAll<HTMLAnchorElement>("nav a")) {
+		const active = link.dataset.screen === screen;
+		link.classList.toggle("active", active);
+		if (active) {
+			link.setAttribute("aria-current", "page");
+		} else {
+			link.removeAttribute("aria-current");
+		}
+	}
+	element("#breadcrumb", HTMLElement).textContent = names[screen] ?? "Overview";
+	document.title = `${names[screen]} — Work Board vision`;
+	window.scrollTo(0, 0);
+}
+function notify(message: string) {
+	const toast = element("#toast", HTMLElement);
+	clearTimeout(toastTimer);
+	toast.textContent = message;
+	toast.hidden = false;
+	toastTimer = setTimeout(() => {
+		toast.hidden = true;
+	}, 5000);
+}
+function renderSearch() {
+	const query = searchInput.value.trim().toLowerCase();
+	const matches = searchEntries.filter((entry) => `${entry.title} ${entry.detail}`.toLowerCase().includes(query));
+	element("#search-results", HTMLElement).innerHTML =
+		matches
+			.map(
+				(entry) =>
+					`<a href="#${entry.screen}" ${entry.item ? `data-search-item="${entry.item}"` : ""}>${entry.title}<small>${entry.detail}</small></a>`,
+			)
+			.join("") || '<p class="small-note">No matches. Try “decision”, “navigation”, or “Atlas”.</p>';
+}
+function openSearch() {
+	renderSearch();
+	searchDialog.showModal();
+	searchInput.focus();
+}
+function respond(revisionRequested: boolean) {
+	const text = element("#direction", HTMLTextAreaElement).value.trim();
+	if (!text) {
+		element("#direction", HTMLTextAreaElement).focus();
+		notify("Add some direction before continuing.");
+		return;
+	}
+	const status = element("#decision-status", HTMLElement);
+	status.textContent = revisionRequested ? "Revision requested · demo" : "Option A selected · demo";
+	status.className = "tag green";
+	const result = element("#decision-result", HTMLElement);
+	result.textContent = revisionRequested
+		? "Demo: your feedback would return to Atlas with proposal revision 3 attached."
+		: "Demo: this direction would be recorded against proposal revision 3 and included in Atlas’s next handoff.";
+	result.hidden = false;
+	notify("Preview updated. No source files changed and no agent was contacted.");
+}
+window.addEventListener("hashchange", navigate);
+element("#search-launch", HTMLElement).addEventListener("click", openSearch);
+element("#close-search", HTMLElement).addEventListener("click", () => searchDialog.close());
+searchInput.addEventListener("input", renderSearch);
+document.addEventListener("keydown", (event) => {
+	if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+		event.preventDefault();
+		if (!searchDialog.open) {
+			openSearch();
+		}
+	}
+});
+element("#search-results", HTMLElement).addEventListener("click", (event) => {
+	const link = event.target instanceof Element ? event.target.closest("a") : null;
+	if (!link) {
+		return;
+	}
+	if (link.dataset.searchItem) {
+		selectWork(link.dataset.searchItem);
+	}
+	searchDialog.close();
+});
+for (const button of document.querySelectorAll<HTMLElement>("[data-artifact]")) {
+	button.addEventListener("click", () => {
+		for (const tab of document.querySelectorAll<HTMLElement>("[data-artifact]")) {
+			const active = tab === button;
+			tab.classList.toggle("selected", active);
+			tab.setAttribute("aria-selected", String(active));
+			element(`#artifact-${tab.dataset.artifact}`, HTMLElement).hidden = !active;
+		}
+	});
+}
+element("#approve", HTMLElement).addEventListener("click", () => respond(false));
+element("#revise", HTMLElement).addEventListener("click", () => respond(true));
+element("#send-feedback", HTMLElement).addEventListener("click", () => {
+	const input = element("#review-note", HTMLTextAreaElement);
+	if (!input.value.trim()) {
+		input.focus();
+		notify("Add feedback so the next pass has clear direction.");
+		return;
+	}
+	notify("Demo revision request prepared for Juniper. Nothing was sent or saved.");
+});
+renderWork();
+navigate();

package/src/client/mockups/element.ts

@@ -0,0 +1,7 @@
+export function element<E extends Element>(selector: string, kind: new () => E): E {
+	const found = document.querySelector(selector);
+	if (!(found instanceof kind)) {
+		throw new Error(`Missing prototype element: ${selector}`);
+	}
+	return found;
+}

package/src/client/mockups/sampleData.ts

@@ -0,0 +1,92 @@
+export interface Item {
+	readonly attention: boolean;
+	readonly destination: "brief" | "decision" | "evidence";
+	readonly id: string;
+	readonly next: string;
+	readonly note: string;
+	readonly owner: string;
+	readonly state: string;
+	readonly tag: string;
+	readonly title: string;
+}
+export const items: readonly Item[] = [
+	{
+		attention: true,
+		destination: "decision",
+		id: "WB–014",
+		next: "Record the scope decision",
+		note: "Two options are ready. Your direction sets the next handoff.",
+		owner: "Atlas",
+		state: "Up next",
+		tag: "Decision needed",
+		title: "Choose the first release boundary",
+	},
+	{
+		attention: false,
+		destination: "brief",
+		id: "WB–025",
+		next: "Define the read-side decision model",
+		note: "Keep the rationale connected to the work it changes.",
+		owner: "Atlas",
+		state: "Up next",
+		tag: "Planned",
+		title: "Give every decision a place",
+	},
+	{
+		attention: false,
+		destination: "brief",
+		id: "WB–018",
+		next: "Check unresolved and duplicate references",
+		note: "Link plans, decisions, and evidence without duplicating their source.",
+		owner: "Atlas",
+		state: "In progress",
+		tag: "Relationships",
+		title: "Connect the context",
+	},
+	{
+		attention: false,
+		destination: "brief",
+		id: "WB–028",
+		next: "Check focus, selection, and expanded details",
+		note: "A live update should leave the reader oriented.",
+		owner: "Juniper",
+		state: "In progress",
+		tag: "Live updates",
+		title: "Keep your place as work changes",
+	},
+	{
+		attention: true,
+		destination: "evidence",
+		id: "WB–021",
+		next: "Review clarity, focus, and contrast",
+		note: "Search across the project. Open a result beside the board. Keep its context within reach.",
+		owner: "Juniper",
+		state: "In review",
+		tag: "Review needed",
+		title: "Make work easy to find",
+	},
+	{
+		attention: false,
+		destination: "evidence",
+		id: "WB–023",
+		next: "Check the proposed artifact presentation",
+		note: "Screenshots and supporting files live beside the work they explain.",
+		owner: "Juniper",
+		state: "In review",
+		tag: "Evidence",
+		title: "A clear home for local artifacts",
+	},
+];
+export const names: Readonly<Record<string, string>> = {
+	brief: "Project brief",
+	decision: "Decisions",
+	evidence: "Evidence",
+	overview: "Overview",
+	work: "Work",
+};
+export const searchEntries: readonly { readonly detail: string; readonly item?: string; readonly screen: string; readonly title: string }[] = [
+	...items.map((item) => ({ detail: `${item.id} · ${item.state} · ${item.owner}`, item: item.id, screen: "work", title: item.title })),
+	{ detail: "Decision · Options and tradeoffs", screen: "decision", title: "Choose the shape of wave one" },
+	{ detail: "Artifacts · Keyboard · Source changes", screen: "evidence", title: "Navigation review evidence" },
+	{ detail: "Project brief · Principles · Local only", screen: "brief", title: "Work Board north star" },
+];

package/src/client/mockups/work.ts

@@ -0,0 +1,84 @@
+import { element } from "./element.ts";
+import { type Item, items } from "./sampleData.ts";
+
+let view = "board";
+let filter = "all";
+let selectedId = "WB–021";
+function tagClass(item: Item) {
+	if (item.id === "WB–014") {
+		return "amber";
+	}
+	return item.attention ? "green" : "neutral";
+}
+function card(item: Item) {
+	return `<button type="button" class="work-card ${item.id === selectedId ? "selected" : ""}" data-item="${item.id}" aria-pressed="${item.id === selectedId}"><span class="muted">${item.id}</span><strong>${item.title}</strong><p>${item.note}</p><div class="card-bottom"><span>${item.owner}</span><span class="tag ${tagClass(item)}">${item.tag}</span></div></button>`;
+}
+const destinationLabels = { brief: "Principles and direction", decision: "Scope proposal", evidence: "Supporting evidence" };
+function renderDetail() {
+	const item = items.find((entry) => entry.id === selectedId);
+	if (item === undefined) {
+		return;
+	}
+	element("#item-detail", HTMLElement).innerHTML =
+		`<p class="eyebrow">IN CONTEXT / ${item.id}</p><span class="tag ${tagClass(item)}">${item.tag}</span><h2>${item.title}</h2><p>${item.note}</p><dl class="detail-props"><div><dt>State</dt><dd>${item.state}</dd></div><div><dt>Owner</dt><dd>${item.owner}</dd></div><div><dt>Milestone</dt><dd>Wave 1</dd></div></dl><div class="detail-section"><h3>The next step</h3><p>${item.next}</p></div><div class="detail-section"><h3>Connected context</h3><a href="#brief">→ The project brief</a><a href="#${item.destination}">→ ${destinationLabels[item.destination]}</a></div><div class="detail-section"><p>Source: work/${item.id.toLowerCase().replace("–", "-")}.md</p><p class="small-note">Illustrative source path</p></div>`;
+}
+export function renderWork() {
+	const visible = items.filter((item) => filter === "all" || (filter === "attention" ? item.attention : item.owner === "Atlas"));
+	if (!visible.some((item) => item.id === selectedId)) {
+		const first = visible[0];
+		if (first === undefined) {
+			return;
+		}
+		selectedId = first.id;
+	}
+	const content = element("#work-content", HTMLElement);
+	if (view === "board") {
+		content.innerHTML = `<div class="kanban">${["Up next", "In progress", "In review"]
+			.map((state) => {
+				const group = visible.filter((item) => item.state === state);
+				return `<section class="lane" aria-label="${state}"><div class="lane-heading">${state}<span>${group.length}</span></div>${group.map(card).join("") || '<p class="empty-filter">No matching work.</p>'}</section>`;
+			})
+			.join("")}</div>`;
+	} else {
+		content.innerHTML = `<table class="work-table"><thead><tr><th>WORK ITEM</th><th>STATE</th><th>OWNER</th></tr></thead><tbody>${visible.map((item) => `<tr><td><button type="button" data-item="${item.id}" aria-pressed="${item.id === selectedId}"><span class="muted">${item.id}</span><br>${item.title}</button></td><td><span class="tag ${tagClass(item)}">${item.state}</span></td><td>${item.owner}</td></tr>`).join("")}</tbody></table>`;
+	}
+	renderDetail();
+}
+function updateChoice(kind: string, value: string) {
+	for (const button of document.querySelectorAll<HTMLElement>(`[data-${kind}]`)) {
+		const selected = button.dataset[kind] === value;
+		button.classList.toggle("selected", selected);
+		button.setAttribute("aria-pressed", String(selected));
+	}
+}
+element(".work-toolbar", HTMLElement).addEventListener("click", (event) => {
+	const button = event.target instanceof Element ? event.target.closest("button") : null;
+	if (!button) {
+		return;
+	}
+	if (button.dataset.view) {
+		view = button.dataset.view;
+		updateChoice("view", view);
+	}
+	if (button.dataset.filter) {
+		filter = button.dataset.filter;
+		updateChoice("filter", filter);
+	}
+	renderWork();
+});
+element("#work-content", HTMLElement).addEventListener("click", (event) => {
+	const button = event.target instanceof Element ? event.target.closest<HTMLButtonElement>("[data-item]") : null;
+	if (!button?.dataset.item) {
+		return;
+	}
+	selectedId = button.dataset.item;
+	renderWork();
+	element(`[data-item="${selectedId}"]`, HTMLButtonElement).focus({ preventScroll: true });
+});
+
+export function selectWork(id: string) {
+	selectedId = id;
+	filter = "all";
+	updateChoice("filter", filter);
+	renderWork();
+}

package/src/client/page/formReadingScript.ts

@@ -0,0 +1,25 @@
+export function formReadingScript(): string {
+	return `
+const captureResponseFocus = () => {
+  const control = document.activeElement;
+  if (!(control instanceof HTMLTextAreaElement || control instanceof HTMLInputElement && control.type === "text") || !control.closest("#response-form")) return null;
+  return {
+    name: control.name,
+    prompt: control.closest("[data-prompt]")?.dataset.prompt,
+    start: control.selectionStart,
+    end: control.selectionEnd,
+    direction: control.selectionDirection,
+  };
+};
+const restoreResponseFocus = (state) => {
+  if (!state) return;
+  const form = document.getElementById("response-form");
+  const control = state.prompt
+    ? [...(form?.querySelectorAll("[data-prompt]") ?? [])].find((field) => field.dataset.prompt === state.prompt)?.querySelector("textarea")
+    : form?.elements.namedItem(state.name);
+  if (!control) return;
+  control.focus({ preventScroll: true });
+  if (state.start !== null && state.end !== null && control.setSelectionRange) control.setSelectionRange(state.start, state.end, state.direction);
+};
+`;
+}

package/src/client/page/itemContextScript.ts

@@ -0,0 +1,20 @@
+export function itemContextScript(): string {
+	return `
+const contextIsWide = () => matchMedia("(min-width: 1100px)").matches;
+let contextWide = contextIsWide();
+let contextFile;
+const syncContexts = (reset = false) => {
+  const file = document.getElementById("doc").dataset.file;
+  for (const context of document.querySelectorAll(".item-context")) {
+    if (reset || file !== contextFile) context.open = contextWide;
+  }
+  contextFile = file;
+};
+syncContexts();
+window.addEventListener("resize", () => {
+  const wide = contextIsWide();
+  if (wide !== contextWide) { contextWide = wide; syncContexts(true); }
+});
+document.addEventListener("board-page", () => syncContexts());
+`;
+}

package/src/client/page/libraryScript.ts

@@ -0,0 +1,84 @@
+export function libraryScript(): string {
+	return `
+const root = document.documentElement;
+const key = "work-board:library:" + root.dataset.workspace;
+const library = document.getElementById("reading-library");
+const dialog = document.getElementById("library-dialog");
+const opener = document.getElementById("library-open");
+opener.disabled = false;
+opener.addEventListener("click", () => dialog.showModal());
+document.getElementById("library-close").addEventListener("click", () => dialog.close());
+dialog.addEventListener("close", () => opener.focus({ preventScroll: true }));
+dialog.addEventListener("click", (event) => {
+  if (event.target.closest?.("a[href]")) dialog.close();
+  if (event.target !== dialog) return;
+  const bounds = dialog.getBoundingClientRect();
+  if (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom) dialog.close();
+});
+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] : []));
+  if (favorites.length === 0 && recents.length === 0 && notice === "") library.textContent = "No recent documents yet.";
+};
+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/client/page/navigationHistoryScript.ts

@@ -0,0 +1,46 @@
+export function navigationHistoryScript(): string {
+	return `
+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 displayedRoute = location.pathname + location.search;
+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);
+revealCurrentFile(true);
+document.getElementById("home-open").setAttribute("aria-current", location.pathname === "/" ? "page" : "false");
+const initialReading = savedReading[displayedId] ?? history.state.workBoard.reading;
+requestAnimationFrame(() => {
+  if (initialReading) restoreReading(initialReading);
+  else scrollToPassage(location.hash);
+  reportMissingPassage();
+});
+
+const saveCurrent = (write = true) => {
+  if (router && document.getElementById("doc")?.dataset.route !== displayedRoute) return;
+  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));
+
+`;
+}