@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/projectionChanges.ts

@@ -0,0 +1,23 @@
+import { matches } from "#client/reconcile/matches.ts";
+import { flash, normalized } from "#client/reconcile/normalized.ts";
+export interface RenderedProjection {
+	readonly signatures: readonly string[];
+	readonly url: string;
+}
+export function projectionChanges(main: HTMLElement, previous: RenderedProjection | undefined, url: string): RenderedProjection {
+	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));
+		for (const [index, element] of blocks.entries()) {
+			if (!kept.has(index)) {
+				flash(element);
+			}
+		}
+	}
+	return { signatures, url };
+}

package/src/client/react/projectionRoute.ts

@@ -0,0 +1,18 @@
+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 (
+		home
+		&& (pathname === fileUrl(home.file) || (home.identity && pathname.replace(/\/$/u, "") === `/_board/item/${encodeURIComponent(home.identity)}`))
+	) {
+		return "board";
+	}
+	return undefined;
+}
+export type ProjectionRoute = NonNullable<ReturnType<typeof projectionRoute>>;

package/src/client/react/readerLink.ts

@@ -0,0 +1,9 @@
+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)
+			|| target.pathname.startsWith("/_board/item/")
+			|| /\.md$/iu.test(target.pathname))
+	);
+}

package/src/client/react/readingHistory.ts

@@ -0,0 +1,31 @@
+import { Option, Schema } from "effect";
+import { ReadingState } from "./readingState.ts";
+
+const Entries = Schema.Record(Schema.String, ReadingState);
+const Entry = Schema.Struct({ id: Schema.String, reading: Schema.optional(Schema.NullOr(ReadingState)) });
+export function readingEntry(value: unknown) {
+	return Option.getOrUndefined(Schema.decodeUnknownOption(Entry)(value));
+}
+export function readingHistory() {
+	const key = `work-board:reading:${document.documentElement.dataset.workspace}`;
+	let entries: Record<string, ReadingState>;
+	try {
+		entries = Option.getOrElse(Schema.decodeUnknownOption(Entries)(JSON.parse(sessionStorage.getItem(key) ?? "{}")), () => ({}));
+	} catch {
+		entries = {};
+	}
+	return {
+		get: (id: string) => entries[id],
+		save: (id: string, reading: ReadingState) => {
+			delete entries[id];
+			entries[id] = reading;
+			entries = Object.fromEntries(Object.entries(entries).slice(-30));
+			try {
+				sessionStorage.setItem(key, JSON.stringify(entries));
+				return true;
+			} catch {
+				return false;
+			}
+		},
+	};
+}

package/src/client/react/readingLibrary.ts

@@ -0,0 +1,23 @@
+import { Option, Schema } from "effect";
+import { createContext } from "react";
+
+const Item = Schema.Struct({ file: Schema.NonEmptyString, title: Schema.String });
+export type Item = typeof Item.Type;
+const Saved = Schema.Struct({ favorites: Schema.optional(Schema.Unknown), recents: Schema.optional(Schema.Unknown) });
+function valid(value: unknown): Item[] {
+	return Array.isArray(value) ? value.flatMap((entry) => Option.toArray(Schema.decodeUnknownOption(Item)(entry))) : [];
+}
+export function restoreLibrary(key: string) {
+	try {
+		const saved = Option.getOrUndefined(Schema.decodeUnknownOption(Saved)(JSON.parse(localStorage.getItem(key) ?? "{}")));
+		return { favorites: valid(saved?.favorites), notice: "", recents: valid(saved?.recents) };
+	} catch {
+		return { favorites: [], notice: "Reading history applies to this page only.", recents: [] };
+	}
+}
+interface LibraryState {
+	readonly favorites: readonly Item[];
+	readonly recents: readonly Item[];
+	readonly toggle: (file: string, title: string) => void;
+}
+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;
+	}
+}

package/src/client/react/readingState.ts

