@shivaedev/work-board 0.15.0 → 0.17.0

package/src/client/react/PhoneNavigation.tsx

@@ -1,5 +1,6 @@
+import { useRouter } from "@tanstack/react-router";
 import { CalendarDays, Ellipsis, Flag, Search, Zap } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { Button } from "#client/react/components/ui/Button.tsx";
 import { Modal } from "./Modal.tsx";
 import type { MainLocation } from "./mainLocation.ts";
@@ -11,21 +12,25 @@ const icons = [CalendarDays, Flag, Zap];
 const TAB_CLASS =
 	"flex min-h-12 min-w-0 flex-col items-center justify-center gap-1 rounded-md border-0 bg-transparent p-0 text-foreground text-xs no-underline aria-[current=page]:bg-accent aria-[current=page]:text-primary";
 
-export function PhoneNavigation({ main, openSearch }: { readonly main: MainLocation; readonly openSearch: () => void }) {
-	const [more, setMore] = useState(false);
+export function PhoneNavigation({
+	main,
+	more,
+	onMoreChange,
+	openSearch,
+}: {
+	readonly main: MainLocation;
+	readonly more: boolean;
+	readonly onMoreChange: (open: boolean) => void;
+	readonly openSearch: () => void;
+}) {
+	const router = useRouter();
 	const narrow = useMedia("(max-width: 767px)");
 	useEffect(() => {
 		if (!narrow) {
-			setMore(false);
+			onMoreChange(false);
 		}
-	}, [narrow]);
-	useEffect(() => {
-		function close() {
-			setMore(false);
-		}
-		document.addEventListener("board-navigate", close);
-		return () => document.removeEventListener("board-navigate", close);
-	}, []);
+	}, [narrow, onMoreChange]);
+	useEffect(() => router.subscribe("onBeforeNavigate", () => onMoreChange(false)), [router, onMoreChange]);
 	return (
 		<>
 			<nav
@@ -50,19 +55,19 @@ export function PhoneNavigation({ main, openSearch }: { readonly main: MainLocat
 					aria-expanded={more}
 					aria-haspopup="dialog"
 					className={TAB_CLASS}
-					onClick={() => setMore(true)}
+					onClick={() => onMoreChange(true)}
 					type="button"
 				>
 					<Ellipsis aria-hidden="true" className="size-5" />
 					More
 				</button>
 			</nav>
-			<Modal className="phone-more" close={() => setMore(false)} id={shellIds.phoneMore} open={more} title={shellIds.phoneMoreTitle}>
+			<Modal className="phone-more" close={() => onMoreChange(false)} id={shellIds.phoneMore} open={more} title={shellIds.phoneMoreTitle}>
 				<div className="mb-3 flex items-center justify-between">
 					<h2 className="font-semibold" id={shellIds.phoneMoreTitle}>
 						More
 					</h2>
-					<Button onClick={() => setMore(false)} variant="ghost">
+					<Button onClick={() => onMoreChange(false)} variant="ghost">
 						Close
 					</Button>
 				</div>

package/src/client/react/ProjectionFrame.tsx

@@ -130,7 +130,7 @@ function projectionView(route: ProjectionRoute | RemainingRoute) {
 	if (route === "board") {
 		return "";
 	}
-	return route === "respond" ? "response" : route;
+	return route;
 }
 
 function failureStatus(missing: boolean, conflict: boolean) {

package/src/client/react/ReadingLibrary.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import { type ReactNode, useCallback, useLayoutEffect, useRef, useState } from "react";
 import { LibraryContext, restoreLibrary } from "#client/react/LibraryContext.ts";
 import { useMainLocation } from "./MainLocationContext.ts";
 import { Modal } from "./Modal.tsx";
@@ -36,7 +36,7 @@ export function ReadingLibrary({
 		},
 		[key],
 	);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		function sync() {
 			if (!page.route) {
 				return;
@@ -55,10 +55,6 @@ export function ReadingLibrary({
 			}
 		}
 		sync();
-		document.addEventListener("board-index-change", sync);
-		return () => {
-			document.removeEventListener("board-index-change", sync);
-		};
 	}, [save, page]);
 
 	return (

package/src/client/react/ReadingReadyContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export const ReadingReadyContext = createContext<{
+	readonly element: HTMLElement | null;
+	readonly report: (element: HTMLElement, ready: boolean) => void;
+}>({ element: null, report: () => undefined });
+
+export function readingReady(doc: HTMLElement, element: HTMLElement | null) {
+	const context = doc.querySelector(".item-context");
+	return !context || context === element;
+}

package/src/client/react/RemainingMain.tsx

@@ -4,7 +4,6 @@ import { HandoffPage } from "./HandoffPage.tsx";
 import { LibraryMain } from "./LibraryMain.tsx";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
-import { RespondPage } from "./RespondPage.tsx";
 import { ResultPage } from "./ResultPage.tsx";
 import type { RemainingRoute } from "./remainingRoute.ts";
 import type { ShellApi } from "./ShellApi.ts";
@@ -45,15 +44,6 @@ export function RemainingMain({
 			);
 		case "system":
 			return <SystemMain api={api} onPage={onPage} url={url} />;
-		case "respond":
-			return (
-				<ProjectionFrame
-					{...options}
-					atom={api.respond.query({ url }, routeQueryOptions)}
-					location={() => ({ file: "Respond", status: 200, view: "response" })}
-					render={(data) => <RespondPage data={data} />}
-				/>
-			);
 		case "handoff":
 			return (
 				<ProjectionFrame

package/src/client/react/ResultPage.tsx

@@ -1,5 +1,6 @@
 import type { ResultProjection } from "#browser/views/ResultProjection.ts";
 import { fileUrl } from "#files/url.ts";
+import { responseUrl } from "#responses/url.ts";
 import { DocumentMetadata } from "./DocumentMetadata.tsx";
 import { ReadingPanel } from "./ReadingPanel.tsx";
 import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
@@ -14,8 +15,7 @@ export function ResultPage({ data }: { readonly data: ResultProjection }) {
 	);
 	const links = actions.map((entry) => (
 		<li key={entry.id}>
-			<a href={`/_board/respond?item=${encodeURIComponent(document.identity ?? "")}&request=${encodeURIComponent(entry.id)}`}>Review {entry.id}</a> —{" "}
-			{entry.reason}
+			<a href={responseUrl(document.identity ?? "", entry.id)}>Review {entry.id}</a> — {entry.reason}
 		</li>
 	));
 	return (

package/src/client/react/SessionContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+import type { BrowserClient } from "#client/client.ts";
+
+export const SessionContext = createContext<BrowserClient | undefined>(undefined);

package/src/client/react/ShellApi.ts

@@ -9,7 +9,6 @@ export interface ShellApi {
 	readonly inbox: Pick<BrowserClient["api"]["inbox"], "query">;
 	readonly library: Pick<BrowserClient["api"]["library"], "query">;
 	readonly navigation: Pick<BrowserClient["api"]["navigation"], "query">;
-	readonly respond: Pick<BrowserClient["api"]["respond"], "query">;
 	readonly result: Pick<BrowserClient["api"]["result"], "query">;
 	readonly search: Pick<BrowserClient["api"]["search"], "query">;
 	readonly start: Pick<BrowserClient["api"]["start"], "query">;

package/src/client/react/SystemMain.tsx

@@ -1,6 +1,8 @@
+import { useContext } from "react";
 import { routeQueryOptions } from "#client/page/routeQuery.ts";
 import type { MainLocation } from "./mainLocation.ts";
 import { ProjectionFrame } from "./ProjectionFrame.tsx";
+import { SessionContext } from "./SessionContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
 import { SystemPage } from "./SystemPage.tsx";
 import { useDiagnosticsPolling } from "./useDiagnosticsPolling.ts";
@@ -15,7 +17,7 @@ export function SystemMain({
 	readonly url: string;
 }) {
 	const atom = api.diagnostics.query(undefined, routeQueryOptions);
-	useDiagnosticsPolling(atom, api.fleetItems.query(undefined, routeQueryOptions));
+	useDiagnosticsPolling(useContext(SessionContext), atom, api.fleetItems.query(undefined, routeQueryOptions));
 	return (
 		<ProjectionFrame
 			atom={atom}

package/src/client/react/ThemeContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ThemeContext = createContext("light");

package/src/client/react/TodayOptions.tsx

@@ -12,6 +12,7 @@ import { Popover } from "#client/react/components/ui/Popover.tsx";
 import { authorLabel } from "#client/responses/authorLabel.ts";
 import { saveFailure } from "#client/saveFailure.ts";
 import { fileUrl } from "#files/url.ts";
+import { responseUrl } from "#responses/url.ts";
 import { createResponse } from "./createResponse.ts";
 import { useFormClient } from "./FormContext.ts";
 import type { ShellApi } from "./ShellApi.ts";
@@ -19,8 +20,7 @@ import type { ShellApi } from "./ShellApi.ts";
 export function TodayOptions({ api, item }: { readonly api: ShellApi; readonly item: InboxProjection["you"][number] }) {
 	const query = useQuery(documentQuery(api, fileUrl(item.file)), { keepPreviousData: true });
 	const data = Option.getOrUndefined(query.data);
-	const requestId = new URL(item.href, "http://127.0.0.1").searchParams.get("request");
-	const request = data?.requests.find((entry) => entry.id === requestId && entry.open);
+	const request = data?.requests.find((entry) => entry.open && responseUrl(data.metadata.id ?? "", entry.id) === item.href);
 	return data
 		&& !item.problem
 		&& request?.preview

package/src/client/react/entry.tsx

@@ -1,4 +1,4 @@
-import { session } from "#client/entry.ts";
+import { session } from "#client/session.ts";
 import { mountBoard } from "./mountBoard.tsx";
 import "#client/react/entry.css";
 

package/src/client/react/loadBoardPage.ts

@@ -17,7 +17,7 @@ export async function loadBoardPage({
 	location,
 	abortController,
 }: Pick<LoaderFnContext, "location" | "abortController"> & { readonly context: { readonly shell?: RouterShell } }) {
-	redirectRetired(location.pathname);
+	redirectLegacy(location.pathname, location.searchStr);
 	if (!shell) {
 		return undefined;
 	}
@@ -25,7 +25,6 @@ export async function loadBoardPage({
 	const url = location.pathname + location.searchStr;
 	try {
 		const navigation = await loadQuery(registry, navigationQuery(api), { abortController });
-		await redirectResponse(shell, url, location.pathname, abortController);
 		const projection = projectionRoute(location.pathname, navigation.home);
 		if (projection) {
 			await loadProjection(registry, api, projection, url, abortController);
@@ -55,22 +54,14 @@ export async function loadBoardPage({
 	}
 }
 
-async function redirectResponse({ api, registry }: RouterShell, url: string, pathname: string, abortController: AbortController) {
-	if (pathname !== "/_board/respond") {
-		return;
-	}
-	const response = await loadRemaining(registry, api, "respond", url, abortController);
-	if (response && "request" in response) {
-		const item = response.document.identity ?? response.request.preview?.item ?? "";
-		throw redirect({ href: `/_board/item/${encodeURIComponent(item)}/#answer-card-${encodeURIComponent(response.request.id)}`, replace: true });
-	}
-}
-
 function mustRethrow(controller: AbortController, error: unknown) {
 	return controller.signal.aborted || isRedirect(error);
 }
 
-function redirectRetired(pathname: string) {
+function redirectLegacy(pathname: string, search: string) {
+	if (pathname === "/_board/respond") {
+		throw redirect({ href: pathname + search, reloadDocument: true });
+	}
 	const retired: Readonly<Record<string, string>> = {
 		"/_board/changes": "/_board/library?view=recently-changed",
 		"/_board/diagnostics": "/_board/system",

package/src/client/react/loadRemaining.ts

@@ -22,8 +22,6 @@ export function loadRemaining(
 				loadQuery(registry, api.diagnostics.query(undefined, routeQueryOptions), { abortController }),
 				loadQuery(registry, api.fleetItems.query(undefined, routeQueryOptions), { abortController }),
 			]);
-		case "respond":
-			return loadQuery(registry, api.respond.query({ url }, routeQueryOptions), { abortController });
 		case "handoff":
 			return loadQuery(registry, api.handoff.query({ url }, routeQueryOptions), { abortController });
 		case "result":

package/src/client/react/navigationLocation.ts

@@ -1,3 +1,4 @@
+import type { AnyRouter } from "@tanstack/react-router";
 import { readingEntry } from "#client/react/storedReadings.ts";
 
 export function navigationFailure(status: number) {
@@ -25,3 +26,14 @@ export function sameReadingLocation(
 ) {
 	return previous.route === next.route && previous.id === next.id && previous.hash === next.hash;
 }
+
+export function recordEntry(router: AnyRouter, route: string, id: string, native: boolean) {
+	if (!native) {
+		return;
+	}
+	router.history.flush?.();
+	if (window.location.pathname + window.location.search !== route || window.history.state?.workBoard?.id === id) {
+		return;
+	}
+	window.history.replaceState({ ...window.history.state, workBoard: { id } }, "");
+}

package/src/client/react/pageQueries.ts

@@ -29,9 +29,6 @@ export function pageQueries(api: ShellApi, kind: string, url: string): readonly
 	if (kind === "board") {
 		return [api.board.query({ url }, routeQueryOptions)];
 	}
-	if (kind === "respond") {
-		return [api.respond.query({ url }, routeQueryOptions)];
-	}
 	if (kind === "handoff") {
 		return [api.handoff.query({ url }, routeQueryOptions)];
 	}

package/src/client/react/readerLink.ts

@@ -2,7 +2,7 @@ export function readerLink(target: URL) {
 	return (
 		target.origin === location.origin
 		&& (target.pathname === "/"
-			|| /^\/_board\/(?:library|goals|system|diagnostics|handoff|result|respond|start|changes|inbox|overview|work)$/u.test(target.pathname)
+			|| /^\/_board\/(?:library|goals|system|diagnostics|handoff|result|start|changes|inbox|overview|work)$/u.test(target.pathname)
 			|| target.pathname.startsWith("/_board/item/")
 			|| /\.md$/iu.test(target.pathname))
 	);

package/src/client/react/remainingRoute.ts

@@ -8,8 +8,6 @@ export function remainingRoute(pathname: string) {
 			return "system";
 		case "/_board/start":
 			return "start";
-		case "/_board/respond":
-			return "respond";
 		case "/_board/handoff":
 			return "handoff";
 		case "/_board/result":

package/src/client/react/scheduleReading.ts

@@ -9,18 +9,10 @@ export function scheduleReading(
 	setStatus: (status: string) => void,
 	focus: boolean,
 ) {
-	let restored = false;
 	function restore() {
-		if (restored || !active()) {
-			document.removeEventListener("board-reading-ready", restore);
+		if (!active()) {
 			return;
 		}
-		const context = doc.querySelector<HTMLElement>(".item-context");
-		if (context && context.dataset.readingReady !== "true") {
-			return;
-		}
-		restored = true;
-		document.removeEventListener("board-reading-ready", restore);
 		if (focus && !document.activeElement?.closest("[data-response-form], #response-form, #handoff-form")) {
 			doc.focus({ preventScroll: true });
 		}
@@ -41,6 +33,5 @@ export function scheduleReading(
 			}
 		});
 	}
-	document.addEventListener("board-reading-ready", restore);
 	requestAnimationFrame(restore);
 }

package/src/client/react/useAppearance.ts

@@ -37,7 +37,6 @@ export function useAppearance() {
 		if (doc) {
 			doc.dataset.scheme = scheme;
 		}
-		document.dispatchEvent(new Event("board-theme"));
 	}, [value.theme, value.density, scheme]);
 	function change(next: Partial<Pick<typeof value, "closed" | "density" | "theme">>) {
 		const appearance = { closed: valueRef.current.closed, density: valueRef.current.density, theme: valueRef.current.theme, ...next };
@@ -50,6 +49,6 @@ export function useAppearance() {
 		valueRef.current = { ...appearance, notice };
 		setValue(valueRef.current);
 	}
-	return { ...value, change };
+	return { ...value, change, scheme };
 }
-export type AppearanceControls = ReturnType<typeof useAppearance>;
+export type AppearanceControls = Omit<ReturnType<typeof useAppearance>, "scheme">;

package/src/client/react/useBoardNavigation.ts

@@ -1,23 +1,27 @@
 import { useRouter } from "@tanstack/react-router";
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import type { RouterShell } from "#client/react/loadBoardPage.ts";
 import { useMainLocation } from "#client/react/MainLocationContext.ts";
-import { currentEntry, navigationFailure, readingKey, sameReadingLocation } from "#client/react/navigationLocation.ts";
+import { currentEntry, navigationFailure, readingKey, recordEntry, sameReadingLocation } from "#client/react/navigationLocation.ts";
+import { ReadingReadyContext, readingReady } from "#client/react/ReadingReadyContext.ts";
 import { readerLink } from "#client/react/readerLink.ts";
 import { captureReading } from "#client/react/readingState.ts";
 import { retryPage } from "#client/react/retryPage.ts";
 import { scheduleReading } from "#client/react/scheduleReading.ts";
 import { readingEntry, storedReadings } from "#client/react/storedReadings.ts";
 
-export function useBoardNavigation(shell: RouterShell) {
+export function useBoardNavigation(shell: RouterShell, onCurrentDestination?: () => void) {
 	const router = useRouter();
 	const main = useMainLocation();
+	const { element } = useContext(ReadingReadyContext);
+	const readyRef = useRef(element);
 	const mainRef = useRef(main);
 	const pageRef = useRef<(() => void) | undefined>(undefined);
 	useEffect(() => {
 		mainRef.current = main;
+		readyRef.current = element;
 		pageRef.current?.();
-	}, [main]);
+	}, [main, element]);
 	const [status, setStatus] = useState("");
 	useEffect(() => {
 		const readings = storedReadings();
@@ -42,7 +46,7 @@ export function useBoardNavigation(shell: RouterShell) {
 			const location = router.state.resolvedLocation ?? router.state.location;
 			const nextRoute = location.pathname + location.searchStr;
 			const doc = document.getElementById("doc");
-			if (!doc || mainRef.current.route !== nextRoute) {
+			if (!doc || mainRef.current.route !== nextRoute || !readingReady(doc, readyRef.current)) {
 				return;
 			}
 			const previousFailure = failure;
@@ -69,8 +73,10 @@ export function useBoardNavigation(shell: RouterShell) {
 		}
 		async function open(target: URL) {
 			save();
-			document.dispatchEvent(new Event("board-navigate"));
 			const url = target.pathname + target.search + target.hash;
+			if (url === router.state.location.href) {
+				onCurrentDestination?.();
+			}
 			if (
 				url === router.state.location.href
 				&& mainRef.current.route === target.pathname + target.search
@@ -130,17 +136,6 @@ export function useBoardNavigation(shell: RouterShell) {
 			pageRef.current = undefined;
 			window.removeEventListener("pagehide", save);
 		};
-	}, [router, shell.api, shell.registry, shell.reading, shell.client]);
+	}, [router, shell.api, shell.registry, shell.reading, shell.client, onCurrentDestination]);
 	return status;
 }
-
-function recordEntry(router: ReturnType<typeof useRouter>, route: string, id: string, native: boolean) {
-	if (!native) {
-		return;
-	}
-	router.history.flush?.();
-	if (window.location.pathname + window.location.search !== route || window.history.state?.workBoard?.id === id) {
-		return;
-	}
-	window.history.replaceState({ ...window.history.state, workBoard: { id } }, "");
-}

package/src/client/react/useDiagnosticsPolling.ts

@@ -1,14 +1,17 @@
 import { RegistryContext } from "@effect/atom-react";
 import type * as Atom from "effect/reactivity/Atom";
 import { useContext, useEffect } from "react";
-import { session } from "#client/entry.ts";
+import type { BrowserClient } from "#client/client.ts";
 
-export function useDiagnosticsPolling<A, TFleet>(atom: Atom.Atom<A>, fleet?: Atom.Atom<TFleet>) {
+export function useDiagnosticsPolling<A, TFleet>(
+	client: (Pick<BrowserClient, "registry"> & { readonly updates: Pick<BrowserClient["updates"], "paused"> }) | undefined,
+	atom: Atom.Atom<A>,
+	fleet?: Atom.Atom<TFleet>,
+) {
 	const registry = useContext(RegistryContext);
 	useEffect(() => {
 		function refresh() {
-			const native = session(window);
-			if (!(document.hidden || native.registry.get(native.updates.paused))) {
+			if (!(document.hidden || client?.registry.get(client.updates.paused))) {
 				registry.refresh(atom);
 				if (fleet) {
 					registry.refresh(fleet);
@@ -16,12 +19,16 @@ export function useDiagnosticsPolling<A, TFleet>(atom: Atom.Atom<A>, fleet?: Ato
 			}
 		}
 		const timer = setInterval(refresh, 15_000);
-		document.addEventListener("board-updates-resumed", refresh);
+		const resumed = client?.registry.subscribe(client.updates.paused, (paused) => {
+			if (!paused) {
+				refresh();
+			}
+		});
 		document.addEventListener("visibilitychange", refresh);
 		return () => {
 			clearInterval(timer);
-			document.removeEventListener("board-updates-resumed", refresh);
+			resumed?.();
 			document.removeEventListener("visibilitychange", refresh);
 		};
-	}, [atom, fleet, registry]);
+	}, [atom, fleet, registry, client]);
 }

package/src/client/react/useSidebar.ts

@@ -1,8 +1,10 @@
+import { useRouter } from "@tanstack/react-router";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import type { AppearanceControls } from "./useAppearance.ts";
 import { useMedia } from "./useMedia.ts";
 
 export function useSidebar(appearance: AppearanceControls) {
+	const router = useRouter();
 	const narrow = useMedia("(max-width: 767px)");
 	const [drawer, setDrawer] = useState(false);
 	const open = narrow ? drawer : !appearance.closed;
@@ -55,12 +57,12 @@ export function useSidebar(appearance: AppearanceControls) {
 			trapTab(event);
 		}
 		document.addEventListener("keydown", key);
-		document.addEventListener("board-navigate", close);
+		const unsubscribe = router.subscribe("onBeforeNavigate", close);
 		return () => {
 			document.removeEventListener("keydown", key);
-			document.removeEventListener("board-navigate", close);
+			unsubscribe();
 		};
-	}, [narrow, open, close]);
+	}, [narrow, open, close, router]);
 	return { close, narrow, open, toggle };
 }
 export type SidebarControls = ReturnType<typeof useSidebar>;

package/src/render/code.ts

@@ -50,10 +50,8 @@ async function renderedCode(highlighter: Shiki, pre: Element, diagrams: boolean)
 	return language === undefined ? undefined : await highlighted(highlighter, source, language);
 }
 
-export const codeBlocks =
-	(highlighter: Shiki, { diagrams = true }: { readonly diagrams?: boolean } = {}) =>
-	() =>
-	async (tree: Root) => {
+export function codeBlocks(highlighter: Shiki, { diagrams = true }: { readonly diagrams?: boolean } = {}) {
+	return () => async (tree: Root) => {
 		const work: Promise<void>[] = [];
 		visitElements(tree, "element", (pre, index, parent) => {
 			if (pre.tagName !== "pre" || index === undefined || parent === undefined) {
@@ -69,3 +67,4 @@ export const codeBlocks =
 		});
 		await Promise.all(work);
 	};
+}

package/src/render/{footnotes.ts → footnoteIds.ts}

@@ -17,13 +17,15 @@ function scoped(prefix: string, value: Value): Value {
 	return Array.isArray(value) ? value.map((each) => (typeof each === "string" ? String(scoped(prefix, each)) : each)) : value;
 }
 
-export const footnoteIds = (prefix: string) => () => (tree: Root) => {
-	visitElements(tree, "element", (element) => {
-		if (!["a", "h2", "li"].includes(element.tagName)) {
-			return;
-		}
-		element.properties = Object.fromEntries(
-			Object.entries(element.properties).map(([name, value]) => [name, SCOPED.has(name) ? scoped(prefix, value) : value]),
-		);
-	});
-};
+export function footnoteIds(prefix: string) {
+	return () => (tree: Root) => {
+		visitElements(tree, "element", (element) => {
+			if (!["a", "h2", "li"].includes(element.tagName)) {
+				return;
+			}
+			element.properties = Object.fromEntries(
+				Object.entries(element.properties).map(([name, value]) => [name, SCOPED.has(name) ? scoped(prefix, value) : value]),
+			);
+		});
+	};
+}

package/src/responses/url.ts

@@ -1,3 +1,3 @@
 export function responseUrl(item: string, request: string): string {
-	return `/_board/respond?item=${encodeURIComponent(item)}&request=${encodeURIComponent(request)}`;
+	return `/_board/item/${encodeURIComponent(item)}/#${encodeURIComponent(`answer-card-${request}`)}`;
 }

package/src/rpc/PageUrl.ts

@@ -17,7 +17,6 @@ export const PageUrl = Schema.String.check(
 					"/_board/overview",
 					"/_board/changes",
 					"/_board/start",
-					"/_board/respond",
 					"/_board/handoff",
 					"/_board/result",
 				].includes(path)

package/src/rpc/contract.ts

@@ -10,7 +10,7 @@ import { Library, LibraryInput } from "#browser/navigation/library.ts";
 import { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
 import { GoalsProjection } from "#browser/views/GoalsProjection.ts";
 import { ResultProjection } from "#browser/views/ResultProjection.ts";
-import { DiagnosticsProjection, HandoffProjection, RespondProjection, StartProjection } from "#browser/views/remaining.ts";
+import { DiagnosticsProjection, HandoffProjection, StartProjection } from "#browser/views/remaining.ts";
 import { BoardProjection, InboxProjection, WorkProjection } from "#browser/views/schema.ts";
 import { handoffContract } from "#rpc/handoffContract.ts";
 import { responseContract } from "#rpc/responseContract.ts";
@@ -53,15 +53,13 @@ const ReadWork = query("work", {
 const ReadInbox = query("inbox", { reads: () => [workspace.list, index.list], rejections: { InternalServerError }, success: InboxProjection });
 const ReadServer = query("server", { reads: () => [], rejections: { ServiceUnavailable }, success: Server });
 const ReadDiagnostics = query("diagnostics", { reads: () => [workspace.list], rejections: { InternalServerError }, success: DiagnosticsProjection });
-const ReadFleetItems = query("fleetItems", { reads: () => [workspace.list, index.list], success: FleetItemsProjection });
+const ReadFleetItems = query("fleetItems", {
+	reads: () => [workspace.list, index.list],
+	rejections: { InternalServerError },
+	success: FleetItemsProjection,
+});
 const ReadGoals = query("goals", { reads: () => [workspace.list, index.list], rejections: { InternalServerError }, success: GoalsProjection });
 const ReadStart = query("start", { reads: () => [workspace.list, index.list], rejections: { InternalServerError }, success: StartProjection });
-const ReadRespond = query("respond", {
-	payload: { url: PageUrl },
-	reads: ({ url }) => [...pageKeys(url), index.list],
-	rejections: documentRejections,
-	success: RespondProjection,
-});
 const ReadHandoff = query("handoff", {
 	payload: { url: PageUrl },
 	reads: () => [workspace.list, index.list],
@@ -109,7 +107,6 @@ export const workContract = contract("work-board", {
 		ReadFleetItems,
 		ReadGoals,
 		ReadStart,
-		ReadRespond,
 		ReadHandoff,
 		ReadResult,
 		ReadNavigation,