@shivaedev/work-board 0.13.0 → 0.14.0

package/src/client/react/entry.css

@@ -1,4 +1,9 @@
+@layer theme, base, components, utilities;
+
 @import "tailwindcss" source("./");
+@import "./command-palette.css";
+
+@source "../document";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -21,6 +26,12 @@
 	--color-border: var(--border);
 	--color-input: var(--input);
 	--color-ring: var(--ring);
+	--color-needs-you: var(--status-needs-you);
+	--color-agent-working: var(--status-agent-working);
+	--color-waiting-on-agents: var(--status-waiting-on-agents);
+	--color-blocked: var(--status-blocked);
+	--color-done: var(--status-done);
+	--color-deferred: var(--status-deferred);
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);
@@ -29,13 +40,25 @@
 
 :root {
 	--radius: 0.625rem;
+	--bg: var(--background);
+	--text: var(--foreground);
+	--surface: var(--secondary);
+	--link: var(--foreground);
+	--danger: var(--destructive);
+	--focus: var(--ring);
+	--status-needs-you: oklch(0.48 0.11 75);
+	--status-agent-working: oklch(0.48 0.16 255);
+	--status-waiting-on-agents: oklch(0.48 0.16 300);
+	--status-blocked: oklch(0.5 0.19 25);
+	--status-done: oklch(0.47 0.065 155);
+	--status-deferred: oklch(0.5 0 0);
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.145 0 0);
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.145 0 0);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.205 0 0);
+	--primary: oklch(0.45 0.12 155);
 	--primary-foreground: oklch(0.985 0 0);
 	--secondary: oklch(0.97 0 0);
 	--secondary-foreground: oklch(0.205 0 0);
@@ -46,17 +69,24 @@
 	--destructive: oklch(0.577 0.245 27.325);
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
+	--ring: oklch(0.55 0.14 155);
+	color-scheme: light;
 }
 
 .dark {
+	--status-needs-you: oklch(0.8 0.13 75);
+	--status-agent-working: oklch(0.76 0.13 255);
+	--status-waiting-on-agents: oklch(0.78 0.13 300);
+	--status-blocked: oklch(0.75 0.15 25);
+	--status-done: oklch(0.73 0.065 155);
+	--status-deferred: oklch(0.72 0 0);
 	--background: oklch(0.145 0 0);
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
 	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.922 0 0);
+	--primary: oklch(0.72 0.14 155);
 	--primary-foreground: oklch(0.205 0 0);
 	--secondary: oklch(0.269 0 0);
 	--secondary-foreground: oklch(0.985 0 0);
@@ -67,34 +97,221 @@
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);
 	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.556 0 0);
+	--ring: oklch(0.72 0.14 155);
+	color-scheme: dark;
 }
 
 @layer base {
+	.doc a {
+		@apply underline underline-offset-4;
+	}
 	* {
 		@apply border-border outline-ring/50;
 	}
+	html,
 	body {
 		@apply bg-background text-foreground;
 	}
 }
 
