@shivaedev/work-board 0.12.0 → 0.14.0

package/src/client/react/LegacyMain.tsx

@@ -1,46 +0,0 @@
-import { Option } from "effect";
-import { useLayoutEffect, useRef } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
-import { pageQuery } from "#client/page/routeQuery.ts";
-import { commitMain, legacyPage, type MainLocation } from "./legacyPage.ts";
-import type { ShellApi } from "./ShellApi.ts";
-export function LegacyMain({
-	api,
-	url,
-	initial,
-	onPage,
-}: {
-	readonly api: ShellApi;
-	readonly url: string;
-	readonly initial: string;
-	readonly onPage: (location: MainLocation) => void;
-}) {
-	const hostRef = useRef<HTMLDivElement>(null);
-	const query = useQuery(pageQuery(api, url));
-	const bootstrapRef = useRef(initial);
-	useLayoutEffect(() => {
-		if (!hostRef.current) {
-			return;
-		}
-		const html = Option.match(query.data, { onNone: () => bootstrapRef.current, onSome: (page) => page.html });
-		if (!html) {
-			return;
-		}
-		bootstrapRef.current = "";
-		const location = commitMain(hostRef.current, legacyPage(html));
-		if (location) {
-			const main = hostRef.current.querySelector<HTMLElement>("#doc");
-			if (main && Option.isSome(query.data)) {
-				main.dataset.route = url;
-				document.dispatchEvent(new Event("board-page"));
-			}
-			onPage(location);
-		}
-	}, [query.data, onPage, url]);
-	return (
-		<>
-			<div data-legacy-main ref={hostRef} />
-			{Option.isSome(query.cause) && <p role="status">Refresh failed. Your displayed page is retained.</p>}
-		</>
-	);
-}

package/src/client/react/NavigationTree.tsx

@@ -1,63 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { Navigation, NavigationFile, NavigationFolder } from "#browser/navigation/schema.ts";
-
-function Files({ files, current }: { readonly files: readonly NavigationFile[]; readonly current: string }) {
-	return files.map((file) => (
-		<li key={file.path}>
-			<a aria-current={file.path === current ? "page" : undefined} href={file.href}>
-				{file.name}
-			</a>
-			<span className="age short" data-modified={file.modified} />
-		</li>
-	));
-}
-function Folder({ folder, current }: { readonly folder: NavigationFolder; readonly current: string }) {
-	const ref = useRef<HTMLDetailsElement>(null);
-	useEffect(() => {
-		if (current.startsWith(`${folder.path}/`) && ref.current) {
-			ref.current.open = true;
-		}
-	}, [current, folder.path]);
-	return (
-		<li className="file-folder">
-			<details data-key={`folder:${folder.path}`} ref={ref}>
-				<summary>
-					{folder.name}/ ({folder.count})
-				</summary>
-				<Tree current={current} folder={folder} />
-			</details>
-		</li>
-	);
-}
-function Tree({ folder, count, current }: { readonly folder: NavigationFolder; readonly count?: string; readonly current: string }) {
-	return (
-		<ul data-inbox-count={count}>
-			<Files current={current} files={folder.files} />
-			{folder.folders.map((child) => (
-				<Folder current={current} folder={child} key={child.path} />
-			))}
-		</ul>
-	);
-}
-export function NavigationTree({ data, current }: { readonly data: Navigation; readonly current: string }) {
-	const recordsRef = useRef<HTMLDetailsElement>(null);
-	const activeRecord = data.records.files.find((file) => file.path === current)?.path;
-	useEffect(() => {
-		if (activeRecord && recordsRef.current) {
-			recordsRef.current.open = true;
-		}
-	}, [activeRecord]);
-	return (
-		<>
-			<Tree count={String(data.inboxCount ?? "?")} current={current} folder={data.tree} />
-			{data.records.count > 0 && (
-				<details data-key="fleet-records" ref={recordsRef}>
-					<summary>Fleet records ({data.records.count})</summary>
-					<ul>
-						<Files current={current} files={data.records.files} />
-					</ul>
-				</details>
-			)}
-		</>
-	);
-}

package/src/client/react/legacyPage.ts

