@shivaedev/work-board 0.11.0 → 0.13.0

package/src/browser/navigation/schema.ts

@@ -0,0 +1,27 @@
+import { Schema } from "effect";
+
+export const NavigationFile = Schema.Struct({
+	current: Schema.Boolean,
+	href: Schema.String,
+	modified: Schema.Number,
+	name: Schema.String,
+	path: Schema.String,
+});
+export type NavigationFile = typeof NavigationFile.Type;
+
+export class NavigationFolder extends Schema.Class<NavigationFolder>("NavigationFolder")({
+	active: Schema.Boolean,
+	count: Schema.Number,
+	files: Schema.Array(NavigationFile),
+	folders: Schema.Array(Schema.suspend((): Schema.Codec<NavigationFolder> => NavigationFolder)),
+	name: Schema.String,
+	path: Schema.String,
+}) {}
+
+export const Navigation = Schema.Struct({
+	home: Schema.optional(Schema.Struct({ file: Schema.String, identity: Schema.optional(Schema.String) })),
+	inboxCount: Schema.NullOr(Schema.Number),
+	records: Schema.Struct({ active: Schema.Boolean, count: Schema.Number, files: Schema.Array(NavigationFile) }),
+	tree: NavigationFolder,
+});
+export type Navigation = typeof Navigation.Type;

package/src/browser/responses/schema.ts