-.history-controls {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 0.6rem;
-	align-items: center;
-}
-.history-change {
-	padding: 1rem 0;
-	border-top: 1px solid var(--border);
-}
-.history-source {
-	max-height: 32rem;
-	overflow: auto;
-	overflow-wrap: anywhere;
-	white-space: pre-wrap;
-}
-.history h2 {
-	overflow-wrap: anywhere;
+@layer components {
+	.document-layout .reading-column {
+		@apply w-full max-w-[68ch] text-base leading-[1.65] [overflow-wrap:anywhere];
+	}
+	.reading-column :is(h1, h2, h3, h4, h5, h6),
+	.item-introduction h1 {
+		@apply mt-8 mb-4 font-semibold leading-tight;
+	}
+	.item-introduction h1 {
+		@apply mt-0 text-2xl;
+	}
+	.reading-column h2 {
+		@apply text-xl;
+	}
+	.reading-column h3 {
+		@apply text-lg;
+	}
+	.reading-column :is(p, ul, ol, blockquote, pre, table) {
+		@apply my-4;
+	}
+	.reading-column :is(ul, ol) {
+		@apply pl-6;
+	}
+	.reading-column ul {
+		@apply list-disc;
+	}
+	.reading-column ol {
+		@apply list-decimal;
+	}
+	.reading-column :is(code, pre),
+	.item-context code {
+		@apply font-mono;
+	}
+	.reading-column pre {
+		@apply overflow-auto rounded-lg bg-muted p-4 text-sm;
+	}
+	.reading-column blockquote {
+		@apply border-l-2 pl-4 text-muted-foreground;
+	}
+	.reading-column table {
+		@apply block overflow-auto;
+	}
+	.reading-column :is(th, td) {
+		@apply border p-2;
+	}
+	.item-context {
+		@apply [overflow-wrap:anywhere];
+	}
+	.item-context h3 {
+		@apply mt-5 mb-3 font-semibold;
+	}
+	.item-context h4 {
+		@apply mt-4 mb-2 font-medium;
+	}
+	.item-context ul {
+		@apply space-y-3 pl-4;
+	}
+	.item-context p {
+		@apply my-3;
+	}
+	.document-lead [id],
+	.item-context [id],
+	.reading-column [id] {
+		scroll-margin-top: 15rem;
+	}
+	.item-introduction .heading-anchor,
+	.reading-column .heading-anchor {
+		@apply opacity-0;
+	}
+	.item-introduction h1:hover .heading-anchor,
+	.reading-column :is(h1, h2, h3, h4, h5, h6):hover .heading-anchor,
+	.heading-anchor:focus-visible {
+		@apply opacity-100;
+	}
+}
+
+.document-layout {
+	--document-leading-rows: 0;
+}
+.document-layout:has(> .document-lead),
+.document-layout:has(> .answer-cards) {
+	--document-leading-rows: 1;
+}
+.document-layout:has(> .document-lead):has(> .answer-cards) {
+	--document-leading-rows: 2;
+}
+.document-layout > .document-lead {
+	grid-row-start: 2;
+}
+.document-layout > .answer-cards {
+	grid-row-start: calc(1 + var(--document-leading-rows));
+}
+.document-layout > :is(article, .board) {
+	grid-row-start: calc(2 + var(--document-leading-rows));
+}
+.document-layout > aside {
+	grid-row-start: calc(3 + var(--document-leading-rows));
+}
+
+@media (min-width: 1024px) {
+	.document-layout > aside {
+		grid-row-start: calc(2 + var(--document-leading-rows));
+	}
+}
+
+.answer-cards > .response-panel {
+	max-width: 72ch;
+	padding: 1rem;
+	margin: 0;
+}
+
+@layer components {
+	figure.diagram {
+		@apply mx-0;
+	}
+	figure.diagram[data-state="pending"] {
+		@apply min-h-48 rounded-md bg-muted;
+	}
+	figure.diagram .diagram-source {
+		@apply hidden;
+	}
+	figure.diagram[data-state="failed"] .diagram-source {
+		@apply block;
+	}
+	[data-diagram-error] {
+		@apply text-destructive text-sm;
+	}
+	.shiki span {
+		color: var(--shiki-light);
+	}
+	.dark .shiki span {
+		color: var(--shiki-dark);
+	}
+	.visual-document,
+	.visual-callout {
+		@apply my-5 rounded-lg border p-4 [overflow-wrap:anywhere];
+	}
+	.visual-label {
+		@apply font-semibold;
+	}
+	.visual-value {
+		@apply text-xl tabular-nums;
+	}
+	.visual-document progress {
+		@apply block w-full accent-primary;
+	}
+	.visual-callout {
+		@apply border-l-4 bg-muted;
+	}
+	.visual-warning,
+	.visual-caution {
+		@apply border-l-needs-you;
+	}
+	.visual-diagnostic {
+		@apply font-semibold text-muted-foreground;
+	}
+	.questionnaire-option {
+		@apply my-4 border-l-2 py-1 pl-4 [overflow-wrap:anywhere];
+	}
+	.questionnaire-answer {
+		@apply inline-block rounded-md border px-4 py-2;
+	}
+}
+
+.phone-more {
+	position: fixed;
+	inset: auto 0 0;
+	width: 100%;
+	max-width: 100%;
+	max-height: 80dvh;
+	padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom));
+	margin: 0;
+	overflow-y: auto;
+	color: var(--foreground);
+	background: var(--background);
+	border: 1px solid var(--border);
+	border-radius: 1rem 1rem 0 0;
+}
+.phone-more::backdrop {
+	background: rgb(0 0 0 / 0.45);
+}
+
+@media (max-width: 767px) {
+	[data-board-page] .work-columns {
+		grid-template-columns: minmax(0, 1fr);
+		grid-auto-columns: auto;
+		grid-auto-flow: row;
+		overflow-x: visible;
+	}
+	[data-board-page] .work-card-list {
+		height: auto;
+		max-height: min(60vh, 600px);
+	}
+	[data-board-page] .item-introduction {
+		position: static;
+		z-index: auto;
+	}
+	[data-board-page] #doc {
+		overflow-wrap: anywhere;
+	}
 }