@@ -0,0 +1,104 @@
+import { Schema } from "effect";
+
+const Selection = Schema.Struct({ a: Schema.Int, anchor: Schema.Array(Schema.Int), f: Schema.Int, focus: Schema.Array(Schema.Int) });
+export const ReadingState = Schema.Struct({
+	context: Schema.optional(Schema.Boolean),
+	details: Schema.optional(Schema.Array(Schema.Boolean)),
+	keyedDetails: Schema.optional(Schema.Record(Schema.String, Schema.Boolean)),
+	scroll: Schema.Tuple([Schema.Finite, Schema.Finite]),
+	selection: Schema.NullOr(Selection),
+	sidebar: Schema.optional(Schema.Number),
+});
+export type ReadingState = typeof ReadingState.Type;
+let releaseScroll: (() => void) | undefined;
+function pathOf(node: Node, root: Node) {
+	const path: number[] = [];
+	for (let child: Node | null = node; child !== root; child = child.parentNode) {
+		if (!child?.parentNode) {
+			return undefined;
+		}
+		const nodes: readonly Node[] = [...child.parentNode.childNodes];
+		path.unshift(nodes.indexOf(child));
+	}
+	return path;
+}
+function nodeAt(path: readonly number[], root: Node): Node | undefined {
+	return path.reduce<Node | undefined>((node, index) => node?.childNodes[index], root);
+}
+function details(root: Element) {
+	const counts = new Map<string, number>();
+	return [...root.querySelectorAll<HTMLDetailsElement>("details:not(.item-context)")].map((detail) => {
+		const name = detail.dataset.key || detail.querySelector("summary")?.textContent || "details";
+		const occurrence = counts.get(name) ?? 0;
+		counts.set(name, occurrence + 1);
+		return [`${name}:${occurrence}`, detail] as const;
+	});
+}
+function inForm() {
+	return document.activeElement?.closest("[data-response-form], #response-form, #handoff-form");
+}
+export function captureReading(): ReadingState | undefined {
+	const root = document.getElementById("doc");
+	if (!root) {
+		return undefined;
+	}
+	const selection = inForm() ? null : document.getSelection();
+	const anchor = selection?.anchorNode && pathOf(selection.anchorNode, root);
+	const focus = selection?.focusNode && pathOf(selection.focusNode, root);
+	return {
+		context: root.querySelector<HTMLDetailsElement>(".item-context")?.open,
+		details: details(root).map(([, detail]) => detail.open),
+		keyedDetails: Object.fromEntries(details(root).map(([key, detail]) => [key, detail.open])),
+		scroll: [scrollX, scrollY],
+		selection: anchor && focus && selection ? { a: selection.anchorOffset, anchor, f: selection.focusOffset, focus } : null,
+		sidebar: document.getElementById("sidebar")?.scrollTop ?? 0,
+	};
+}
+export function restoreReading(state: ReadingState) {
+	const root = document.getElementById("doc");
+	if (!root) {
+		return;
+	}
+	const context = root.querySelector<HTMLDetailsElement>(".item-context");
+	if (context && state.context !== undefined) {
+		context.open = state.context;
+	}
+	details(root).forEach(([key, detail], index) => {
+		const open = state.keyedDetails ? state.keyedDetails[key] : state.details?.[index];
+		if (open !== undefined) {
+			detail.open = open;
+		}
+	});
+	const sidebar = document.getElementById("sidebar");
+	if (sidebar) {
+		sidebar.scrollTop = state.sidebar ?? 0;
+	}
+	if (state.selection && !inForm()) {
+		const { anchor: anchorPath, focus: focusPath, a, f } = state.selection;
+		const anchor = nodeAt(anchorPath, root);
+		const focus = nodeAt(focusPath, root);
+		function limit(node: Node) {
+			return node.nodeType === 3 ? (node.textContent?.length ?? 0) : node.childNodes.length;
+		}
+		if (anchor && focus) {
+			document.getSelection()?.setBaseAndExtent(anchor, Math.max(0, Math.min(a, limit(anchor))), focus, Math.max(0, Math.min(f, limit(focus))));
+		}
+	}
+	restoreScroll(state.scroll);
+}
+function restoreScroll(scroll: readonly [number, number]) {
+	releaseScroll?.();
+	const root = document.documentElement;
+	const anchoring = root.style.overflowAnchor;
+	// Keep the saved offset while the restored passage status changes layout in this frame.
+	root.style.overflowAnchor = "none";
+	window.scrollTo(...scroll);
+	let frame = requestAnimationFrame(() => {
+		frame = requestAnimationFrame(() => releaseScroll?.());
+	});
+	releaseScroll = () => {
+		cancelAnimationFrame(frame);
+		root.style.overflowAnchor = anchoring;
+		releaseScroll = undefined;
+	};
+}

package/src/client/react/remainingRoute.ts

@@ -0,0 +1,21 @@
+export function remainingRoute(pathname: string) {
+	switch (pathname) {
+		case "/_board/library":
+			return "library";
+		case "/_board/goals":
+			return "goals";
+		case "/_board/system":
+			return "system";
+		case "/_board/start":
+			return "start";
+		case "/_board/respond":
+			return "respond";
+		case "/_board/handoff":
+			return "handoff";
+		case "/_board/result":
+			return "result";
+		default:
+			return undefined;
+	}
+}
+export type RemainingRoute = NonNullable<ReturnType<typeof remainingRoute>>;