@@ -43,11 +43,6 @@ export const RecordedResponse = Schema.Struct({ body: Schema.String, id: Identit
 export const Reading = Schema.Struct({ question: Question, responses: Schema.Array(RecordedResponse) });
 export const WaitReading = Schema.Struct({ expired: Schema.Boolean, question: Question, response: Schema.optional(RecordedResponse) });
 export type WaitReading = typeof WaitReading.Type;
-export class ResponseFailed extends Schema.TaggedError<ResponseFailed>()("ResponseFailed", {
-	cause: Schema.optional(Schema.Defect()),
-	code: Schema.Literals(["Disabled", "Missing", "Stale", "Conflict", "Unavailable", "Unsupported", "Uncertain", "Unanswered"]),
-	message: Schema.String,
-}) {}
 export const DraftInput = Schema.Struct({
 	answers: Schema.optional(Answers),
 	author: ResponseRecord.fields.author,

package/src/browser/views/ResultProjection.ts

@@ -0,0 +1,37 @@
+import { Schema } from "effect";
+import { Document } from "#browser/document/schema.ts";
+import { Question, RecordedResponse } from "#browser/responses/schema.ts";
+
+const Link = Schema.Struct({ href: Schema.optional(Schema.String), label: Schema.String });
+const Claim = Schema.Struct({
+	checkedRevision: Schema.optional(Schema.String),
+	method: Schema.optional(Schema.String),
+	observedAt: Schema.optional(Schema.String),
+	outcome: Schema.optional(Schema.String),
+	problem: Schema.String,
+	source: Link,
+});
+export const ResultProjection = Schema.Struct({
+	document: Document,
+	feedback: Schema.Array(
+		Schema.Struct({
+			matching: Schema.Boolean,
+			question: Question,
+			questionFile: Schema.String,
+			response: RecordedResponse,
+			responseFile: Schema.String,
+			supersedesFile: Schema.optional(Schema.String),
+		}),
+	),
+	feedbackUnknown: Schema.Boolean,
+	revision: Schema.String,
+	targets: Schema.Array(
+		Schema.Struct({
+			available: Schema.Boolean,
+			criteria: Schema.Array(Schema.Struct({ claims: Schema.Array(Claim), link: Link, text: Schema.String })),
+			link: Link,
+			status: Schema.optional(Schema.String),
+		}),
+	),
+});
+export type ResultProjection = typeof ResultProjection.Type;

package/src/browser/views/remaining.ts

@@ -0,0 +1,26 @@
+import { Schema } from "effect";
+import { Document, DocumentRequest } from "#browser/document/schema.ts";
+import { HandoffPreview, HandoffReading } from "#browser/handoffs/schema.ts";
+import { DiagnosticsSnapshot } from "#diagnostics/daemonContract.ts";
+
+export const DiagnosticsProjection = Schema.Struct({ now: Schema.Number, sources: DiagnosticsSnapshot });
+export type DiagnosticsProjection = typeof DiagnosticsProjection.Type;
+
+export const StartProjection = Schema.Struct({
+	empty: Schema.Boolean,
+	templates: Schema.Array(Schema.Struct({ file: Schema.String, label: Schema.String, source: Schema.String })),
+});
+export type StartProjection = typeof StartProjection.Type;
+export const RespondProjection = Schema.Struct({ document: Document, request: DocumentRequest });
+export type RespondProjection = typeof RespondProjection.Type;
+export const HandoffProjection = Schema.Struct({
+	background: Schema.String,
+	goal: Schema.String,
+	item: Schema.String,
+	nextAction: Schema.String,
+	reading: HandoffReading,
+	source: Schema.optional(HandoffPreview),
+	unavailable: Schema.optional(Schema.String),
+	writable: Schema.Boolean,
+});
+export type HandoffProjection = typeof HandoffProjection.Type;

package/src/browser/views/schema.ts

@@ -0,0 +1,68 @@
+import { Schema } from "effect";
+import { Document } from "#browser/document/schema.ts";
+import { Metadata } from "#metadata/schema.ts";
+import { State } from "./state.ts";
+
+const Link = Schema.Struct({ href: Schema.optional(Schema.String), label: Schema.String });
+const WorkItem = Schema.Struct({
+	file: Schema.String,
+	id: Schema.String,
+	metadata: Metadata,
+	title: Schema.String,
+	waiting: Schema.optional(Schema.String),
+});
+export const WorkProjection = Schema.Struct({
+	boards: Schema.Array(WorkItem),
+	issues: Schema.Array(Schema.String),
+	items: Schema.Array(WorkItem),
+	rows: Schema.Array(WorkItem),
+	selected: Schema.optional(Document),
+	selectedOutside: Schema.Boolean,
+	selectionProblem: Schema.optional(Schema.String),
+	state: State,
+	title: Schema.String,
+	validBoard: Schema.Boolean,
+});
+export type WorkProjection = typeof WorkProjection.Type;
+export const InboxProjection = Schema.Struct({
+	complete: Schema.Boolean,
+	items: Schema.Array(
+		Schema.Struct({
+			file: Schema.String,
+			href: Schema.String,
+			id: Schema.String,
+			modified: Schema.optional(Schema.Number),
+			problem: Schema.optional(Schema.String),
+			reason: Schema.String,
+			title: Schema.String,
+		}),
+	),
+	sourceIssues: Schema.Boolean,
+});
+export type InboxProjection = typeof InboxProjection.Type;
+export const OverviewProjection = Schema.Struct({
+	complete: Schema.Boolean,
+	entries: Schema.Array(
+		Schema.Struct({
+			file: Schema.String,
+			href: Schema.String,
+			id: Schema.String,
+			itemId: Schema.String,
+			kind: Schema.Literals(["decision", "review", "blocker"]),
+			line: Schema.Number,
+			reason: Schema.String,
+			responseFrom: Schema.Array(Schema.String),
+			title: Schema.String,
+			unblocks: Schema.Array(Link),
+		}),
+	),
+	inboxCount: Schema.Number,
+	issues: Schema.Array(Schema.Struct({ file: Schema.String, line: Schema.Number, message: Schema.String })),
+	unavailable: Schema.Array(Schema.String),
+});
+export type OverviewProjection = typeof OverviewProjection.Type;
+export const BoardProjection = Schema.Struct({
+	counts: Schema.Array(Schema.Struct({ count: Schema.Number, title: Schema.String })),
+	document: Document,
+});
+export type BoardProjection = typeof BoardProjection.Type;

package/src/client/client.ts

@@ -0,0 +1,89 @@
+import { Effect, Layer } from "effect";
+import { FetchHttpClient } from "effect/http";
+import type * as AsyncResult from "effect/reactivity/AsyncResult";
+import type * as Atom from "effect/reactivity/Atom";
+import * as AtomRegistry from "effect/reactivity/AtomRegistry";
+import * as AtomRpc from "effect/reactivity/AtomRpc";
+import type * as Reactivity from "effect/reactivity/Reactivity";
+import { RpcClient, RpcSerialization } from "effect/rpc";
+import type { RpcClientError } from "effect/rpc/RpcClientError";
+import { type Bound, bind } from "@shivaedev/effect-contract/bind.ts";
+import type { Contract } from "@shivaedev/effect-contract/contract.ts";
+import { live } from "@shivaedev/effect-contract/live.ts";
+import { type ResumeOptions, resumeSignal } from "@shivaedev/effect-contract/resume.ts";
+import type { InternalServerError } from "@shivaedev/platform/errors/taxonomy.ts";
+import { Subscribe, workContract, workRpcs } from "#rpc/contract.ts";
+import { handoffContract } from "#rpc/handoffContract.ts";
+import { responseContract } from "#rpc/responseContract.ts";
+
+export interface Reader {
+	readonly reader: unique symbol;
+}
+
+type BoundContract<TContract> =
+	TContract extends Contract<infer TName, infer TQueries, infer TCommands, infer TRpcs, infer TStreams>
+		? Bound<TName, TQueries, TCommands, TRpcs, Reader, TStreams>
+		: never;
+export interface BrowserClient {
+	readonly api: BoundContract<typeof workContract>;
+	readonly handoffs: BoundContract<typeof handoffContract>;
+	readonly mutate: <A, E>(effect: Effect.Effect<A, E, Reader | Reactivity.Reactivity>, signal?: AbortSignal) => Promise<A>;
+	readonly read: <A, E>(atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>, signal?: AbortSignal) => Promise<A>;
+	readonly registry: AtomRegistry.AtomRegistry;
+	readonly responses: BoundContract<typeof responseContract>;
+	readonly run: <A, E>(effect: Effect.Effect<A, E, Reader>, signal?: AbortSignal) => Promise<A>;
+	readonly updates: ReturnType<typeof live<Reader, InternalServerError | RpcClientError, never>>;
+}
+
+export function browserClient(url: string, options: ResumeOptions = {}): BrowserClient {
+	class Client extends AtomRpc.Service<Reader>()("WorkBoard/Reader", {
+		group: workRpcs,
+		protocol: RpcClient.layerProtocolHttp({ url: `${url}/_board/rpc` }).pipe(Layer.provide([FetchHttpClient.layer, RpcSerialization.layerNdjson])),
+	}) {}
+	const api = bind(workContract, Client);
+	const registry = AtomRegistry.make({ "defaultIdleTTL": 0, timeoutResolution: 1 });
+	const updates = live(Client.runtime, {
+		resume: resumeSignal(options),
+		resyncKeys: Subscribe.reads(undefined),
+		stream: api.subscribe.run(undefined),
+	});
+	registry.mount(updates.connection);
+	async function read<A, E>(atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>, signal?: AbortSignal) {
+		try {
+			return await Effect.runPromise(AtomRegistry.getResult(registry, atom, { suspendOnWaiting: true }), { signal });
+		} catch (error) {
+			if (signal?.aborted) {
+				const canceled = new Error("Reading canceled", { cause: error });
+				canceled.name = "AbortError";
+				throw canceled;
+			}
+			throw error;
+		}
+	}
+	async function run<A, E>(effect: Effect.Effect<A, E, Reader>, signal?: AbortSignal) {
+		try {
+			return await Effect.runPromise(
+				Effect.flatMap(AtomRegistry.getResult(registry, Client.runtime), (context) => Effect.provideContext(effect, context)),
+				{ signal },
+			);
+		} catch (error) {
+			if (signal?.aborted) {
+				const canceled = new Error("Reading canceled", { cause: error });
+				canceled.name = "AbortError";
+				throw canceled;
+			}
+			throw error;
+		}
+	}
+	async function mutate<A, E>(effect: Effect.Effect<A, E, Reader | Reactivity.Reactivity>, signal?: AbortSignal) {
+		const result = await Effect.runPromise(Effect.result(AtomRegistry.getResult(registry, Client.runtime.atom(effect), { suspendOnWaiting: true })), {
+			signal,
+		});
+		if (result._tag === "Failure") {
+			throw result.failure;
+		}
+		return result.success;
+	}
+	const responses = bind(responseContract, Client);
+	return { api, handoffs: bind(handoffContract, Client), mutate, read, registry, responses, run, updates };
+}

package/src/client/document/Details.ts

@@ -0,0 +1,22 @@
+import { type ComponentProps, createContext, createElement, useContext, useLayoutEffect, useRef } from "react";
+import type { ExtraProps } from "react-markdown";
+import { textContent } from "#render/textContent.ts";
+
+export const DetailStatesContext = createContext(new Map<string, boolean>());
+
+export function DocumentDetails({ node, children, ...props }: ComponentProps<"details"> & ExtraProps) {
+	const states = useContext(DetailStatesContext);
+	const elementRef = useRef<HTMLDetailsElement>(null);
+	const identity = node?.children.map(textContent).join("") ?? "";
+	useLayoutEffect(() => {
+		const element = elementRef.current;
+		if (!element) {
+			return;
+		}
+		element.open = states.get(identity) ?? props.open ?? false;
+		return () => {
+			states.set(identity, element.open);
+		};
+	}, [identity, props.open, states]);
+	return createElement("details", { ...props, ref: elementRef }, children);
+}

package/src/client/document/Mermaid.ts

@@ -0,0 +1,124 @@
+import { createElement, useCallback, useEffect, useId, useRef, useState } from "react";
+
+const drawings = new Map<string, { readonly source: string; readonly svg: string }>();
+
+const MAX_DRAWINGS = 30;
+
+type Drawing = { readonly source: string; readonly svg: string } | { readonly source: string; readonly error: string };
+
+export function Mermaid({ source }: { readonly source: string }) {
+	const id = useId().replace(/[^a-z\d_-]/giu, "");
+	const [drawing, setDrawing] = useState<Drawing | undefined>(() => drawings.get(`${document.documentElement.dataset.scheme ?? "light"}:${source}`));
+	const previousSourceRef = useRef(source);
+	const [theme, setTheme] = useState(() => document.documentElement.dataset.scheme ?? "light");
+	useEffect(() => {
+		function sync() {
+			setTheme(document.documentElement.dataset.scheme ?? "light");
+		}
+		document.addEventListener("board-theme", sync);
+		return () => document.removeEventListener("board-theme", sync);
+	}, []);
+	useEffect(() => {
+		if (previousSourceRef.current !== source) {
+			for (const [key, value] of drawings) {
+				if (value.source === previousSourceRef.current) {
+					drawings.delete(key);
+				}
+			}
+			previousSourceRef.current = source;
+		}
+		const cached = drawings.get(`${theme}:${source}`);
+		if (cached) {
+			setDrawing(cached);
+			return;
+		}
+		let current = true;
+		async function draw() {
+			try {
+				const { default: mermaid } = await import("mermaid");
+				function token(name: string) {
+					return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+				}
+				mermaid.initialize({
+					securityLevel: "strict",
+					startOnLoad: false,
+					suppressErrorRendering: true,
+					theme: "base",
+					themeVariables: {
+						background: token("--bg"),
+						darkMode: theme === "dark",
+						fontFamily: token("--sans"),
+						lineColor: token("--muted"),
+						primaryBorderColor: token("--border"),
+						primaryColor: token("--surface"),
+						primaryTextColor: token("--text"),
+						textColor: token("--text"),
+					},
+				});
+				const { svg } = await mermaid.render(`document-diagram-${id}`, source);
+				if (current) {
+					setDrawing(retainDrawing(theme, source, svg));
+				}
+			} catch (error) {
+				if (current) {
+					setDrawing({ error: error instanceof Error ? error.message : String(error), source });
+				}
+			}
+		}
+		void draw();
+		return () => {
+			current = false;
+		};
+	}, [id, source, theme]);
+	const shown = drawing?.source === source || (drawing && "svg" in drawing) ? drawing : undefined;
+	const state = drawingState(shown, source);
+	const svgSource = shown && "svg" in shown ? shown.svg : undefined;
+	const svgRef = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (element && svgSource) {
+				const svg = new DOMParser().parseFromString(svgSource, "text/html").body.firstElementChild;
+				if (svg) {
+					element.replaceChildren(document.importNode(svg, true));
+				}
+			}
+		},
+		[svgSource],
+	);
+	return createElement(
+		"figure",
+		{ className: "diagram", "data-error": shown && "error" in shown ? shown.error : undefined, "data-react-diagram": "", "data-state": state },
+		shown && "svg" in shown
+			? createElement("div", {
+					className: "diagram-svg",
+					ref: svgRef,
+				})
+			: null,
+		createElement("pre", { className: "diagram-source" }, source),
+		createElement(
+			"span",
+			{ "data-visual-tools": "" },
+			createElement("button", { "data-inspect-diagram": "", disabled: state !== "drawn", type: "button" }, "Inspect diagram"),
+		),
+		shown && "error" in shown ? createElement("p", { "data-diagram-error": "", role: "status" }, `Diagram could not be drawn: ${shown.error}`) : null,
+	);
+}
+
+function drawingState(shown: Drawing | undefined, source: string): string {
+	if (!shown) {
+		return "pending";
+	}
+	if ("error" in shown) {
+		return "failed";
+	}
+	return shown.source === source ? "drawn" : "redrawing";
+}
+
+function retainDrawing(theme: string, source: string, svg: string) {
+	const next = { source, svg };
+	drawings.set(`${theme}:${source}`, next);
+	const oldest = drawings.keys().next().value;
+	if (drawings.size > MAX_DRAWINGS && oldest !== undefined) {
+		drawings.delete(oldest);
+	}
+	return next;
+}

package/src/client/document/View.ts

@@ -0,0 +1,104 @@
+import { Children, createContext, createElement, Fragment, type ReactNode, useContext, useMemo } from "react";
+import { type Components, MarkdownHooks } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import type { PluggableList } from "unified";
+import type { Document } from "#browser/document/schema.ts";
+import { Age } from "#client/react/Age";
+import { documentHeadings } from "#render/documentHeadings.ts";
+import { documentLinks } from "#render/documentLinks.ts";
+import { documentPlugins } from "#render/documentPlugins.ts";
+import { footnoteIds } from "#render/footnotes.ts";
+import { boardLayout } from "./boardLayout.ts";
+import { DetailStatesContext, DocumentDetails } from "./Details.ts";
+import { highlightDocument } from "./highlight.ts";
+import { documentLayout, documentSourceId } from "./layout.ts";
+import { Mermaid } from "./Mermaid.ts";
+
+const components: Components = {
+	code: ({ node: _node, className, children, ...props }) =>
+		className?.split(" ").includes("language-mermaid")
+			? createElement(Mermaid, { source: String(children) })
+			: createElement("code", { ...props, className }, children),
+	details: DocumentDetails,
+	img: ({ node: _node, ...props }) => createElement("img", { ...props, loading: "lazy" }),
+	pre: ({ node, children, ...props }) => {
+		const code = node?.children[0];
+		return code?.type === "element" && Array.isArray(code.properties.className) && code.properties.className.includes("language-mermaid")
+			? createElement(Fragment, null, children)
+			: createElement("pre", props, children);
+	},
+	span: ({ node, children, ...props }) => {
+		const modified = node?.properties.dataModified ?? node?.properties["data-modified"];
+		if (modified !== undefined && props.className?.split(" ").includes("age")) {
+			return createElement(Age, { modified: Number(modified), short: props.className.split(" ").includes("short") });
+		}
+		return createElement("span", props, children);
+	},
+};
+
+export interface DocumentViewProps {
+	readonly board?: readonly { readonly count: number; readonly title: string }[];
+	readonly context?: ReactNode;
+	readonly document: Document;
+	readonly idPrefix?: string;
+	readonly introduction?: ReactNode;
+}
+
+const LayoutContext = createContext<{ readonly context: ReactNode; readonly introduction: ReactNode; readonly file: string }>({
+	context: null,
+	file: "",
+	introduction: null,
+});
+const layoutComponents: Components = { ...components, header: LayoutHeader };
+function LayoutHeader({ node: _node, children, ...props }: React.ComponentProps<"header"> & import("react-markdown").ExtraProps) {
+	const { context, introduction, file } = useContext(LayoutContext);
+	const header = createElement("header", props, children);
+	if (props.className !== "item-introduction") {
+		return header;
+	}
+	return createElement(
+		Fragment,
+		null,
+		createElement("header", props, Children.count(children) > 0 ? children : createElement("h1", null, file), introduction),
+		context,
+	);
+}
+export function DocumentView({ document, idPrefix = "", context, introduction, board }: DocumentViewProps) {
+	const layout = context !== undefined;
+	const identity = document.identity ?? document.file;
+	const states = useMemo(() => ({ identity, values: new Map<string, boolean>() }), [identity]);
+	const rehypePlugins: PluggableList = [
+		rehypeRaw,
+		highlightDocument,
+		footnoteIds(idPrefix),
+		documentLinks(document.file, document.links),
+		documentHeadings(true).plugin,
+	];
+	if (board) {
+		rehypePlugins.push([boardLayout, board, document.modified, document.file, documentSourceId(document)]);
+	}
+	if (layout) {
+		rehypePlugins.push([documentLayout, documentSourceId(document)]);
+	}
+	return createElement(
+		layout ? "div" : "article",
+		{ className: layout ? "document-layout" : "doc" },
+		createElement(
+			DetailStatesContext.Provider,
+			{ key: states.identity, value: states.values },
+			createElement(
+				LayoutContext.Provider,
+				{ value: { context, file: document.file, introduction } },
+				createElement(
+					MarkdownHooks,
+					{
+						components: layout ? layoutComponents : components,
+						rehypePlugins,
+						remarkPlugins: documentPlugins(new Map(Object.entries(document.questionActions))),
+					},
+					document.source,
+				),
+			),
+		),
+	);
+}

package/src/client/document/boardLayout.ts

@@ -0,0 +1,80 @@
+import type { Element, ElementContent, Root } from "hast";
+
+function element(tagName: string, children: ElementContent[] = [], className?: string): Element {
+	return { children, properties: className ? { className: [className] } : {}, tagName, type: "element" };
+}
+interface Draft {
+	readonly board: Element;
+	closing: boolean;
+	readonly footer: Element;
+	readonly header: Element;
+	item: Element | undefined;
+	section: Element | undefined;
+}
+function place(draft: Draft, node: ElementContent, afterHeading: boolean) {
+	if (node.type === "element" && node.tagName === "hr" && afterHeading && draft.section) {
+		draft.closing = true;
+		return;
+	}
+	if (draft.closing) {
+		draft.footer.children.push(node);
+		return;
+	}
+	if (node.type === "element" && node.tagName === "h2") {
+		draft.section = element("section", [node]);
+		draft.board.children.push(draft.section);
+		draft.item = undefined;
+		return;
+	}
+	if (!draft.section) {
+		draft.header.children.push(node);
+		return;
+	}
+	if (node.type === "element" && node.tagName === "h3") {
+		draft.item = element("article", [node], "item");
+		draft.section.children.push(draft.item);
+		return;
+	}
+	if (!draft.item) {
+		draft.item = element("div", [], "notes");
+		draft.section.children.push(draft.item);
+	}
+	draft.item.children.push(node);
+}
+function summary(counts: readonly { readonly count: number; readonly title: string }[]) {
+	const result = element("p", [], "counts");
+	for (const [index, count] of counts.entries()) {
+		if (index > 0) {
+			result.children.push({ type: "text", value: " · " });
+		}
+		result.children.push(
+			element("span", [element("b", [{ type: "text", value: String(count.count) }]), { type: "text", value: ` ${count.title.toLowerCase()}` }]),
+		);
+	}
+	return result;
+}
+export function boardLayout(counts: readonly { readonly count: number; readonly title: string }[], modified: number, file: string, source: string) {
+	return (tree: Root) => {
+		const nodes = tree.children.filter((node): node is ElementContent => node.type !== "doctype" && !(node.type === "text" && !node.value.trim()));
+		const lastHeading = nodes.findLastIndex((node) => node.type === "element" && /^h[1-6]$/u.test(node.tagName));
+		const draft: Draft = {
+			board: element("div", [], "board"),
+			closing: false,
+			footer: element("footer"),
+			header: element("header", [], "board-head"),
+			item: undefined,
+			section: undefined,
+		};
+		for (const [index, node] of nodes.entries()) {
+			place(draft, node, index > lastHeading);
+		}
+		if (!draft.header.children.some((node) => node.type === "element" && node.tagName === "h1")) {
+			draft.header.children.unshift(element("h1", [{ type: "text", value: file }]));
+		}
+		const age = element("span", [{ type: "text", value: `updated ${new Date(modified).toISOString()}` }], "age");
+		age.properties.dataModified = modified;
+		draft.board.properties.dataSource = source;
+		draft.header.children.push(summary(counts), element("p", [age], "meta"));
+		tree.children = [draft.header, draft.board, ...(draft.footer.children.length > 0 ? [draft.footer] : [])];
+	};
+}

package/src/client/document/highlight.ts

@@ -0,0 +1,12 @@
+import type { Root } from "hast";
+import { createHighlighter, type Highlighter } from "shiki";
+import { codeBlocks, THEMES } from "#render/code.ts";
+
+let highlighter: Promise<Highlighter> | undefined;
+
+export function highlightDocument() {
+	return async (tree: Root) => {
+		highlighter ??= createHighlighter({ langs: [], themes: Object.values(THEMES) });
+		await codeBlocks(await highlighter, { diagrams: false })()(tree);
+	};
+}

package/src/client/document/layout.ts

@@ -0,0 +1,29 @@
+import type { Root } from "hast";
+import type { Document } from "#browser/document/schema.ts";
+
+export function documentSourceId(document: Document): string {
+	const source = JSON.stringify([document.file, document.source, document.links, document.questionActions]);
+	let hash = 0;
+	for (const character of source) {
+		hash = (Math.imul(hash, 31) + character.charCodeAt(0)) | 0;
+	}
+	return `${source.length}:${hash}`;
+}
+export function documentLayout(source: string) {
+	return (tree: Root) => {
+		const first = tree.children.at(0);
+		const title = first?.type === "element" && first.tagName === "h1" ? first : undefined;
+		if (title) {
+			tree.children.shift();
+		}
+		tree.children = [
+			{ children: title ? [title] : [], properties: { className: ["item-introduction"] }, tagName: "header", type: "element" },
+			{
+				children: tree.children.filter((node) => node.type !== "doctype"),
+				properties: { className: ["doc"], dataSource: source },
+				tagName: "article",
+				type: "element",
+			},
+		];
+	};
+}

package/src/client/entry.ts

@@ -0,0 +1,3 @@
+import { session as ownedSession } from "./session.ts";
+
+export const session = ownedSession;

package/src/client/formDraft.ts

@@ -0,0 +1,9 @@
+import type { PersistedDraftConfig } from "@shivaedev/effect-form/persistence.ts";
+
+export function formDraft(kind: "response" | "handoff", item: string, request = ""): PersistedDraftConfig {
+	const workspace = typeof document === "undefined" ? "" : (document.documentElement.dataset.workspace ?? "");
+	return {
+		key: `work-board:form:${JSON.stringify([workspace, kind, item, request])}`,
+		storage: () => window.localStorage,
+	};
+}