package/src/client/react/entry.tsx

@@ -6,11 +6,7 @@ import { boardRouter } from "./boardRouter.ts";
 import "#client/react/entry.css";
 
 const container = document.querySelector("[data-board-react-root]");
-const bootstrap = document.querySelector<HTMLTemplateElement>("#board-legacy-page");
-if (container && bootstrap) {
-	document.querySelector("[data-board-fallback]")?.remove();
-	const initial = bootstrap.innerHTML;
-	bootstrap.remove();
+if (container) {
 	const root = createRoot(container);
 	let native = session(window);
 	let started = false;
@@ -23,7 +19,7 @@ if (container && bootstrap) {
 		document.documentElement.dataset.js = "true";
 	}
 	const reading = history.state?.workBoard;
-	const router = boardRouter({ api: native.api, client: native, initial, reading, ready, registry: native.registry });
+	const router = boardRouter({ api: native.api, client: native, reading, ready, registry: native.registry });
 	if (reading) {
 		history.replaceState({ ...history.state, workBoard: reading }, "");
 	}
@@ -40,7 +36,7 @@ if (container && bootstrap) {
 			return;
 		}
 		native = session(window);
-		router.update({ context: { shell: { api: native.api, client: native, initial, reading, ready, registry: native.registry } } });
+		router.update({ context: { shell: { api: native.api, client: native, reading, ready, registry: native.registry } } });
 		void router.invalidate();
 		render();
 	});

package/src/client/react/goalWork.ts

@@ -0,0 +1,21 @@
+import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+import { goalWorkGroup } from "#browser/views/goalWorkState.ts";
+
+export type GoalWorkItem = GoalsProjection["items"][number];
+export const goalGroups = ["In progress", "Planned", "Done", "Deferred"] as const;
+type FleetReady = Extract<FleetItemsProjection, { readonly state: "ready" }>;
+export type GoalRun = FleetReady["items"][number] | FleetReady["completed"][number];
+export function goalRun(item: GoalWorkItem, fleet: FleetItemsProjection | undefined): GoalRun | undefined {
+	return fleet?.state === "ready" ? [...fleet.items, ...fleet.completed].find((entry) => entry.workId === item.id) : undefined;
+}
+export function goalGroup(item: GoalWorkItem, run: GoalRun | undefined): (typeof goalGroups)[number] {
+	return goalWorkGroup(item.metadata.status, run?.stage);
+}
+
+export function targetsGoal(item: GoalWorkItem, id: string, criterion?: string) {
+	return item.metadata.relationships?.some(
+		(link) =>
+			link.kind === "implements" && (criterion ? link.target === `${id}#${criterion}` : link.target === id || link.target.startsWith(`${id}#`)),
+	);
+}

package/src/client/react/inProgressItems.ts

@@ -0,0 +1,5 @@
+import type { FleetItemsProjection } from "#browser/views/FleetItemsProjection.ts";
+
+export function inProgressItems(data: FleetItemsProjection | undefined) {
+	return data?.state === "ready" ? data.items.filter((item) => ["executing", "reviewing", "repairing", "adopting"].includes(item.stage)) : undefined;
+}

package/src/client/react/loadBoardPage.ts

@@ -1,8 +1,8 @@
-import type { LoaderFnContext } from "@tanstack/react-router";
+import { isRedirect, type LoaderFnContext, redirect } from "@tanstack/react-router";
 import { Predicate } from "effect";
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { loadQuery } from "@shivaedev/effect-react/router.ts";
-import { documentQuery } from "#client/page/routeQuery.ts";
+import { documentQuery, navigationQuery } from "#client/page/routeQuery.ts";
 import type { ShellOptions } from "./BoardShell.tsx";
 import { documentRoute } from "./documentRoute.ts";
 import { loadProjection } from "./loadProjection.ts";