package/src/client/react/retryPage.ts

@@ -0,0 +1,15 @@
+import type * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import { pageQueries } from "./pageQueries.ts";
+import type { ShellApi } from "./ShellApi.ts";
+
+export function retryPage(api: ShellApi, registry: AtomRegistry.AtomRegistry, url: string) {
+	const doc = document.getElementById("doc");
+	const queries = pageQueries(api, doc?.dataset.projection ?? "document", url);
+	if (Number(doc?.dataset.status ?? 200) < 400 && !queries.some((query) => registry.get(query)._tag === "Failure")) {
+		return false;
+	}
+	for (const query of queries) {
+		registry.refresh(query);
+	}
+	return true;
+}

package/src/client/react/savedViews.ts

@@ -0,0 +1,84 @@
+import { Option, Schema } from "effect";
+import { useRef, useState } from "react";
+
+const Entry = Schema.Struct({ name: Schema.NonEmptyString, url: Schema.String });
+export function localView(value: string) {
+	try {
+		const url = new URL(value, location.href);
+		if (value.length > 8192 || url.origin !== location.origin || url.pathname !== "/_board/work") {
+			return undefined;
+		}
+		for (const name of [...url.searchParams.keys()]) {
+			if (!["view", "board", "owner", "status", "q", "sort"].includes(name)) {
+				url.searchParams.delete(name);
+			}
+		}
+		return url.pathname + url.search;
+	} catch {
+		return undefined;
+	}
+}
+function restore(key: string) {
+	const views: (typeof Entry.Type)[] = [];
+	try {
+		const saved: unknown = JSON.parse(localStorage.getItem(key) ?? "[]");
+		if (Array.isArray(saved)) {
+			for (const raw of saved) {
+				const entry = Option.getOrUndefined(Schema.decodeUnknownOption(Entry)(raw));
+				const url = entry && localView(entry.url);
+				if (!(entry && url && entry.name.trim()) || entry.name.length > 60 || views.some((view) => view.name === entry.name)) {
+					continue;
+				}
+				views.push({ name: entry.name, url });
+				if (views.length === 10) {
+					break;
+				}
+			}
+		}
+		return { notice: "", views };
+	} catch {
+		return { notice: "Saved views could not be restored; new views apply to this page until saved.", views };
+	}
+}
+export function useSavedViews() {
+	const key = `work-board:views:${document.documentElement.dataset.workspace}`;
+	const [saved, setSaved] = useState(() => restore(key));
+	const savedRef = useRef(saved);
+	const [selected, select] = useState("");
+	function persist(views: typeof saved.views) {
+		let notice = "";
+		try {
+			localStorage.setItem(key, JSON.stringify(views));
+		} catch {
+			notice = "Saved views apply to this page only; browser storage is unavailable.";
+		}
+		savedRef.current = { notice, views };
+		setSaved(savedRef.current);
+	}
+	function save(name: string, url: string) {
+		const local = localView(url);
+		if (!(name && local)) {
+			return;
+		}
+		if (savedRef.current.views.length === 10 && !savedRef.current.views.some((view) => view.name === name)) {
+			setSaved({ ...saved, notice: "You have 10 saved views. Remove one or update an existing name." });
+			return;
+		}
+		persist([{ name, url: local }, ...savedRef.current.views.filter((view) => view.name !== name)]);
+		select(name);
+	}
+	return {
+		...saved,
+		clear: () => {
+			persist([]);
+			select("");
+		},
+		remove: () => {
+			persist(saved.views.filter((view) => view.name !== selected));
+			select("");
+		},
+		save,
+		select,
+		selected,
+	};
+}

package/src/client/react/scheduleReading.ts

@@ -0,0 +1,46 @@
+import { flushSync } from "react-dom";
+import { passageStatus, revealPassage, scrollToPassage } from "#client/react/readingPassage.ts";
+import { type captureReading, restoreReading } from "#client/react/readingState.ts";
+export function scheduleReading(
+	doc: HTMLElement,
+	reading: ReturnType<typeof captureReading> | null,
+	hash: string,
+	active: () => boolean,
+	setStatus: (status: string) => void,
+	focus: boolean,
+) {
+	let restored = false;
+	function restore() {
+		if (restored || !active()) {
+			document.removeEventListener("board-reading-ready", restore);
+			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 });
+		}
+		const passage = hash ? `#${hash}` : "";
+		if (reading) {
+			restoreReading(reading);
+		}
+		// Readiness can arrive from a React effect; reveal the target before scrolling or focusing it.
+		queueMicrotask(() => {
+			if (!active()) {
+				return;
+			}
+			flushSync(() => revealPassage(passage));
+			if (reading) {
+				flushSync(() => setStatus(passageStatus(passage)));
+			} else {
+				setStatus(scrollToPassage(passage));
+			}
+		});
+	}
+	document.addEventListener("board-reading-ready", restore);
+	requestAnimationFrame(restore);
+}