@@ -1,69 +0,0 @@
-import { captureFocus, restoreFocus } from "#client/formFocus.ts";
-import { remember } from "#client/reconcile/signature.ts";
-import { swap } from "#client/reconcile/swap.ts";
-export interface MainLocation {
-	readonly file: string;
-	readonly view: string;
-}
-export function legacyPage(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 commitMain(host: HTMLElement, page: Document): MainLocation | undefined {
-	const incoming = page.getElementById("doc");
-	if (!incoming) {
-		return;
-	}
-	const current = host.querySelector<HTMLElement>("#doc");
-	const preserve = samePage(current, incoming);
-	const selection = preserve ? captureFocus(host) : undefined;
-	if (preserve) {
-		retainHistory(current, incoming);
-		swap(current, incoming, true);
-		for (const attribute of [...current.attributes]) {
-			current.removeAttribute(attribute.name);
-		}
-		for (const attribute of incoming.attributes) {
-			current.setAttribute(attribute.name, attribute.value);
-		}
-	} else {
-		host.replaceChildren(document.importNode(incoming, true));
-		const main = host.querySelector("#doc");
-		if (main) {
-			remember(main);
-		}
-	}
-	const main = host.querySelector<HTMLElement>("#doc");
-	if (!main) {
-		return;
-	}
-	main.dataset.scheme = document.documentElement.dataset.scheme ?? "";
-	document.dispatchEvent(new Event("board-page"));
-	restoreFocus(main, selection);
-	return { file: main.dataset.file ?? "", view: main.dataset.view ?? "" };
-}
-
-function retainHistory(current: HTMLElement, incoming: HTMLElement) {
-	if (current.dataset.view !== "changes" || incoming.dataset.view !== "changes") {
-		return;
-	}
-	for (const selector of ["#changes-content", ".history-controls"]) {
-		const content = current.querySelector(selector);
-		if (content) {
-			incoming.querySelector(selector)?.replaceWith(content.cloneNode(true));
-		}
-	}
-}
-
-function samePage(current: HTMLElement | null, incoming: HTMLElement): current is HTMLElement {
-	if (!current) {
-		return false;
-	}
-	return (
-		current.dataset.file === incoming.dataset.file || Boolean(current.dataset.identity && current.dataset.identity === incoming.dataset.identity)
-	);
-}

package/src/client/reconcile/patch.ts

@@ -1,71 +0,0 @@
-import { at } from "./at.ts";
-import { matches } from "./matches.ts";
-import { flash, normalized, record, remember, sameShell, signature, structural } from "./signature.ts";
-
-function arrival(element: Element, highlight: boolean) {
-	remember(element);
-	if (highlight) {
-		flash(element);
-	}
-	return element;
-}
-function replaceRange(
-	current: Element,
-	olds: readonly Element[],
-	news: readonly Element[],
-	highlight: boolean,
-	left: number,
-	right: number,
-	kept: number,
-	arrived: number,
-) {
-	let i = left;
-	let j = right;
-	for (; i < kept && j < arrived; i += 1, j += 1) {
-		const old = at(olds, i);
-		const next = at(news, j);
-		if (sameShell(old, next)) {
-			const incomingSignature = normalized(next);
-			patch(old, next, highlight);
-			record(old, incomingSignature);
-		} else {
-			old.replaceWith(arrival(next, highlight));
-		}
-	}
-	for (; i < kept; i += 1) {
-		at(olds, i).remove();
-	}
-	for (; j < arrived; j += 1) {
-		current.insertBefore(arrival(at(news, j), highlight), olds[kept] ?? null);
-	}
-}
-function patchChildren(current: Element, incoming: Element, highlight: boolean) {
-	const olds = [...current.children];
-	const news = [...incoming.children];
-	let i = 0;
-	let j = 0;
-	for (const [kept, arrived] of matches(olds.map(signature), news.map(normalized))) {
-		replaceRange(current, olds, news, highlight, i, j, kept, arrived);
-		i = kept + 1;
-		j = arrived + 1;
-	}
-}
-export function patch(current: Element, incoming: Element, highlight: boolean) {
-	const selected = current instanceof HTMLSelectElement ? current.value : null;
-	const fallback = incoming instanceof HTMLSelectElement ? incoming.value : "";
-	if (structural(current) && structural(incoming)) {
-		patchChildren(current, incoming, highlight);
-	} else {
-		current.replaceChildren(...incoming.childNodes);
-		for (const child of current.children) {
-			remember(child);
-		}
-		if (highlight) {
-			flash(current);
-		}
-		return;
-	}
-	if (current instanceof HTMLSelectElement && selected !== null) {
-		current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;
-	}
-}

package/src/client/reconcile/signature.ts

@@ -1,83 +0,0 @@
-const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV", "FORM", "SELECT", "LABEL", "ASIDE", "DETAILS"]);
-const pristine = new WeakMap<Element, string>();
-export function structural(element: Element) {
-	return [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent?.trim() === "");
-}
-export function flash(element: Element) {
-	if (element.matches("[data-modified]") || !element.matches("p, li, pre, blockquote, h1, h2, h3, h4, h5, h6, .item, .notes, .metadata-panel")) {
-		return;
-	}
-	element.setAttribute("data-live-change", "");
-	setTimeout(() => element.removeAttribute("data-live-change"), 2500);
-}
-export function normalized(element: Element) {
-	const copy = element.cloneNode(true);
-	if (!(copy instanceof Element)) {
-		throw new Error("Expected an element");
-	}
-	for (const form of [copy, ...copy.querySelectorAll("#response-form, #handoff-form")]) {
-		if (form.id === "response-form" || form.id === "handoff-form") {
-			form.replaceChildren();
-			form.removeAttribute("data-bound");
-		}
-	}
-	for (const tool of copy.querySelectorAll("[data-visual-tools], [data-image-error], [data-diagram-error]")) {
-		tool.remove();
-	}
-	for (const node of [copy, ...copy.querySelectorAll("*")]) {
-		normalizeNode(node);
-	}
-	return copy.outerHTML;
-}
-export function remember(element: Element) {
-	pristine.set(element, normalized(element));
-	if (containers.has(element.tagName)) {
-		for (const child of element.children) {
-			remember(child);
-		}
-	}
-}
-export function signature(element: Element) {
-	if (!pristine.has(element)) {
-		pristine.set(element, normalized(element));
-	}
-	return pristine.get(element);
-}
-export function record(element: Element, value: string) {
-	pristine.set(element, value);
-}
-function normalizedShell(element: Element) {
-	const copy = element.cloneNode(false);
-	if (!(copy instanceof Element)) {
-		throw new Error("Expected an element");
-	}
-	copy.removeAttribute("data-live-change");
-	if (copy.tagName === "DETAILS") {
-		copy.removeAttribute("open");
-	}
-	return copy.outerHTML;
-}
-export function sameShell(old: Element, next: Element) {
-	return old.tagName === next.tagName && containers.has(old.tagName) && normalizedShell(old) === normalizedShell(next);
-}
-
-function normalizeNode(node: Element) {
-	node.removeAttribute("data-live-change");
-	if (node.tagName === "DETAILS") {
-		node.removeAttribute("open");
-	}
-	if (node.matches("figure.diagram")) {
-		node.querySelector(".diagram-svg")?.remove();
-		node.setAttribute("data-state", "pending");
-		node.removeAttribute("data-error");
-	}
-	if (node.matches("[data-modified]")) {
-		node.textContent = "";
-	}
-	if (node.matches("img[data-local-image]")) {
-		node.setAttribute("src", node.getAttribute("data-local-image") ?? "");
-		for (const attribute of ["tabindex", "role", "aria-label"]) {
-			node.removeAttribute(attribute);
-		}
-	}
-}

package/src/client/reconcile/swap.ts

@@ -1,37 +0,0 @@
-import { patch } from "./patch.ts";
-
-function keysOf(root: Element): readonly (readonly [string, HTMLDetailsElement])[] {
-	const seen = new Map<string, number>();
-	return [...root.querySelectorAll("details")].map((details) => {
-		const base =
-			details.dataset.key
-			?? `${details.closest(".item")?.querySelector("h3")?.textContent ?? ""}|${details.querySelector("summary")?.textContent ?? ""}`;
-		const count = seen.get(base) ?? 0;
-		seen.set(base, count + 1);
-		return [`${base}#${count}`, details];
-	});
-}
-export function swap(current: Element, incoming: Element, highlight = false) {
-	const before = keysOf(current);
-	const open = new Map(before.map(([key, details]) => [key, details.open]));
-	const existing = new Set(before.map(([, details]) => details));
-	const drawings = [...current.querySelectorAll("figure.diagram")].map((figure) => figure.querySelector(".diagram-svg"));
-	patch(current, incoming, highlight);
-	const figures = [...current.querySelectorAll<HTMLElement>("figure.diagram")];
-	if (drawings.length === figures.length) {
-		figures.forEach((figure, index) => {
-			const drawing = drawings[index];
-			if (figure.dataset.state !== "pending" || !drawing || drawing.isConnected) {
-				return;
-			}
-			figure.prepend(drawing);
-			figure.dataset.state = "redrawing";
-		});
-	}
-	for (const [key, details] of keysOf(current)) {
-		const was = open.get(key);
-		if (was !== undefined && !existing.has(details)) {
-			details.open = was;
-		}
-	}
-}

package/src/client/responses/attach.ts

@@ -1,150 +0,0 @@
-import { Effect } from "effect";
-import * as AtomRegistry from "effect/unstable/reactivity/AtomRegistry";
-import { formOwner } from "#client/fieldFeedback.ts";
-import { restoreFocus } from "#client/formFocus.ts";
-import { responseBinding, retainResponseBinding } from "./binding.ts";
-import { responseDraft } from "./draft.ts";
-import { responseFeedback } from "./feedback.ts";
-import { responseFields } from "./fields.ts";
-import { responseForm } from "./form.ts";
-import { responsePreview } from "./preview.ts";
-import { questionnaireControls } from "./questionnaireControls.ts";
-import { submitResponse } from "./submit.ts";
-
-export function attachResponses() {
-	const doc = document.getElementById("doc");
-	if (!doc) {
-		return;
-	}
-	const form = doc.querySelector<HTMLFormElement>("#response-form");
-	if (!form) {
-		return;
-	}
-	const selection = responseBinding(form);
-	if (!form || form.dataset.bound === "true") {
-		return;
-	}
-	form.dataset.bound = "true";
-	const found = responseFields(form);
-	if (!found) {
-		return;
-	}
-	const fields = found;
-	const { author, body, clear, preview, previewButton, status, submit, supersedes, type } = fields;
-	if (status.textContent?.includes("JavaScript is required")) {
-		status.textContent = "Draft ready. Preview the Markdown before recording it.";
-	}
-	const revision = form.dataset.revision ?? "";
-	const questionId = form.dataset.question ?? "";
-	let notice = "";
-	const { drafts, label } = responseDraft(form, (message) => {
-		notice = message;
-		status.textContent = message;
-	});
-	let draft = drafts.current();
-	const owner = formOwner(form);
-	retainResponseBinding(form, owner.release);
-	const controls = questionnaireControls(form, owner.signal);
-	let recovery = controls.restore(draft, revision);
-	if (draft.question && draft.question !== questionId && draft.revision === revision) {
-		notice = "Source moved since this draft. Text is retained and selections cleared; review the source and preview before responding.";
-		status.textContent = notice;
-	}
-	if (supersedes instanceof HTMLSelectElement) {
-		supersedes.value = draft.supersedes ?? "";
-	}
-	author.value = label.read(draft.author);
-	body.value = draft.body;
-	type.value = draft.type;
-	let pending = draft;
-	const { model, sync, valid } = responseForm(form, fields, draft, controls, owner, (values) =>
-		submitResponse(form, status, drafts, pending, values),
-	);
-	const feedback = responseFeedback(form, fields, valid);
-	feedback.show(notice);
-	function save() {
-		const values = sync();
-		label.save(values.author);
-		draft = drafts.update({
-			answers: values.answers,
-			author: values.author,
-			body: values.body,
-			question: draft.question ?? questionId,
-			recovery,
-			revision: draft.revision,
-			supersedes: values.supersedes,
-			type: values.type,
-		});
-		model.change("id", draft.id);
-	}
-	form.addEventListener(
-		"input",
-		() => {
-			save();
-			preview.hidden = true;
-			submit.disabled = true;
-			feedback.show(notice);
-		},
-		{ signal: owner.signal },
-	);
-	previewButton.disabled = false;
-	clear.disabled = false;
-	previewButton.addEventListener(
-		"click",
-		() => {
-			save();
-			if (notice.startsWith("Source ")) {
-				notice = "";
-			}
-			model.change(
-				"id",
-				draft.revision === revision && (!draft.question || draft.question === questionId) ? drafts.current().id : `response.${crypto.randomUUID()}`,
-			);
-			model.change("question", questionId);
-			model.change("revision", revision);
-			draft = drafts.update({ ...model.values.value, recovery });
-			preview.textContent = responsePreview(draft, questionId ?? "", controls.models);
-			preview.hidden = false;
-			const ready = feedback.show(notice, true);
-			submit.disabled = form.dataset.writable !== "true" || !ready;
-		},
-		{ signal: owner.signal },
-	);
-	clear.addEventListener("click", drafts.clear, { signal: owner.signal });
-	form.addEventListener(
-		"submit",
-		async (event) => {
-			event.preventDefault();
-			sync();
-			if (!feedback.show(notice, true)) {
-				feedback.focus();
-				return;
-			}
-			if (submit.disabled || draft.revision !== revision || draft.question !== questionId) {
-				status.textContent = "Preview the current draft before recording. Your text is retained.";
-				return;
-			}
-			submit.disabled = true;
-			previewButton.disabled = true;
-			pending = draft;
-			owner.registry.set(model.submit, undefined);
-			const cleared = await Effect.runPromise(AtomRegistry.getResult(owner.registry, model.submit, { suspendOnWaiting: true })).catch(() => false);
-			if (cleared) {
-				draft = drafts.current();
-				recovery = draft.recovery;
-				if (form.isConnected) {
-					model.receive({ ...model.values.value, answers: undefined, body: "", id: draft.id, supersedes: undefined });
-					model.revert();
-					body.value = model.field("body").value;
-					controls.restore(draft, revision);
-					if (supersedes instanceof HTMLSelectElement) {
-						supersedes.value = "";
-					}
-				}
-			}
-			previewButton.disabled = false;
-		},
-		{ signal: owner.signal },
-	);
-	restoreFocus(form, selection);
-}

package/src/client/responses/binding.ts

@@ -1,16 +0,0 @@
-import { captureFocus } from "#client/formFocus.ts";
-
-const bindings = new WeakMap<HTMLFormElement, { readonly context: string; readonly release: () => void }>();
-function contextOf(form: HTMLFormElement) {
-	return `${form.dataset.question}:${form.dataset.revision}`;
-}
-export function responseBinding(form: HTMLFormElement) {
-	const previous = bindings.get(form);
-	if (previous && previous.context !== contextOf(form)) {
-		previous.release();
-	}
-	return captureFocus(form);
-}
-export function retainResponseBinding(form: HTMLFormElement, release: () => void) {
-	bindings.set(form, { context: contextOf(form), release });
-}

package/src/client/responses/draft.ts

@@ -1,20 +0,0 @@
-import { authorLabel } from "./authorLabel.ts";
-import { draftSession } from "./draftSession.ts";
-
-export function responseDraft(form: HTMLFormElement, report: (message: string) => void) {
-	const workspace = document.documentElement.dataset.workspace;
-	let storage: Storage | undefined;
-	try {
-		storage = window.localStorage;
-	} catch {
-		storage = undefined;
-	}
-	const drafts = draftSession(
-		`${form.dataset.item ?? ""}/${form.dataset.request ?? ""}`,
-		form.dataset.revision ?? "",
-		storage,
-		`work-board:drafts:${workspace}`,
-		report,
-	);
-	return { drafts, label: authorLabel(storage, workspace) };
-}

package/src/client/responses/draftSession.ts

@@ -1,108 +0,0 @@
-import { Clock, Effect } from "effect";
-import { DRAFT_AGE, type Draft, encodeDrafts, readDrafts } from "./drafts.ts";
-
-const states = new Map<string, Draft>();
-export function draftSession(
-	key: string,
-	revision: string,
-	storage: Storage | undefined,
-	storageKey: string,
-	report: (message: string) => void,
-	prefix = "response",
-) {
-	const stateKey = `${JSON.stringify(storageKey)}:${key}`;
-	function local() {
-		if (!storage) {
-			throw new Error("Draft storage unavailable");
-		}
-		return storage;
-	}
-	let blocked = false;
-	let drafts: Record<string, Draft> = {};
-	try {
-		const stored = readDrafts(local().getItem(storageKey), Effect.runSync(Clock.currentTimeMillis));
-		drafts = stored.drafts;
-		if (stored.expired) {
-			report("Expired drafts were cleared after 30 days. Saved responses are unaffected.");
-		}
-		local().setItem(storageKey, encodeDrafts(drafts));
-	} catch {
-		blocked = true;
-		report("Draft history is unavailable or malformed. Keep a copy; edits remain in this window.");
-	}
-	const memory = states.get(stateKey);
-	if (memory && Effect.runSync(Clock.currentTimeMillis) - memory.updatedAt >= DRAFT_AGE) {
-		states.delete(stateKey);
-		report("A window draft expired after 30 days. Saved responses are unaffected.");
-	}
-	let current = states.get(stateKey)
-		?? drafts[key] ?? {
-			author: "",
-			body: "",
-			id: `${prefix}.${crypto.randomUUID()}`,
-			revision,
-			type: "answer",
-			updatedAt: Effect.runSync(Clock.currentTimeMillis),
-		};
-	if (current.revision !== revision) {
-		report("Source changed since this draft. Your text is retained; review the new source and preview to bind it to this revision.");
-	}
-	function update(patch: Partial<Draft>) {
-		current = { ...(states.get(stateKey) ?? current), ...patch, updatedAt: Effect.runSync(Clock.currentTimeMillis) };
-		states.set(stateKey, current);
-		try {
-			if (blocked) {
-				throw new Error("Unknown draft history");
-			}
-			const latest = readDrafts(local().getItem(storageKey), Effect.runSync(Clock.currentTimeMillis)).drafts;
-			local().setItem(storageKey, encodeDrafts({ ...latest, [key]: current }));
-		} catch {
-			report("Draft could not be persisted (storage full or unavailable). Keep a copy; your text remains in this window.");
-		}
-		return current;
-	}
-	function clear() {
-		try {
-			local().removeItem(storageKey);
-			blocked = false;
-			for (const storedKey of states.keys()) {
-				if (storedKey.startsWith(`${JSON.stringify(storageKey)}:`)) {
-					states.delete(storedKey);
-				}
-			}
-			report("Workspace drafts cleared. Saved responses are unchanged; this visible text remains until you navigate away.");
-		} catch {
-			report("Draft storage could not be cleared.");
-		}
-	}
-	function saved(pending: Draft) {
-		if (states.get(stateKey) !== pending) {
-			const live = states.get(stateKey);
-			if (live?.id === pending.id) {
-				update({ id: `${prefix}.${crypto.randomUUID()}` });
-			}
-			return false;
-		}
-		states.delete(stateKey);
-		try {
-			const latest = readDrafts(local().getItem(storageKey), Effect.runSync(Clock.currentTimeMillis)).drafts;
-			if (latest[key]?.id === pending.id) {
-				delete latest[key];
-			}
-			local().setItem(storageKey, encodeDrafts(latest));
-		} catch {
-			report("Saved response confirmed, but its browser draft could not be cleared.");
-		}
-		current = {
-			...current,
-			answers: undefined,
-			body: "",
-			id: `${prefix}.${crypto.randomUUID()}`,
-			recovery: undefined,
-			supersedes: undefined,
-			updatedAt: Effect.runSync(Clock.currentTimeMillis),
-		};
-		return true;
-	}
-	return { clear, current: () => current, saved, update };
-}