@shivaedev/work-board 0.11.0 → 0.13.0

package/src/client/react/VisualViewer.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useRef, useState } from "react";
+import { shellIds } from "./shellIds.ts";
+import { VisualControls } from "./VisualControls.tsx";
+import { graphicWidth, visualFilename } from "./visualDimensions.ts";
+import type { VisualSelection } from "./visualSources.ts";
+
+export function VisualViewer({ selection, close }: { readonly selection: VisualSelection; readonly close: () => void }) {
+	const [selected, setSelected] = useState(selection.selected);
+	const [scale, setScale] = useState(100);
+	const [baseWidth, setBaseWidth] = useState(0);
+	const [status, setStatus] = useState("");
+	const [stale, setStale] = useState(false);
+	const [objectUrl, setObjectUrl] = useState<string>();
+	const stageRef = useRef<HTMLDivElement>(null);
+	const contentRef = useRef<HTMLDivElement>(null);
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const image = selection.images[selected];
+	useEffect(() => {
+		if (!selection.drawing) {
+			return;
+		}
+		const copy = selection.drawing.cloneNode(true);
+		contentRef.current?.replaceChildren(copy);
+		const url = URL.createObjectURL(new Blob([new XMLSerializer().serializeToString(selection.drawing)], { type: "image/svg+xml" }));
+		setObjectUrl(url);
+		return () => URL.revokeObjectURL(url);
+	}, [selection.drawing]);
+	useEffect(() => {
+		function changed() {
+			setStale(true);
+			setStatus("Source updated. This preview is the drawing/image opened earlier; close and reopen to inspect or save the latest source.");
+		}
+		document.addEventListener("board-page", changed);
+		return () => document.removeEventListener("board-page", changed);
+	}, []);
+	function handleFitVisual() {
+		setBaseWidth(0);
+		setScale(100);
+		if (viewportRef.current) {
+			viewportRef.current.scrollTop = 0;
+			viewportRef.current.scrollLeft = 0;
+		}
+	}
+	function handleMove(offset: number) {
+		setSelected((current) => Math.max(0, Math.min(selection.images.length - 1, current + offset)));
+		handleFitVisual();
+		setStatus("");
+	}
+	function handleActual() {
+		const graphic = contentRef.current?.firstElementChild;
+		const width = graphicWidth(graphic);
+		if (!width) {
+			setStatus("Original dimensions unavailable; Fit and zoom remain available.");
+			return;
+		}
+		setBaseWidth(width);
+		setScale(100);
+	}
+	async function handleFullscreen() {
+		try {
+			if (document.fullscreenElement) {
+				await document.exitFullscreen();
+			} else {
+				await stageRef.current?.requestFullscreen();
+			}
+		} catch {
+			setStatus("Fullscreen is unavailable here; the scrollable viewer remains available.");
+		}
+	}
+	useEffect(() => {
+		const stage = stageRef.current;
+		const graphic = contentRef.current?.querySelector("img");
+		if (viewportRef.current) {
+			viewportRef.current.tabIndex = 0;
+		}
+		function failed() {
+			setStatus("Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit.");
+		}
+		function key(event: KeyboardEvent) {
+			if (selected < 0 || !["ArrowLeft", "ArrowRight"].includes(event.key)) {
+				return;
+			}
+			event.preventDefault();
+			setSelected((current) => Math.max(0, Math.min(selection.images.length - 1, current + (event.key === "ArrowLeft" ? -1 : 1))));
+			setBaseWidth(0);
+			setScale(100);
+			setStatus("");
+		}
+		stage?.addEventListener("keydown", key);
+		graphic?.addEventListener("error", failed);
+		return () => {
+			stage?.removeEventListener("keydown", key);
+			graphic?.removeEventListener("error", failed);
+		};
+	}, [selected, selection.images.length]);
+	useEffect(
+		() => () => {
+			if (stageRef.current?.contains(document.fullscreenElement)) {
+				void document.exitFullscreen().catch(() => undefined);
+			}
+		},
+		[],
+	);
+
+	const href = stale || status.startsWith("Image unavailable") ? undefined : (image?.local ?? objectUrl);
+	const filename = visualFilename(image?.local);
+	return (
+		<div id={shellIds.visualStage} ref={stageRef}>
+			<div className="visual-bar">
+				<h2 id={shellIds.visualTitle}>Visual evidence</h2>
+				<button id={shellIds.visualClose} onClick={() => close()} type="button">
+					Close
+				</button>
+			</div>
+			<p id={shellIds.visualContext}>
+				{image ? `${image.alt || "Local image"} · ${selected + 1} of ${selection.images.length} · ${image.local}` : "Mermaid diagram"} ·{" "}
+				{document.getElementById("doc")?.dataset.file}
+				{image ? "" : " · Current drawing"}
+			</p>
+			<VisualControls
+				baseWidth={baseWidth}
+				count={selection.images.length}
+				filename={filename}
+				href={href}
+				image={image !== undefined}
+				onActual={handleActual}
+				onFit={handleFitVisual}
+				onFullscreen={handleFullscreen}
+				onMove={handleMove}
+				onZoom={setScale}
+				scale={scale}
+				selected={selected}
+			/>
+			<p id={shellIds.visualStatus} role="status">
+				{status}
+			</p>
+			<section aria-label="Scrollable visual" id={shellIds.visualViewport} ref={viewportRef}>
+				<div id={shellIds.visualContent} ref={contentRef} style={{ width: baseWidth ? `${(baseWidth * scale) / 100}px` : `${scale}%` }}>
+					{image ? <img alt={image.alt} src={image.src} /> : null}
+				</div>
+			</section>
+			<p className="visual-help">
+				Arrow keys choose images · Zoom and scroll to inspect · Escape returns to the source. Recorded evidence does not verify acceptance.
+			</p>
+		</div>
+	);
+}