package/src/client/react/searchCommands.ts

@@ -0,0 +1,40 @@
+import type { GoalsProjection } from "#browser/views/GoalsProjection.ts";
+
+export interface SearchItem {
+	readonly command?: string;
+	readonly file?: string;
+	readonly href?: string;
+	readonly id?: string | undefined;
+	readonly itemKind?: string | undefined;
+	readonly kind: string;
+	readonly line?: number | undefined;
+	readonly snippet?: string;
+	readonly status?: string | undefined;
+	readonly title: string;
+}
+export const searchCommands: readonly SearchItem[] = [
+	{ href: "/", kind: "command", title: "Go to Today" },
+	{ href: "/_board/goals", kind: "command", title: "Go to Goals" },
+	{ href: "/_board/work?view=board", kind: "command", title: "Go to Now" },
+	{ href: "/_board/library", kind: "command", title: "Go to Library" },
+	{ href: "/_board/system", kind: "command", title: "Go to System" },
+	{ command: "sidebar-toggle", kind: "command", title: "Show or hide files" },
+	{ command: "density", kind: "command", title: "Toggle compact density" },
+	{ command: "theme", kind: "command", title: "Toggle light or dark theme" },
+];
+
+export function goalCommands(goals: GoalsProjection["goals"]): readonly SearchItem[] {
+	return goals.map((goal) => ({
+		href: `/_board/item/${encodeURIComponent(goal.id)}/`,
+		id: goal.id,
+		kind: "command",
+		title: `Go to ${goal.title}`,
+	}));
+}
+export function matchingCommands(goals: GoalsProjection["goals"], query: string): readonly SearchItem[] {
+	const terms = query.normalize("NFKC").toLowerCase().split(/\s+/u).filter(Boolean);
+	return [...searchCommands, ...goalCommands(goals)].filter((item) => {
+		const text = `${item.title} ${item.id ?? ""}`.normalize("NFKC").toLowerCase();
+		return terms.every((term) => text.includes(term));
+	});
+}

package/src/client/react/searchStatus.ts

@@ -0,0 +1,30 @@
+export function searchStatus(
+	text: string,
+	pending: boolean,
+	failed: boolean,
+	data:
+		| {
+				readonly total: number;
+				readonly results: readonly unknown[];
+				readonly unavailable: readonly string[];
+		  }
+		| undefined,
+) {
+	if (!text) {
+		return "Type to search this workspace, or choose a command.";
+	}
+	if (failed) {
+		return "Search could not be completed. Press Search to retry.";
+	}
+	if (pending || !data) {
+		return "Searching…";
+	}
+	let message = "No document matches.";
+	if (data.total) {
+		message = `${data.total > data.results.length ? `Showing ${data.results.length} of ` : ""}${data.total} matches.`;
+	}
+	if (data.unavailable.length > 0) {
+		message += ` Could not read ${data.unavailable.length} files; results are incomplete.`;
+	}
+	return message;
+}

package/src/client/react/shellIds.ts