@@ -17,13 +17,15 @@ export async function loadBoardPage({
 	location,
 	abortController,
 }: Pick<LoaderFnContext, "location" | "abortController"> & { readonly context: { readonly shell?: RouterShell } }) {
+	redirectRetired(location.pathname);
 	if (!shell) {
 		return undefined;
 	}
 	const { api, registry } = shell;
 	const url = location.pathname + location.searchStr;
 	try {
-		const navigation = await loadQuery(registry, api.navigation.query({ current: "" }), { abortController });
+		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);
@@ -45,10 +47,38 @@ export async function loadBoardPage({
 		await loadRemaining(registry, api, remainingRoute(location.pathname) ?? "start", url, abortController);
 		return undefined;
 	} catch (error) {
-		if (abortController.signal.aborted) {
+		if (mustRethrow(abortController, error)) {
 			throw error;
 		}
 		// The mounted page owns failure wording and retained-data rendering.
 		return { error };
 	}
 }
+
+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) {
+	const retired: Readonly<Record<string, string>> = {
+		"/_board/changes": "/_board/library?view=recently-changed",
+		"/_board/diagnostics": "/_board/system",
+		"/_board/inbox": "/",
+		"/_board/overview": "/",
+	};
+	const target = retired[pathname];
+	if (target) {
+		throw redirect({ href: target, replace: true });
+	}
+}

package/src/client/react/loadProjection.ts

@@ -1,6 +1,7 @@
 import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
 import { loadQuery } from "@shivaedev/effect-react/router.ts";
 import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import { pageQueries } from "./pageQueries.ts";
 import type { ProjectionRoute } from "./projectionRoute.ts";
 import type { ShellApi } from "./ShellApi.ts";
 export function loadProjection(
@@ -11,13 +12,11 @@ export function loadProjection(
 	abortController: AbortController,
 ) {
 	switch (route) {
+		case "today":
+			return Promise.all(pageQueries(api, route, url).map((query) => loadQuery(registry, query, { abortController })));
 		case "board":
 			return loadQuery(registry, api.board.query({ url }, routeQueryOptions), { abortController });
 		case "work":
 			return loadQuery(registry, api.work.query({ url }, routeQueryOptions), { abortController });
-		case "overview":
-			return loadQuery(registry, api.overview.query(undefined, routeQueryOptions), { abortController });
-		case "inbox":
-			return loadQuery(registry, api.inbox.query(undefined, routeQueryOptions), { abortController });
 	}
 }

package/src/client/react/loadRemaining.ts

@@ -11,12 +11,17 @@ export function loadRemaining(
 	abortController: AbortController,
 ) {
 	switch (route) {
-		case "changes":
-			return undefined;
+		case "library":
+			return loadQuery(registry, api.library.query({}, routeQueryOptions), { abortController });
+		case "goals":
+			return loadQuery(registry, api.goals.query(undefined, routeQueryOptions), { abortController });
 		case "start":
 			return loadQuery(registry, api.start.query(undefined, routeQueryOptions), { abortController });
-		case "diagnostics":
-			return loadQuery(registry, api.diagnostics.query(undefined, routeQueryOptions), { abortController });
+		case "system":
+			return Promise.all([
+				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":

package/src/client/react/mainLocation.ts

@@ -1,12 +1,13 @@
 export interface MainLocation {
 	readonly file: string;
+	readonly title?: string | undefined;
 	readonly view: string;
 }
-export function bootstrapPage(html: string): Document {
-	const page = new DOMParser().parseFromString(/<body[^>]*>(?<body>[\s\S]*)<\/body>/iu.exec(html)?.groups?.body ?? html, "text/html");
-	const template = page.querySelector<HTMLTemplateElement>("#board-legacy-page");
-	if (template) {
-		page.body.replaceChildren(template.content.cloneNode(true));
-	}
-	return page;
+export function displayedLocation(main: HTMLElement | null): MainLocation {
+	const file = main?.dataset.file ?? "";
+	const title = main?.querySelector("h1")?.textContent?.trim();
+	return { file, title, view: main?.dataset.view ?? "" };
+}
+export function sameMainLocation(previous: MainLocation, next: MainLocation) {
+	return previous.file === next.file && previous.view === next.view && previous.title === next.title;
 }

package/src/client/react/pageQueries.ts

@@ -0,0 +1,42 @@
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import { routeQueryOptions } from "#client/page/routeQuery.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function pageQueries(api: ShellApi, kind: string, url: string): readonly Atom.Atom<AsyncResult.AsyncResult<unknown, unknown>>[] {
+	if (kind === "today") {
+		return [
+			api.inbox.query(undefined, routeQueryOptions),
+			api.goals.query(undefined, routeQueryOptions),
+			api.fleetItems.query(undefined, routeQueryOptions),
+		];
+	}
+	if (kind === "library") {
+		return [api.library.query({}, routeQueryOptions)];
+	}
+	if (kind === "goals") {
+		return [api.goals.query(undefined, routeQueryOptions)];
+	}
+	if (kind === "start") {
+		return [api.start.query(undefined, routeQueryOptions)];
+	}
+	if (kind === "system") {
+		return [api.diagnostics.query(undefined, routeQueryOptions), api.fleetItems.query(undefined, routeQueryOptions)];
+	}
+	if (kind === "work") {
+		return [api.work.query({ url }, routeQueryOptions)];
+	}
+	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)];
+	}
+	if (kind === "result") {
+		return [api.result.query({ url }, routeQueryOptions)];
+	}
+	return [api.document.query({ url }, routeQueryOptions)];
+}

package/src/client/react/projectionChanges.ts

@@ -5,9 +5,11 @@ export interface RenderedProjection {
 	readonly url: string;
 }
 export function projectionChanges(main: HTMLElement, previous: RenderedProjection | undefined, url: string): RenderedProjection {
-	const blocks = [...main.querySelectorAll("article.doc :is(p,li,pre,blockquote,h1,h2,h3,h4,h5,h6), .work-card :is(p,h3)")].filter(
-		(element) => !(element.matches("[data-modified]") || element.querySelector("[data-modified]")),
-	);
+	const blocks = [
+		...main.querySelectorAll(
+			":is(article.doc, .board) :is(p,li,pre,blockquote,h1,h2,h3,h4,h5,h6), .board-head > :is(p,pre,blockquote,h1,h2,h3,h4,h5,h6), .work-card :is(p,h3)",
+		),
+	].filter((element) => !(element.matches("[data-modified]") || element.querySelector("[data-modified]")));
 	const signatures = blocks.map(normalized);
 	if (previous?.url === url) {
 		const kept = new Set(matches(previous.signatures, signatures).map(([, index]) => index));

package/src/client/react/projectionRoute.ts

@@ -1,18 +1,15 @@
-import type { Navigation } from "#browser/navigation/schema.ts";
+import type { Navigation } from "#browser/Navigation.ts";
 import { fileUrl } from "#files/url.ts";
 export function projectionRoute(pathname: string, home: Navigation["home"]) {
+	if (pathname === "/") {
+		return "today";
+	}
 	if (pathname === "/_board/work") {
 		return "work";
 	}
-	if (pathname === "/_board/overview") {
-		return "overview";
-	}
-	if (pathname === "/_board/inbox") {
-		return "inbox";
-	}
 	if (
 		home
-		&& (pathname === "/" || pathname === fileUrl(home.file) || (home.identity && pathname === `/_board/item/${encodeURIComponent(home.identity)}/`))
+		&& (pathname === fileUrl(home.file) || (home.identity && pathname.replace(/\/$/u, "") === `/_board/item/${encodeURIComponent(home.identity)}`))
 	) {
 		return "board";
 	}

package/src/client/react/readerLink.ts

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

package/src/client/react/readingLibrary.ts

@@ -17,6 +17,7 @@ export function restoreLibrary(key: string) {
 }
 interface LibraryState {
 	readonly favorites: readonly Item[];
+	readonly recents: readonly Item[];
 	readonly toggle: (file: string, title: string) => void;
 }
-export const LibraryContext = createContext<LibraryState>({ favorites: [], toggle: () => undefined });
+export const LibraryContext = createContext<LibraryState>({ favorites: [], recents: [], toggle: () => undefined });

package/src/client/react/readingPassage.ts

@@ -0,0 +1,40 @@
+const MISSING_PASSAGE = "This passage is no longer in the document.";
+
+export function revealPassage(hash: string) {
+	const target = passageTarget(hash);
+	for (let parent = target?.parentElement; parent; parent = parent.parentElement) {
+		if (parent instanceof HTMLDetailsElement) {
+			parent.open = true;
+		}
+		if (parent.matches('[role="tabpanel"][hidden]')) {
+			document.getElementById(parent.getAttribute("aria-labelledby") ?? "")?.click();
+		}
+	}
+}
+export function scrollToPassage(hash: string) {
+	if (!hash) {
+		window.scrollTo(0, 0);
+		return "";
+	}
+	const target = passageTarget(hash);
+	if (!target) {
+		return MISSING_PASSAGE;
+	}
+	if (target.matches('[id^="answer-card-"]')) {
+		const header = target.closest(".document-layout")?.querySelector(".item-introduction");
+		target.style.scrollMarginTop = `${(header?.getBoundingClientRect().height ?? 0) + 16}px`;
+	}
+	target.scrollIntoView();
+	target.focus({ preventScroll: true });
+	return "";
+}
+export function passageStatus(hash: string) {
+	return !hash || passageTarget(hash) ? "" : MISSING_PASSAGE;
+}
+function passageTarget(hash: string) {
+	try {
+		return document.getElementById(decodeURIComponent(hash.slice(1)));
+	} catch {
+		return null;
+	}
+}