@shivaedev/work-board 0.5.0 → 0.6.1

package/src/page/shell.ts

@@ -1,6 +1,7 @@
 import { fileUrl } from "#files/url.ts";
 import { escapeHtml } from "./escape.ts";
 import { searchDialog } from "./searchDialog.ts";
+import { visualDialog } from "./visualDialog.ts";
 
 function location(file: string): string {
 	return file
@@ -23,7 +24,7 @@ export const shell = (
 		'<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="light dark">',
 		`<title>${escapeHtml(title)}</title>`,
 		'<link rel="stylesheet" href="/_board/style.css"><script type="module" src="/_board/client.js"></script>',
-		'</head><body><a class="skip" href="#doc">Skip to content</a><div class="workspace">',
+		'</head><body><noscript><style>html:not([data-js]) figure.diagram .diagram-source{display:block}html:not([data-js]) figure.diagram[data-state="pending"]{min-height:0}</style></noscript><a class="skip" href="#doc">Skip to content</a><div class="workspace">',
 		'<aside id="sidebar" class="sidebar"><a class="brand" href="/">work board<span>Local workspace</span></a>',
 		'<div id="reading-library" class="reading-library" hidden></div><h2 class="nav-heading">Project files</h2>',
 		`<nav id="files" class="files" aria-label="Project files">${nav}</nav></aside>`,
@@ -35,5 +36,5 @@ export const shell = (
 		'<div class="preference"><label for="density">Density</label><select id="density"><option value="comfortable">Comfortable</option><option value="compact">Compact</option></select></div>',
 		'<button id="updates-toggle" type="button" aria-pressed="false" disabled>Pause updates</button><span id="preference-status" role="status"></span></div>',
 		`<main${view ? ` data-view="${typeof view === "string" ? view : "work"}"` : ""}${identity ? ` data-identity="${escapeHtml(identity)}"` : ""} id="doc" data-file="${escapeHtml(title)}" data-url="${escapeHtml(fileUrl(title))}" class="${board ? "board-view" : "document-view"}" tabindex="-1">${main}</main>`,
-		`</div></div>${searchDialog}</body></html>`,
+		`</div></div>${searchDialog}${visualDialog}</body></html>`,
 	].join("");

package/src/page/style.ts

@@ -3,6 +3,7 @@ import { workStyle } from "#views/workStyle.ts";
 import { metadataStyles } from "./metadata.ts";
 import { readingStyles } from "./readingStyles.ts";
 import { searchStyles } from "./searchDialog.ts";
+import { visualStyles } from "./visualDialog.ts";
 import { layout, theme } from "./workspaceStyles.ts";
 
 const prose = `
@@ -53,8 +54,9 @@ figure.diagram { margin-left: 0; margin-right: 0; }
 figure.diagram[data-state="pending"] { min-height: 12rem; background: var(--surface); border-radius: 6px; }
 figure.diagram .diagram-source { display: none; }
 figure.diagram[data-state="failed"] .diagram-source { display: block; }
-figure.diagram[data-state="failed"]::after { content: attr(data-error); color: var(--danger); font-size: 0.875em; }
+[data-diagram-error] { color: var(--danger); font-size: 0.875em; }
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
 `;
 
-export const style = theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle() + attentionStyle();
+export const style =
+	theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle() + attentionStyle() + visualStyles;

package/src/page/swap.ts

@@ -12,12 +12,13 @@ const flash = (element) => {
 };
 
 export const remember = (element) => {
-  pristine.set(element, element.outerHTML);
+  pristine.set(element, normalized(element));
   if (containers.has(element.tagName)) for (const child of element.children) remember(child);
 };
 
 const normalized = (element) => {
   const copy = element.cloneNode(true);
+  for (const tool of copy.querySelectorAll("[data-visual-tools], [data-image-error], [data-diagram-error]")) tool.remove();
   for (const node of [copy, ...copy.querySelectorAll("*")]) {
     node.removeAttribute("data-live-change");
     if (node.tagName === "DETAILS") node.removeAttribute("open");
@@ -27,6 +28,10 @@ const normalized = (element) => {
       delete node.dataset.error;
     }
     if (node.matches("[data-modified]")) node.textContent = "";
+    if (node.matches("img[data-local-image]")) {
+      node.setAttribute("src", node.dataset.localImage);
+      for (const attribute of ["tabindex", "role", "aria-label"]) node.removeAttribute(attribute);
+    }
   }
   return copy.outerHTML;
 };
@@ -75,7 +80,7 @@ const patch = (current, incoming, highlight) => {
   }
   const olds = [...current.children];
   const news = [...incoming.children];
-  const signatures = news.map((next) => next.outerHTML);
+  const signatures = news.map(normalized);
   const arrive = (index) => {
     remember(news[index]);
     if (highlight) flash(news[index]);

package/src/page/visualDialog.ts

@@ -0,0 +1,25 @@
+export const visualDialog = `<dialog id="visual-dialog" aria-labelledby="visual-title">
+<div id="visual-stage">
+<div class="visual-bar"><h2 id="visual-title">Visual evidence</h2><button id="visual-close" type="button">Close</button></div>
+<p id="visual-context"></p>
+<div class="visual-bar" role="group" aria-label="Visual controls">
+<button id="visual-previous" type="button">Previous image</button><button id="visual-next" type="button">Next image</button>
+<button id="visual-out" type="button" aria-label="Zoom out">−</button><button id="visual-fit" type="button">Fit</button><button id="visual-actual" type="button" aria-pressed="false">Actual size</button><button id="visual-in" type="button" aria-label="Zoom in">+</button>
+<button id="visual-fullscreen" type="button">Fullscreen</button><a id="visual-download" download>Save locally</a>
+</div><p id="visual-status" role="status"></p><div id="visual-viewport" tabindex="0" aria-label="Scrollable visual"><div id="visual-content"></div></div>
+<p class="visual-help">Arrow keys choose images · Zoom and scroll to inspect · Escape returns to the source. Recorded evidence does not verify acceptance.</p>
+</div></dialog>`;
+
+export const visualStyles = `
+#visual-dialog{width:min(1100px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text)}
+#visual-dialog::backdrop{background:rgb(0 0 0 / .6)}
+.visual-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.visual-bar h2{flex:1;margin:0;font-size:1.2rem}
+.visual-bar button,.visual-bar a{font:inherit;padding:6px 10px;cursor:pointer;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:6px}
+#visual-context,.visual-help,#visual-status{font-size:.85rem;overflow-wrap:anywhere;color:var(--muted)}
+#visual-viewport{overflow:auto;max-height:65dvh;min-height:150px;background:var(--surface);border:1px solid var(--border);padding:12px}
+#visual-content{width:100%;min-width:0}#visual-content img,#visual-content svg{display:block;width:100%;max-width:none;height:auto}
+#visual-stage:fullscreen{width:100vw;height:100dvh;box-sizing:border-box;padding:16px;background:var(--card);color:var(--text);overflow:auto}#visual-stage:fullscreen #visual-viewport{max-height:75dvh}
+[data-local-image]{cursor:zoom-in}[data-local-image]:focus-visible{outline:2px solid var(--focus)}
+[data-visual-tools]{display:block;margin:8px 0;font-size:.85rem}[data-visual-tools] button{font:inherit;cursor:pointer;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:5px 10px}
+[data-image-error]{display:block;color:var(--danger);font-size:.85rem}
+`;

package/src/page/visualScript.ts

@@ -0,0 +1,41 @@
+export function visualScript(): string {
+	return `
+import { inspectImage, inspectDiagram, inspectAttachment } from "/_board/visual-viewport.js";
+let revision = 0;
+const refresh = () => {
+  revision++;
+  for (const image of document.querySelectorAll("#doc img[data-local-image]")) {
+    image.tabIndex = 0; image.setAttribute("role", "button"); image.setAttribute("aria-label", "Inspect image: " + (image.alt || "Local image"));
+    const url = new URL(image.dataset.localImage, location.href); url.searchParams.set("_wb", Date.now() + "-" + revision); image.src = url.href;
+    image.onerror = () => {
+      if (!image.isConnected || image.nextElementSibling?.hasAttribute("data-image-error")) return;
+      const error = document.createElement("span"); error.setAttribute("data-image-error", ""); error.setAttribute("role", "status");
+      error.textContent = "Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit."; image.after(error);
+    };
+    image.onload = () => { if (image.nextElementSibling?.hasAttribute("data-image-error")) image.nextElementSibling.remove(); };
+  }
+};
+export const diagramTools = (figure) => {
+  let tools = figure.querySelector("[data-visual-tools]");
+  if (!tools) {
+    tools = document.createElement("span"); tools.setAttribute("data-visual-tools", "");
+    const button = document.createElement("button"); button.type = "button"; button.textContent = "Inspect diagram"; button.setAttribute("data-inspect-diagram", "");
+    tools.append(button); figure.append(tools);
+  }
+  tools.querySelector("button").disabled = figure.dataset.state !== "drawn";
+};
+document.addEventListener("click", (event) => {
+  if (event.defaultPrevented || event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+  const diagram = event.target.closest?.("#doc [data-inspect-diagram]");
+  if (diagram && !diagram.disabled) { inspectDiagram(diagram.closest("figure.diagram"), diagram); return; }
+  const link = event.target.closest?.('#doc a[href^="/_board/attachment/"]');
+  if (link && !link.hasAttribute("download") && (!link.target || link.target === "_self")) { event.preventDefault(); inspectAttachment(link); return; }
+  const image = event.target.closest?.("#doc img[data-local-image]"); if (image) { event.preventDefault(); inspectImage(image); }
+});
+document.addEventListener("keydown", (event) => {
+  if (["Enter", " "].includes(event.key) && event.target.matches?.("#doc img[data-local-image]")) { event.preventDefault(); inspectImage(event.target); }
+});
+document.addEventListener("board-page", refresh);
+refresh();
+`;
+}

package/src/page/visualViewport.ts

@@ -0,0 +1,86 @@
+export function visualViewport(): string {
+	return `
+const dialog = document.getElementById("visual-dialog");
+const content = document.getElementById("visual-content");
+const viewport = document.getElementById("visual-viewport");
+const status = document.getElementById("visual-status");
+const download = document.getElementById("visual-download");
+let scale = 100;
+let baseWidth = 0;
+let objectUrl;
+let origin;
+let images = [];
+let selected = -1;
+const id = (name) => document.getElementById("visual-" + name);
+const release = () => { if (objectUrl) URL.revokeObjectURL(objectUrl); objectUrl = undefined; };
+const zoom = (next) => {
+  scale = Math.max(25, Math.min(800, next));
+  content.style.width = baseWidth ? (baseWidth * scale / 100) + "px" : scale + "%";
+  id("actual").setAttribute("aria-pressed", baseWidth ? "true" : "false");
+  id("fit").textContent = scale === 100 && !baseWidth ? "Fit" : Math.round(scale) + "% · Fit";
+};
+const fit = () => { baseWidth = 0; zoom(100); viewport.scrollTop = 0; viewport.scrollLeft = 0; };
+const showImage = () => {
+  release(); fit(); status.textContent = "";
+  const source = images[selected];
+  const image = new Image(); image.alt = source.alt;
+  image.onerror = () => { if (content.contains(image)) { status.textContent = "Image unavailable. Check the local path, supported type, workspace boundary and 16 MiB limit."; download.removeAttribute("href"); download.setAttribute("aria-disabled", "true"); } };
+  image.src = source.src; content.replaceChildren(image);
+  id("context").textContent = (source.alt || "Local image") + " · " + (selected + 1) + " of " + images.length + " · " + source.dataset.localImage + " · " + document.getElementById("doc").dataset.file;
+  download.href = source.dataset.localImage;
+  try { download.download = decodeURIComponent(new URL(download.href).pathname.split("/").at(-1)); } catch { download.download = "work-board-image"; }
+  download.setAttribute("aria-disabled", "false");
+  id("previous").disabled = selected <= 0; id("next").disabled = selected >= images.length - 1;
+};
+export const inspectImage = (source) => {
+  origin = source; images = [...document.querySelectorAll("#doc img[data-local-image]")]; selected = images.indexOf(source);
+  id("previous").hidden = false; id("next").hidden = false; showImage(); dialog.showModal();
+};
+export const inspectAttachment = (link) => {
+  origin = link; const source = { alt: link.textContent, dataset: { localImage: link.getAttribute("href") }, src: link.href };
+  images = [source]; selected = 0; id("previous").hidden = false; id("next").hidden = false; showImage(); dialog.showModal();
+};
+export const inspectDiagram = (figure, trigger) => {
+  const drawing = figure.querySelector(".diagram-svg svg");
+  if (!drawing) return;
+  origin = trigger; selected = -1; images = []; release(); fit(); status.textContent = "";
+  const copy = drawing.cloneNode(true); copy.style.maxWidth = "none"; copy.style.width = "100%"; copy.style.height = "auto";
+  content.replaceChildren(copy);
+  id("context").textContent = "Mermaid diagram · " + document.getElementById("doc").dataset.file + " · Current drawing";
+  id("previous").hidden = true; id("next").hidden = true;
+  const xml = new XMLSerializer().serializeToString(drawing);
+  objectUrl = URL.createObjectURL(new Blob([xml], { type: "image/svg+xml" }));
+  download.href = objectUrl; download.download = "work-board-diagram.svg"; dialog.showModal();
+  download.setAttribute("aria-disabled", "false");
+};
+const move = (offset) => { if (selected < 0) return; selected = Math.max(0, Math.min(images.length - 1, selected + offset)); showImage(); };
+id("previous").addEventListener("click", () => move(-1)); id("next").addEventListener("click", () => move(1));
+id("in").addEventListener("click", () => zoom(scale * 1.5)); id("out").addEventListener("click", () => zoom(scale / 1.5));
+id("fit").addEventListener("click", fit);
+id("actual").addEventListener("click", () => {
+  const graphic = content.firstElementChild;
+  const width = graphic?.naturalWidth || graphic?.viewBox?.baseVal?.width;
+  if (!width) { status.textContent = "Original dimensions unavailable; Fit and zoom remain available."; return; }
+  baseWidth = width; zoom(100); viewport.scrollTop = 0; viewport.scrollLeft = 0;
+});
+id("close").addEventListener("click", () => dialog.close());
+id("fullscreen").addEventListener("click", async () => {
+  try { if (document.fullscreenElement) await document.exitFullscreen(); else await id("stage").requestFullscreen(); }
+  catch { status.textContent = "Fullscreen is unavailable here; the scrollable viewer remains available."; }
+});
+dialog.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowLeft" && selected >= 0) { event.preventDefault(); move(-1); }
+  if (event.key === "ArrowRight" && selected >= 0) { event.preventDefault(); move(1); }
+  if (event.key === "Escape") { event.preventDefault(); dialog.close(); }
+});
+dialog.addEventListener("close", async () => {
+  release(); content.replaceChildren();
+  if (dialog.contains(document.fullscreenElement)) await document.exitFullscreen().catch(() => {});
+  (origin?.isConnected ? origin : document.getElementById("doc")).focus();
+});
+document.addEventListener("board-page", () => {
+  if (dialog.open) { status.textContent = "Source updated. This preview is the drawing/image opened earlier; close and reopen to inspect or save the latest source."; download.removeAttribute("href"); download.setAttribute("aria-disabled", "true"); }
+});
+window.addEventListener("pagehide", () => { release(); if (dialog.open) dialog.close(); });
+`;
+}

package/src/path/attachment.ts

@@ -0,0 +1,23 @@
+const TYPES: Readonly<Record<string, string>> = {
+	gif: "image/gif",
+	jpeg: "image/jpeg",
+	jpg: "image/jpeg",
+	png: "image/png",
+	webp: "image/webp",
+};
+
+export function attachmentType(file: string): string | undefined {
+	const extension = file.split(".").at(-1)?.toLowerCase() ?? "";
+	return Object.hasOwn(TYPES, extension) ? TYPES[extension] : undefined;
+}
+
+export function attachmentHref(href: string): string | undefined {
+	if (!href.startsWith("/") || href.startsWith("//")) {
+		return undefined;
+	}
+	const url = new URL(href, "http://work-board.local");
+	if (url.pathname.startsWith("/_board/attachment/")) {
+		return href;
+	}
+	return attachmentType(url.pathname) ? `/_board/attachment${url.pathname}${url.search}${url.hash}` : undefined;
+}

package/src/render/code.ts

@@ -1,6 +1,6 @@
-import type { Element, ElementContent } from "hast";
-import { defineHastPlugin } from "satteri";
+import type { Element, ElementContent, Root } from "hast";
 import { type BundledLanguage, bundledLanguages, type Highlighter as Shiki } from "shiki";
+import { visit as visitElements } from "unist-util-visit";
 import { THEMES } from "./highlighter.ts";
 
 const languageOf = (code: Element): string | undefined => {
@@ -33,22 +33,32 @@ const highlighted = async (highlighter: Shiki, source: string, language: string)
 	return highlighter.codeToHast(source, { defaultColor: false, lang: language, themes: THEMES }).children.at(0);
 };
 
-export const codeBlocks = (highlighter: Shiki) =>
-	defineHastPlugin({
-		element: {
-			filter: ["pre"],
-			visit: async (pre) => {
-				const [code] = pre.children;
-				if (code?.type !== "element" || code.tagName !== "code") {
-					return undefined;
-				}
-				const language = languageOf(code);
-				const source = textOf(code);
-				if (language === "mermaid") {
-					return diagram(source);
+async function renderedCode(highlighter: Shiki, pre: Element) {
+	const [code] = pre.children;
+	if (code?.type !== "element" || code.tagName !== "code") {
+		return undefined;
+	}
+	const language = languageOf(code);
+	const source = textOf(code);
+	if (language === "mermaid") {
+		return diagram(source);
+	}
+	return language === undefined ? undefined : await highlighted(highlighter, source, language);
+}
+
+export const codeBlocks = (highlighter: Shiki) => () => async (tree: Root) => {
+	const work: Promise<void>[] = [];
+	visitElements(tree, "element", (pre, index, parent) => {
+		if (pre.tagName !== "pre" || index === undefined || parent === undefined) {
+			return;
+		}
+		work.push(
+			renderedCode(highlighter, pre).then((result) => {
+				if (result?.type === "element") {
+					parent.children[index] = result;
 				}
-				return language === undefined ? undefined : await highlighted(highlighter, source, language);
-			},
-		},
-		name: "work-board-code",
+			}),
+		);
 	});
+	await Promise.all(work);
+};

package/src/render/documentHeadings.ts

@@ -1,4 +1,6 @@
-import { defineHastPlugin } from "satteri";
+import type { Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
+import { textContent } from "#render/textContent.ts";
 
 export interface Heading {
 	readonly depth: number;
@@ -9,14 +11,16 @@ export interface Heading {
 export function documentHeadings() {
 	const entries: Heading[] = [];
 	const used = new Set<string>();
-	const plugin = defineHastPlugin({
-		element: {
-			filter: ["h1", "h2", "h3", "h4", "h5", "h6"],
-			visit: (element, context) => {
+	function plugin() {
+		return function transform(tree: Root) {
+			visitElements(tree, "element", (element) => {
+				if (!["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.tagName)) {
+					return;
+				}
 				if (element.properties.id !== undefined) {
 					return;
 				}
-				const title = context.textContent(element).trim();
+				const title = element.children.map(textContent).join("").trim();
 				const slug =
 					title
 						.normalize("NFKC")
@@ -31,22 +35,16 @@ export function documentHeadings() {
 				}
 				used.add(id);
 				entries.push({ depth: Number(element.tagName.slice(1)), id, title });
-				return {
-					...element,
-					children: [
-						...element.children,
-						{
-							children: [],
-							properties: { ariaLabel: `Link to ${title || "section"}`, className: ["heading-anchor"], href: `#${id}` },
-							tagName: "a",
-							type: "element" as const,
-						},
-					],
-					properties: { ...element.properties, id, tabIndex: -1 },
-				};
-			},
-		},
-		name: "work-board-headings",
-	});
+				element.children.push({
+					children: [],
+					properties: { ariaLabel: `Link to ${title || "section"}`, className: ["heading-anchor"], href: `#${id}` },
+					tagName: "a",
+					type: "element",
+				});
+				element.properties.id = id;
+				element.properties.tabIndex = -1;
+			});
+		};
+	}
 	return { entries, plugin };
 }

package/src/render/documentLinks.ts

@@ -1,19 +1,28 @@
-import { defineHastPlugin } from "satteri";
+import type { Element, Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 import { fileUrl } from "#files/url.ts";
+import { attachmentHref } from "#path/attachment.ts";
 
 export function documentLinks(file: string) {
-	return defineHastPlugin({
-		element: {
-			filter: ["a"],
-			visit: (element) => {
-				const href = element.properties.href;
-				if (typeof href !== "string" || href.startsWith("#") || href.startsWith("/") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
-					return;
-				}
-				const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
-				return { ...element, properties: { ...element.properties, href: target.pathname + target.search + target.hash } };
-			},
-		},
-		name: "work-board-document-links",
-	});
+	function resolve(element: Element) {
+		const attribute = element.tagName === "img" ? "src" : "href";
+		const href = element.properties[attribute];
+		if (typeof href !== "string" || href.startsWith("#") || href.startsWith("//") || /^[a-z][a-z\d+.-]*:/iu.exec(href) !== null) {
+			return;
+		}
+		const target = new URL(href, `http://work-board.local${fileUrl(file)}`);
+		const resolved = target.pathname + target.search + target.hash;
+		const image = attachmentHref(resolved);
+		element.properties[attribute] = image ?? resolved;
+		if (element.tagName === "img" && image) {
+			element.properties.dataLocalImage = image;
+		}
+	}
+	return () => (tree: Root) => {
+		visitElements(tree, "element", (element) => {
+			if (element.tagName === "a" || element.tagName === "img") {
+				resolve(element);
+			}
+		});
+	};
 }

package/src/render/footnotes.ts

@@ -1,5 +1,5 @@
-import type { Element } from "hast";
-import { defineHastPlugin } from "satteri";
+import type { Element, Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 
 const FOOTNOTE_IDS = /^(?:user-content-fn|footnote-label)/u;
 
@@ -17,16 +17,13 @@ const scoped = (prefix: string, value: Value): Value => {
 	return Array.isArray(value) ? value.map((each) => (typeof each === "string" ? String(scoped(prefix, each)) : each)) : value;
 };
 
-export const footnoteIds = (prefix: string) =>
-	defineHastPlugin({
-		element: {
-			filter: ["a", "h2", "li"],
-			visit: (element) => ({
-				...element,
-				properties: Object.fromEntries(
-					Object.entries(element.properties).map(([name, value]) => [name, SCOPED.has(name) ? scoped(prefix, value) : value]),
-				),
-			}),
-		},
-		name: "work-board-footnote-ids",
+export const footnoteIds = (prefix: string) => () => (tree: Root) => {
+	visitElements(tree, "element", (element) => {
+		if (!["a", "h2", "li"].includes(element.tagName)) {
+			return;
+		}
+		element.properties = Object.fromEntries(
+			Object.entries(element.properties).map(([name, value]) => [name, SCOPED.has(name) ? scoped(prefix, value) : value]),
+		);
 	});
+};

package/src/render/markdown.ts

@@ -1,5 +1,10 @@
 import { Effect } from "effect";
-import { type HastPluginInput, markdownToHtml } from "satteri";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { MarkdownAsync } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
+import type { PluggableList } from "unified";
 import { codeBlocks } from "./code.ts";
 import type { documentHeadings } from "./documentHeadings.ts";
 import { documentLinks } from "./documentLinks.ts";
@@ -15,7 +20,7 @@ export interface RenderOptions {
 
 export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, options: RenderOptions = {}) {
 	const highlighter = yield* Highlighter;
-	const plugins: HastPluginInput[] = [codeBlocks(highlighter)];
+	const plugins: PluggableList = [rehypeRaw, codeBlocks(highlighter)];
 	if (options.idPrefix !== undefined) {
 		plugins.push(footnoteIds(options.idPrefix));
 	}
@@ -25,9 +30,17 @@ export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (s
 	if (options.headings !== undefined) {
 		plugins.push(options.headings.plugin);
 	}
-	const { html } = yield* Effect.tryPromise({
+	const html = yield* Effect.tryPromise({
 		catch: (cause) => new RenderFailed({ cause }),
-		try: async () => markdownToHtml(source, { hastPlugins: plugins }),
+		try: async () =>
+			renderToStaticMarkup(
+				await MarkdownAsync({
+					children: source,
+					components: { img: ({ node: _node, ...props }) => createElement("img", { ...props, loading: "lazy" }) },
+					rehypePlugins: plugins,
+					remarkPlugins: [remarkGfm],
+				}),
+			),
 	});
 	return html;
 });

package/src/render/textContent.ts

@@ -0,0 +1,8 @@
+import type { ElementContent } from "hast";
+
+export function textContent(node: ElementContent): string {
+	if (node.type === "text") {
+		return node.value;
+	}
+	return node.type === "element" ? node.children.map(textContent).join("") : "";
+}

package/src/search/collector.ts

@@ -1,6 +1,7 @@
-import type { Element } from "hast";
-import { defineHastPlugin } from "satteri";
+import type { Element, Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 import { fileUrl } from "#files/url.ts";
+import { textContent } from "#render/textContent.ts";
 import type { Entry } from "./entries.ts";
 
 function sourceLine(element: Element, first: number | undefined, length: number): { readonly line?: number } {
@@ -14,31 +15,33 @@ export function searchCollector(file: string, startLine: () => number | undefine
 	const entries: Entry[] = [];
 	let passage = "";
 	let label = file;
-	const plugin = defineHastPlugin({
-		element: {
-			filter: ["h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "li", "td", "th"],
-			visit: (element, context) => {
-				const text = context.textContent(element).replace(/\s+/gu, " ").trim();
-				if (!text || element.properties.id === "footnote-label") {
-					return;
-				}
-				const heading = element.tagName.startsWith("h") && element.tagName !== "th";
-				if (heading && typeof element.properties.id === "string") {
-					passage = element.properties.id;
-					label = text;
+	function collect(element: Element) {
+		const text = element.children.map(textContent).join("").replace(/\s+/gu, " ").trim();
+		if (!text || element.properties.id === "footnote-label") {
+			return;
+		}
+		const heading = element.tagName.startsWith("h") && element.tagName !== "th";
+		if (heading && typeof element.properties.id === "string") {
+			passage = element.properties.id;
+			label = text;
+		}
+		entries.push({
+			file,
+			href: fileUrl(file) + (passage ? `#${encodeURIComponent(passage)}` : ""),
+			kind: heading ? "heading" : "passage",
+			...sourceLine(element, startLine(), length()),
+			text,
+			title: label,
+		});
+	}
+	function plugin() {
+		return function transform(tree: Root) {
+			visitElements(tree, "element", (element) => {
+				if (["h1", "h2", "h3", "h4", "h5", "h6", "p", "pre", "li", "td", "th"].includes(element.tagName)) {
+					collect(element);
 				}
-				entries.push({
-					file,
-					href: fileUrl(file) + (passage ? `#${encodeURIComponent(passage)}` : ""),
-					kind: heading ? "heading" : "passage",
-					...sourceLine(element, startLine(), length()),
-					text,
-					title: label,
-				});
-			},
-		},
-		name: "work-board-search-text",
-	});
-
+			});
+		};
+	}
 	return { entries, plugin };
 }

package/src/search/entries.ts

@@ -1,4 +1,6 @@
-import { markdownToHtml } from "satteri";
+import { MarkdownAsync } from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 import { fileUrl } from "#files/url.ts";
 import { boardOf } from "#render/board.ts";
 import { documentHeadings } from "#render/documentHeadings.ts";
@@ -41,8 +43,10 @@ export async function entriesOf(source: string, file: string, home: boolean, bod
 		if (fragment) {
 			fragmentLength = fragment.split("\n").length;
 			fragmentLine = board ? fragmentLocation(source, fragment, bodyLine, seenFragments) : bodyLine;
-			await markdownToHtml(board?.definitions ? `${fragment}\n\n${board.definitions}` : fragment, {
-				hastPlugins: [headings.plugin, plugin, linkCollector(links)],
+			await MarkdownAsync({
+				children: board?.definitions ? `${fragment}\n\n${board.definitions}` : fragment,
+				rehypePlugins: [rehypeRaw, headings.plugin, plugin, linkCollector(links)],
+				remarkPlugins: [remarkGfm],
 			});
 		}
 	}

package/src/search/linkCollector.ts

@@ -1,16 +1,16 @@
-import { defineHastPlugin } from "satteri";
+import type { Root } from "hast";
+import { visit as visitElements } from "unist-util-visit";
 
 export function linkCollector(links: Set<string>) {
-	return defineHastPlugin({
-		element: {
-			filter: ["a"],
-			visit: (element) => {
-				const href = element.properties.href;
-				if (typeof href === "string" && !href.startsWith("#")) {
-					links.add(href);
-				}
-			},
-		},
-		name: "work-board-link-collector",
-	});
+	return () => (tree: Root) => {
+		visitElements(tree, "element", (element) => {
+			if (element.tagName !== "a") {
+				return;
+			}
+			const href = element.properties.href;
+			if (typeof href === "string" && !href.startsWith("#")) {
+				links.add(href);
+			}
+		});
+	};
 }