@@ -1,19 +1,36 @@
 export const shellIds = {
 	"breadcrumbs": "breadcrumbs",
+	clearSavedViews: "clear-saved-views",
 	"density": "density",
 	"doc": "doc",
 	"favoriteToggle": "favorite-toggle",
 	"files": "files",
+	handoffClear: "handoff-clear",
+	handoffForm: "handoff-form",
+	handoffHistory: "handoff-history",
+	handoffPrepared: "handoff-prepared",
+	handoffPreview: "handoff-preview",
+	handoffPreviewContent: "handoff-preview-content",
+	handoffStatus: "handoff-status",
+	handoffSubmit: "handoff-submit",
 	"homeOpen": "home-open",
 	"inboxCount": "inbox-count",
 	"inboxOpen": "inbox-open",
 	"inboxTopbar": "inbox-topbar",
 	"inboxTopbarCount": "inbox-topbar-count",
+	libraryClose: "library-close",
+	libraryDialog: "library-dialog",
 	"libraryOpen": "library-open",
+	libraryTitle: "library-title",
 	"live": "live",
 	"navigationStatus": "navigation-status",
+	openSavedView: "open-saved-view",
+	phoneMore: "phone-more",
+	phoneMoreTitle: "phone-more-title",
 	"preferenceStatus": "preference-status",
 	"primaryNavigation": "primary-navigation",
+	readingLibrary: "reading-library",
+	removeSavedView: "remove-saved-view",
 	"responseClear": "response-clear",
 	"responseDraftRecovery": "response-draft-recovery",
 	"responseForm": "response-form",
@@ -22,11 +39,51 @@ export const shellIds = {
 	"responsePreviewContent": "response-preview-content",
 	"responseStatus": "response-status",
 	"responseSubmit": "response-submit",
+	resultActions: "result-actions",
+	resultCriteria: "result-criteria",
+	resultFeedback: "result-feedback",
+	resultReport: "result-report",
+	savedView: "saved-view",
+	savedViewStatus: "saved-view-status",
+	savedWorkViews: "saved-work-views",
+	saveWorkView: "save-work-view",
+	searchClose: "search-close",
+	searchDialog: "search-dialog",
+	searchForm: "search-form",
 	"searchOpen": "search-open",
+	searchQuery: "search-query",
+	searchResults: "search-results",
+	searchStatus: "search-status",
+	searchTitle: "search-title",
 	"sidebar": "sidebar",
 	"sidebarBackdrop": "sidebar-backdrop",
 	"sidebarToggle": "sidebar-toggle",
 	"startOpen": "start-open",
 	"theme": "theme",
 	"updatesToggle": "updates-toggle",
+	viewName: "view-name",
+	visualActual: "visual-actual",
+	visualClose: "visual-close",
+	visualContent: "visual-content",
+	visualContext: "visual-context",
+	visualDialog: "visual-dialog",
+	visualDownload: "visual-download",
+	visualFit: "visual-fit",
+	visualFullscreen: "visual-fullscreen",
+	visualIn: "visual-in",
+	visualNext: "visual-next",
+	visualOut: "visual-out",
+	visualPrevious: "visual-previous",
+	visualStage: "visual-stage",
+	visualStatus: "visual-status",
+	visualTitle: "visual-title",
+	visualViewport: "visual-viewport",
+	workBoard: "work-board",
+	workDetail: "work-detail",
+	workFilters: "work-filters",
+	workOwner: "work-owner",
+	workQuery: "work-query",
+	workResults: "work-results",
+	workSort: "work-sort",
+	workStatus: "work-status",
 } as const;

package/src/client/react/useAppearance.ts

@@ -0,0 +1,55 @@
+import { Option, Schema } from "effect";
+import { useEffect, useRef, useState } from "react";
+import { useMedia } from "./useMedia.ts";
+
+const Appearance = Schema.Struct({
+	closed: Schema.optional(Schema.Unknown),
+	density: Schema.optional(Schema.Unknown),
+	theme: Schema.optional(Schema.Unknown),
+});
+function restore(key: string) {
+	try {
+		const saved = Option.getOrUndefined(Schema.decodeUnknownOption(Appearance)(JSON.parse(localStorage.getItem(key) ?? "{}")));
+		return {
+			closed: saved?.closed === true,
+			density: saved?.density === "compact" ? "compact" : "comfortable",
+			notice: "",
+			theme: saved?.theme === "light" || saved?.theme === "dark" ? saved.theme : "system",
+		};
+	} catch {
+		return { closed: false, density: "comfortable", notice: "Preferences apply to this page only.", theme: "system" };
+	}
+}
+export function useAppearance() {
+	const key = `work-board:appearance:${document.documentElement.dataset.workspace}`;
+	const [value, setValue] = useState(() => restore(key));
+	const valueRef = useRef(value);
+	const dark = useMedia("(prefers-color-scheme: dark)");
+	const systemScheme = dark ? "dark" : "light";
+	const scheme = value.theme === "system" ? systemScheme : value.theme;
+	useEffect(() => {
+		const root = document.documentElement;
+		root.dataset.theme = value.theme;
+		root.dataset.density = value.density;
+		root.dataset.scheme = scheme;
+		root.classList.toggle("dark", scheme === "dark");
+		const doc = document.getElementById("doc");
+		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 };
+		let notice = "";
+		try {
+			localStorage.setItem(key, JSON.stringify(appearance));
+		} catch {
+			notice = "Preferences apply to this page only.";
+		}
+		valueRef.current = { ...appearance, notice };
+		setValue(valueRef.current);
+	}
+	return { ...value, change };
+}
+export type AppearanceControls = ReturnType<typeof useAppearance>;