package/src/client/react/WorkCards.tsx

@@ -0,0 +1,39 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+export function WorkCards({ data }: { readonly data: WorkProjection }) {
+	const columns = [...Map.groupBy(data.rows, (item) => item.metadata.status)].map(([status, items]) => (
+		<Column items={items} key={status ?? ""} state={data.state} status={status} />
+	));
+	return <div className="work-columns">{columns}</div>;
+}
+function Column({ items, state, status }: { readonly items: WorkProjection["rows"]; readonly state: State; readonly status: string | undefined }) {
+	return (
+		<section aria-label={status ?? "Status not recorded"} className="work-column">
+			<h2>
+				{status ?? "Status not recorded"} <span className="work-count">{items.length}</span>
+			</h2>
+			{items.map((item) => (
+				<Card item={item} key={item.id} state={state} />
+			))}
+		</section>
+	);
+}
+function Card({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+	return (
+		<article className="work-card" data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			{Boolean(item.waiting) && (
+				<span className="waiting-badge" title={item.waiting}>
+					Waiting on you
+				</span>
+			)}
+			<p className="work-kind">{item.metadata.kind ?? "Kind not recorded"}</p>
+			<h3>
+				<WorkItemTitle item={item} state={state} />
+			</h3>
+			<p className="work-id">{item.id}</p>
+			<p className="work-owner">Owner: {item.metadata.owner ?? "Not recorded"}</p>
+			{Boolean(item.metadata.nextAction) && <p className="work-next">Next: {item.metadata.nextAction}</p>}
+		</article>
+	);
+}

package/src/client/react/WorkControls.tsx

@@ -0,0 +1,73 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { fieldFilter, viewUrl } from "#browser/views/state.ts";
+import { shellIds } from "./shellIds.ts";
+export function WorkControls({ data }: { readonly data: WorkProjection }) {
+	const { state } = data;
+	function fields(field: "owner" | "status") {
+		const values = new Map(
+			data.items.map((item) => [fieldFilter(item.metadata[field]), item.metadata[field] ?? `${field === "owner" ? "Owner" : "Status"} not recorded`]),
+		);
+		const current = state[field];
+		if (current && !values.has(current)) {
+			values.set(current, `${current.startsWith("value:") ? current.slice(6) : current} (no current matches)`);
+		}
+		return (
+			<>
+				<option value="">All {field === "owner" ? "owners" : "statuses"}</option>
+				{[...values]
+					.sort((a, b) => a[1].localeCompare(b[1], "en"))
+					.map(([value, label]) => (
+						<option key={value} value={value}>
+							{label}
+						</option>
+					))}
+			</>
+		);
+	}
+	return (
+		<form action="/_board/work#work-results" className="work-filters" id={shellIds.workFilters} method="get">
+			<input name="view" type="hidden" value={state.view} />
+			<input name="item" type="hidden" value={state.item} />
+			<label>
+				<span>Board</span>
+				<select defaultValue={state.board} id={shellIds.workBoard} name="board">
+					<option value="">All work</option>
+					{data.boards.map((board) => (
+						<option key={board.id} value={board.id}>
+							{board.title}
+						</option>
+					))}
+					{state.board && !data.validBoard && <option value={state.board}>{state.board} (unavailable)</option>}
+				</select>
+			</label>
+			<label>
+				<span>Status</span>
+				<select defaultValue={state.status} id={shellIds.workStatus} name="status">
+					{fields("status")}
+				</select>
+			</label>
+			<label>
+				<span>Owner</span>
+				<select defaultValue={state.owner} id={shellIds.workOwner} name="owner">
+					{fields("owner")}
+				</select>
+			</label>
+			<label>
+				<span>Find work</span>
+				<input defaultValue={state.query} id={shellIds.workQuery} maxLength={200} name="q" type="search" />
+			</label>
+			<label>
+				<span>Sort by</span>
+				<select defaultValue={state.sort} id={shellIds.workSort} name="sort">
+					{["title", "owner", "status"].map((sort) => (
+						<option key={sort} value={sort}>
+							{sort.charAt(0).toUpperCase() + sort.slice(1)}
+						</option>
+					))}
+				</select>
+			</label>
+			<button type="submit">Apply</button>
+			<a href={viewUrl(state, { owner: "", query: "", status: "" }, "work-results")}>Clear filters</a>
+		</form>
+	);
+}

package/src/client/react/WorkDetail.tsx

@@ -0,0 +1,35 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { DocumentPage } from "./DocumentPage.tsx";
+import { shellIds } from "./shellIds.ts";
+export function WorkDetail({ data }: { readonly data: WorkProjection }) {
+	const { state, selected } = data;
+	if (!state.item) {
+		return null;
+	}
+	return (
+		<aside aria-label="Selected work" className="work-detail" id={shellIds.workDetail} tabIndex={-1}>
+			<header>
+				<a className="detail-close" href={viewUrl(state, { item: "" }, "work-results")}>
+					Close detail
+				</a>
+				<a href={`/_board/item/${encodeURIComponent(state.item)}/`}>{selected === undefined ? "Inspect item identity" : "Open document"}</a>
+			</header>
+			{Boolean(data.selectedOutside) && (
+				<p className="detail-notice" role="status">
+					This selected item is outside the current board or filters.
+				</p>
+			)}
+			{selected === undefined ? (
+				<>
+					<h2>Item unavailable</h2>
+					<p>
+						{state.item} {data.selectionProblem}. No source was selected.
+					</p>
+				</>
+			) : (
+				<DocumentPage document={selected} key={selected.identity ?? selected.file} />
+			)}
+		</aside>
+	);
+}

package/src/client/react/WorkItemTitle.tsx

@@ -0,0 +1,9 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { type State, viewUrl } from "#browser/views/state.ts";
+export function WorkItemTitle({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+	return (
+		<a aria-current={item.id === state.item ? "true" : undefined} href={viewUrl(state, { item: item.id }, "work-detail")}>
+			{item.title}
+		</a>
+	);
+}

package/src/client/react/WorkPage.tsx

@@ -0,0 +1,59 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { shellIds } from "./shellIds.ts";
+import { WorkControls } from "./WorkControls.tsx";
+import { WorkDetail } from "./WorkDetail.tsx";
+import { WorkResults } from "./WorkResults.tsx";
+import { WorkTools } from "./WorkTools.tsx";
+export function WorkPage({ data }: { readonly data: WorkProjection }) {
+	const { state } = data;
+	const source = `/_board/item/${encodeURIComponent(state.board)}/`;
+	return (
+		<>
+			<header className="work-head">
+				<p className="work-eyebrow">WORK · {state.view.toUpperCase()} VIEW</p>
+				<h1>{data.validBoard ? data.title : "Board unavailable"}</h1>
+				<p>Views use recorded fields. A section heading does not set an item's status.</p>
+				{Boolean(state.board) && data.validBoard && <a href={source}>Board source</a>}
+			</header>
+			<WorkTools state={state} />
+			<WorkControls data={data} key={viewUrl(state)} />
+			{data.validBoard ? (
+				<WorkContent data={data} />
+			) : (
+				<p className="empty">
+					{state.board} is missing, has a duplicate ID, or is not a declared board. Choose another board or open its{" "}
+					<a href={source}>source identity</a>.
+				</p>
+			)}
+		</>
+	);
+}
+function WorkContent({ data }: { readonly data: WorkProjection }) {
+	const issues = data.issues.map((issue) => <li key={issue}>{issue}</li>);
+	return (
+		<>
+			{issues.length > 0 && (
+				<details className="view-issues">
+					<summary>Source issues ({issues.length})</summary>
+					<ul>{issues}</ul>
+				</details>
+			)}
+			<p className="work-total" role="status">
+				{data.rows.length} shown · {data.items.length} items in this view
+			</p>
+			<div className={data.state.item ? "work-layout has-detail" : "work-layout"}>
+				<section aria-label="Work items" id={shellIds.workResults} tabIndex={-1}>
+					{data.items.length === 0 && (
+						<p className="empty">
+							No identified work is declared here. Keep reading ordinary files, or add item IDs and explicit board membership in their Markdown
+							sources.
+						</p>
+					)}
+					<WorkResults data={data} />
+				</section>
+				<WorkDetail data={data} />
+			</div>
+		</>
+	);
+}

package/src/client/react/WorkResults.tsx

@@ -0,0 +1,9 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import { WorkCards } from "./WorkCards.tsx";
+import { WorkTable } from "./WorkTable.tsx";
+export function WorkResults({ data }: { readonly data: WorkProjection }) {
+	if (data.rows.length === 0) {
+		return <p className="empty">No work matches these filters.</p>;
+	}
+	return data.state.view === "table" ? <WorkTable data={data} /> : <WorkCards data={data} />;
+}

package/src/client/react/WorkTable.tsx

@@ -0,0 +1,39 @@
+import type { WorkProjection } from "#browser/views/schema.ts";
+import type { State } from "#browser/views/state.ts";
+import { WorkItemTitle } from "./WorkItemTitle.tsx";
+export function WorkTable({ data }: { readonly data: WorkProjection }) {
+	const headings = ["Work", "Kind", "Status", "Owner", "Next action"].map((label) => (
+		<th key={label} scope="col">
+			{label}
+		</th>
+	));
+	return (
+		<div className="work-table-wrap">
+			<table className="work-table">
+				<caption className="sr-only">Identified work, sorted by {data.state.sort}</caption>
+				<thead>
+					<tr>{headings}</tr>
+				</thead>
+				<tbody>
+					{data.rows.map((item) => (
+						<Row item={item} key={item.id} state={data.state} />
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
+function Row({ item, state }: { readonly item: WorkProjection["rows"][number]; readonly state: State }) {
+	return (
+		<tr data-item={item.id} data-selected={item.id === state.item ? "true" : undefined}>
+			<th scope="row">
+				<WorkItemTitle item={item} state={state} />
+				<span className="work-id">{item.id}</span>
+			</th>
+			<td>{item.metadata.kind ?? "Not recorded"}</td>
+			<td>{item.waiting ? `Waiting on you · ${item.metadata.status ?? "Status not recorded"}` : (item.metadata.status ?? "Not recorded")}</td>
+			<td>{item.metadata.owner ?? "Not recorded"}</td>
+			<td>{item.metadata.nextAction ?? "Not recorded"}</td>
+		</tr>
+	);
+}

package/src/client/react/WorkTools.tsx

@@ -0,0 +1,17 @@
+import type { State } from "#browser/views/state.ts";
+import { viewUrl } from "#browser/views/state.ts";
+import { SavedViews } from "./SavedViews.tsx";
+export function WorkTools({ state }: { readonly state: State }) {
+	return (
+		<>
+			<nav aria-label="Work layout" className="view-layouts">
+				{(["board", "table"] as const).map((view) => (
+					<a aria-current={state.view === view ? "page" : undefined} href={viewUrl(state, { view }, "work-results")} key={view}>
+						{view === "board" ? "Board" : "Table"}
+					</a>
+				))}
+			</nav>
+			<SavedViews url={viewUrl(state, { item: "" })} />
+		</>
+	);
+}

package/src/client/react/activeRead.ts

@@ -0,0 +1,15 @@
+import type { Cause } from "effect";
+import * as Atom from "effect/reactivity/Atom";
+import type { BrowserClient } from "#client/client.ts";
+import { resolvedDocumentFailure } from "#client/page/resolvedDocumentFailure.ts";
+import { pageQuery } from "./pageQuery.ts";
+
+function health(value: { readonly _tag: string; readonly waiting: boolean; readonly cause?: Cause.Cause<unknown> }) {
+	return {
+		failed: value._tag === "Failure" && !(value.cause && resolvedDocumentFailure(value.cause)),
+		pending: value.waiting || value._tag === "Initial",
+	};
+}
+export function activeRead(client: BrowserClient, kind: string, url: string, baseline: string | null) {
+	return pageQuery(client.api, kind, url, baseline).pipe(Atom.map(health));
+}

package/src/client/react/boardRouter.ts

@@ -0,0 +1,34 @@
+import { createRootRouteWithContext, createRoute, createRouter } from "@tanstack/react-router";
+import { createElement } from "react";
+import { BoardShell } from "./BoardShell.tsx";
+import { loadBoardPage, type RouterShell } from "./loadBoardPage.ts";
+export function boardRouter(options?: RouterShell) {
+	const root = createRootRouteWithContext<{ readonly shell?: RouterShell }>()({
+		component: () => {
+			const { shell } = root.useRouteContext();
+			return shell ? createElement(BoardShell, shell) : null;
+		},
+	});
+	const home = createRoute({
+		component: () => null,
+		getParentRoute: () => root,
+		loader: loadBoardPage,
+		loaderDeps: ({ search }) => search,
+		path: "/",
+	});
+	const page = createRoute({
+		component: () => null,
+		getParentRoute: () => root,
+		loader: loadBoardPage,
+		loaderDeps: ({ search }) => search,
+		path: "$",
+	});
+	return createRouter({
+		context: options ? { shell: options } : {},
+		defaultPendingMs: Number.POSITIVE_INFINITY,
+		defaultPreloadStaleTime: 0,
+		defaultStaleReloadMode: "blocking",
+		routeTree: root.addChildren([home, page]),
+		trailingSlash: "preserve",
+	});
+}

package/src/client/react/createResponse.ts

@@ -0,0 +1,40 @@
+import { Effect, Equal } from "effect";
+import type { QuestionPreview } from "#browser/responses/schema.ts";
+import { session } from "#client/entry.ts";
+import { responseFailure } from "#client/responses/failure.ts";
+import type { ResponseInput, ResponseSubmission } from "#client/responses/formSchema.ts";
+
+export function createResponse(
+	source: QuestionPreview,
+	submission: ResponseSubmission,
+	current: () => ResponseInput | undefined,
+	setOutcome: (outcome: string) => void,
+	setStatus: (status: string) => void,
+) {
+	return Effect.tryPromise({
+		catch: (error) => error,
+		try: async () => {
+			const native = session(window);
+			setOutcome("pending");
+			setStatus("Pending: registering reviewed context, then recording response…");
+			try {
+				const question = await native.mutate(
+					native.responses.registerQuestion.run({ item: source.item, request: source.request, revision: submission.revision }),
+				);
+				const { answerContext: _answerContext, recovery: _recovery, ...input } = submission;
+				await native.mutate(native.responses.recordResponse.run({ ...input, question: question.id }));
+				const newer = !Equal.equals(current(), submission);
+				setOutcome("saved");
+				setStatus(
+					`Saved: responses/${submission.id}.md. This records feedback, not acceptance.${newer ? " Your current draft remains unsaved." : ""}`,
+				);
+				return submission;
+			} catch (error) {
+				const failure = responseFailure(error);
+				setOutcome(failure.outcome);
+				setStatus(failure.text);
+				throw error;
+			}
+		},
+	});
+}

package/src/client/react/diagnosticsValues.tsx

@@ -0,0 +1,103 @@
+import type { CodexLimits, GithubLimits, UsageWindow } from "#browser/diagnostics/schema.ts";
+import { resetLabel } from "#diagnostics/resetLabel.ts";
+export function ObservedTime({ at }: { readonly at: number | null }) {
+	return at === null ? (
+		"Not reported"
+	) : (
+		<time dateTime={new Date(at).toISOString()}>
+			{new Date(at)
+				.toISOString()
+				.replace("T", " ")
+				.replace(/\.\d{3}Z$/u, " UTC")}
+		</time>
+	);
+}
+function Reset({ at, now }: { readonly at: number | null; readonly now: number }) {
+	return at === null ? (
+		"Not reported"
+	) : (
+		<time data-reset dateTime={new Date(at).toISOString()}>
+			{resetLabel(at, now)}
+		</time>
+	);
+}
+function windowLabel(name: string, minutes: number | null) {
+	if (minutes === null) {
+		return `${name} — duration not reported`;
+	}
+	if (minutes === 10_080) {
+		return "Weekly";
+	}
+	for (const [duration, unit] of [
+		[1440, "day"],
+		[60, "hour"],
+	] as const) {
+		if (minutes % duration === 0) {
+			return `${minutes / duration}-${unit}`;
+		}
+	}
+	return `${minutes}-minute`;
+}
+function Usage({ name, window, now }: { readonly name: string; readonly window: UsageWindow | null; readonly now: number }) {
+	if (!window) {
+		return (
+			<li>
+				<h3>{name}</h3>
+				<p>Window not reported</p>
+			</li>
+		);
+	}
+	const label = windowLabel(name, window.windowDurationMins);
+	return (
+		<li>
+			<h3>{label}</h3>
+			<p>
+				<strong>{window.usedPercent}% used</strong>
+			</p>
+			<meter aria-label={`${label} percent used`} max={100} min={0} value={Math.min(window.usedPercent, 100)}>
+				{window.usedPercent}%
+			</meter>
+			<p>
+				Resets <Reset at={window.resetsAt === null ? null : window.resetsAt * 1000} now={now} />
+			</p>
+		</li>
+	);
+}
+export function DiagnosticsWindows({ value, now }: { readonly value: CodexLimits; readonly now: number }) {
+	return (
+		<ul className="diagnostics-windows">
+			<Usage name="Primary" now={now} window={value.primary} />
+			<Usage name="Secondary" now={now} window={value.secondary} />
+		</ul>
+	);
+}
+export function DiagnosticsGithub({ value, now }: { readonly value: GithubLimits; readonly now: number }) {
+	const windows = (
+		[
+			["REST", value.core],
+			["GraphQL", value.graphql],
+		] as const
+	).map(([name, window]) => <GithubWindow key={name} name={name} now={now} window={window} />);
+	return (
+		<>
+			<dl className="diagnostics-metrics">{windows}</dl>
+			<p className="diagnostics-freshness">Cached for one minute across all tabs.</p>
+		</>
+	);
+}
+function GithubWindow({ name, window, now }: { readonly name: string; readonly window: GithubLimits["core"]; readonly now: number }) {
+	return (
+		<div>
+			<dt>{name}</dt>
+			<dd>
+				<strong>
+					{window.remaining} / {window.limit}
+				</strong>{" "}
+				remaining
+			</dd>
+			<dd>
+				Resets <Reset at={window.reset * 1000} now={now} />
+			</dd>
+		</div>
+	);
+}

package/src/client/react/documentRoute.ts

@@ -0,0 +1,13 @@
+import type { Navigation } from "#browser/navigation/schema.ts";
+import { fileUrl } from "#files/url.ts";
+export function documentRoute(pathname: string, home: Navigation["home"]): boolean {
+	if (
+		home
+		&& (pathname === "/"
+			|| pathname === fileUrl(home.file)
+			|| (home.identity !== undefined && pathname === `/_board/item/${encodeURIComponent(home.identity)}/`))
+	) {
+		return false;
+	}
+	return pathname === "/" || /\.md$/iu.test(pathname) || /^\/_board\/item\/[^/]+\/$/u.test(pathname);
+}