@shivaedev/work-board 0.2.0 → 0.3.0

package/src/page/style.ts

@@ -1,36 +1,12 @@
-const tokens = `
-:root {
-  color-scheme: light dark;
-  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-  --bg: #ffffff; --surface: #f6f8fa; --text: #1f2328; --muted: #59636e; --border: #d1d9e0; --link: #0969da; --danger: #b3261e;
-}
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #1e1e1e; --surface: #272727; --text: #e8e8e8; --muted: #a8a8a8; --border: #3d3d3d; --link: #58a6ff; --danger: #ff8a80; }
-}
-`;
-
-const page = `
-body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
-a { color: var(--link); }
-.page { box-sizing: content-box; max-width: 72ch; margin: 0 auto; padding: 0 16px 64px; }
-.bar { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
-.files { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; }
-.files a { color: var(--text); text-decoration: none; }
-.files a:hover, .files a[aria-current="page"] { color: var(--link); text-decoration: underline; }
-.files details[open] { flex-basis: 100%; }
-.files summary { cursor: pointer; color: var(--muted); }
-.files ul { list-style: none; margin: 4px 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--border); }
-.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; }
-.live { color: var(--muted); font: 12px/1.9 var(--mono); }
-.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
-.meta { color: var(--muted); font-size: 14px; margin: 0; }
-.meta .age { margin: 0; }
-`;
+import { workStyle } from "#views/workStyle.ts";
+import { metadataStyles } from "./metadata.ts";
+import { readingStyles } from "./readingStyles.ts";
+import { searchStyles } from "./searchDialog.ts";
+import { layout, theme } from "./workspaceStyles.ts";
 
 const prose = `
 h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.5em; }
-h1 { font-size: 1.9em; margin-top: 1em; }
+h1 { overflow-wrap: anywhere; font-size: 1.9em; margin-top: 1em; }
 h2 { font-size: 1.45em; }
 h3 { font-size: 1.15em; }
 h1 strong, h2 strong, h3 strong { font-weight: inherit; }
@@ -43,7 +19,8 @@ code { font: 0.875em var(--mono); background: var(--surface); padding: 0.1em 0.3
 pre { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
 pre code { background: none; padding: 0; font-size: 0.85em; }
 .shiki span { color: var(--shiki-light); }
-@media (prefers-color-scheme: dark) { .shiki span { color: var(--shiki-dark); } }
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shiki span { color: var(--shiki-dark); } }
+:root[data-theme="dark"] .shiki span { color: var(--shiki-dark); }
 table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.925em; }
 th, td { text-align: left; vertical-align: top; padding: 6px 10px; border: 1px solid var(--border); }
 tr:nth-child(2n) td { background: var(--surface); }
@@ -59,9 +36,11 @@ const board = `
 .board-head .intro { color: var(--muted); }
 .counts { margin: 0; }
 .counts b { font-variant-numeric: tabular-nums; }
-.board section { margin-top: 2.2em; }
-.board section > h2 { margin: 0 0 0.2em; }
-.item, .notes { padding: 0.9em 0 0.1em; border-top: 1px solid var(--border); }
+.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--space); margin-top: 2em; align-items: start; }
+.board section { min-width: 0; }
+.board section > h2 { margin: 0 0 0.8em; font-size: 1.1em; overflow-wrap: anywhere; }
+.item, .notes { padding: var(--card-space); margin-bottom: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); overflow-wrap: anywhere; }
+.item > :last-child, .notes > :last-child { margin-bottom: 0; }
 .item > h3 { margin: 0 0 0.4em; }
 .item > h3 > code:first-child { background: none; padding: 0; margin-right: 0.6em; color: var(--muted); font-weight: 400; }
 footer { margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.925em; }
@@ -76,4 +55,4 @@ figure.diagram[data-state="failed"]::after { content: attr(data-error); color: v
 @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
 `;
 
-export const style = tokens + page + prose + board + diagrams;
+export const style = theme + layout + prose + board + diagrams + readingStyles() + searchStyles + metadataStyles + workStyle();

package/src/page/swap.ts

@@ -1,5 +1,5 @@
 export const swap = `
-const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV"]);
+const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV", "FORM", "SELECT", "LABEL", "ASIDE"]);
 
 const structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === "");
 
@@ -56,6 +56,8 @@ const matches = (a, b) => {
 };
 
 const patch = (current, incoming) => {
+  const selected = current.tagName === "SELECT" ? current.value : null;
+  const fallback = incoming.tagName === "SELECT" ? incoming.value : null;
   if (!structural(current) || !structural(incoming)) {
     current.replaceChildren(...incoming.childNodes);
     for (const child of current.children) remember(child);
@@ -83,6 +85,7 @@ const patch = (current, incoming) => {
     i++;
     j++;
   }
+  if (selected !== null) current.value = [...current.options].some((option) => option.value === selected) ? selected : fallback;
 };
 
 const keysOf = (root) => {

package/src/page/workspaceStyles.ts

@@ -0,0 +1,79 @@
+export const layout = `
+* { box-sizing: border-box; }
+body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.65 var(--sans); }
+a { color: var(--link); }
+button, select { font: inherit; color: inherit; }
+button, select, summary { cursor: pointer; }
+button, select { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); }
+:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
+.skip { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 8px 16px; background: var(--card); }
+.skip:focus { top: 8px; }
+.workspace { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
+:root[data-sidebar="closed"] .workspace { grid-template-columns: minmax(0, 1fr); }
+.sidebar { --focus: #e2bc79; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; padding: var(--space) 16px; background: var(--sidebar); color: var(--sidebar-text); }
+.sidebar[hidden] { display: none; }
+.brand { display: block; padding: 0 12px 28px; font-size: 24px; font-weight: 600; letter-spacing: -0.8px; text-decoration: none; color: var(--sidebar-text); }
+.brand span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--sidebar-muted); }
+.sidebar .nav-heading { margin: 0 12px 12px; font: 600 12px var(--sans); color: var(--sidebar-muted); }
+.files { font-size: 14px; }
+.files ul { list-style: none; margin: 0 0 10px; padding: 0; }
+.files li { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 5px; }
+.files li:has(a[aria-current="page"]) { background: #385242; }
+.files a { flex: 1; min-width: 0; color: var(--sidebar-text); text-decoration: none; overflow-wrap: anywhere; }
+.files a:hover, .files a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
+.files details { margin: 8px 0; }
+.files summary { padding: 6px 10px; color: var(--sidebar-muted); overflow-wrap: anywhere; }
+.files details ul { margin-left: 14px; border-left: 1px solid var(--sidebar-border); }
+.age { color: var(--muted); font: 12px var(--mono); margin-left: 6px; white-space: nowrap; }
+.files .age { color: var(--sidebar-muted); margin: 0; flex-shrink: 0; }
+.page { min-width: 0; }
+.bar { display: flex; align-items: center; gap: 16px; padding: 16px var(--space); border-bottom: 1px solid var(--border); font-size: 13px; }
+.bar button { flex-shrink: 0; }
+.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
+.breadcrumbs > span:not(.separator) { min-width: 0; }
+.separator { color: var(--muted); }
+.live { color: var(--muted); font: 12px/1.9 var(--mono); }
+.live[data-state="down"], .live[data-state="stale"] { color: var(--danger); }
+.preferences { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px var(--space) 0; color: var(--muted); font-size: 12px; }
+.preference { display: flex; gap: 8px; align-items: center; }
+#preference-status:empty { display: none; }
+#doc { padding: var(--space) var(--space) 64px; min-width: 0; }
+.document-view { max-width: calc(72ch + 2 * var(--space)); margin-inline: auto; }
+.board-view { max-width: 1600px; margin-inline: auto; }
+.meta { color: var(--muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
+.meta .age { margin: 0; }
+@media (max-width: 760px) {
+  .workspace { grid-template-columns: minmax(0, 1fr); }
+  .sidebar { position: static; height: auto; max-height: 42vh; border-bottom: 1px solid var(--border); }
+  .brand { padding-bottom: 16px; }
+  .bar { flex-wrap: wrap; gap: 12px; }
+  .breadcrumbs { flex-basis: calc(100% - 100px); }
+  .live { margin-left: auto; }
+  .preferences { justify-content: flex-start; }
+  :root { --space: 18px; }
+}
+`;
+const light = `
+  color-scheme: light;
+  --bg: #f7f8f4; --surface: #edf1e7; --card: #ffffff; --text: #263c34; --muted: #596957;
+  --border: #d5dfd0; --link: #315f45; --danger: #a03024; --focus: #976323;
+  --sidebar: #203a30; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #4a624c;
+`;
+const dark = `
+  color-scheme: dark;
+  --bg: #18251f; --surface: #26382d; --card: #203027; --text: #e7eee2; --muted: #b0c1a6;
+  --border: #455a48; --link: #b1d4a1; --danger: #ffafa2; --focus: #e2bc79;
+  --sidebar: #142219; --sidebar-text: #e7eee2; --sidebar-muted: #b6c8ad; --sidebar-border: #455a48;
+`;
+
+export const theme = `
+:root {
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --space: 24px; --card-space: 20px;
+  ${light}
+}
+@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ${dark} } }
+:root[data-theme="dark"] { ${dark} }
+:root[data-density="compact"] { --space: 16px; --card-space: 12px; }
+`;

package/src/render/board.ts

@@ -2,26 +2,26 @@ import type { RootContent } from "mdast";
 import { markdownToMdast } from "satteri";
 
 export interface Section {
-	readonly title: string;
 	readonly heading: string;
+	readonly items: readonly string[];
 	readonly notes: string;
-	readonly items: ReadonlyArray<string>;
+	readonly title: string;
 }
 
 export interface Board {
-	readonly title: string;
-	readonly intro: string;
-	readonly sections: ReadonlyArray<Section>;
-	readonly footer: string;
 	readonly definitions: string;
+	readonly footer: string;
+	readonly intro: string;
+	readonly sections: readonly Section[];
+	readonly title: string;
 }
 
 interface Draft {
-	title: string;
+	definitions: string[];
+	footer: string[] | undefined;
 	intro: string[];
 	sections: Array<{ title: string; heading: string; notes: string[]; items: string[][] }>;
-	footer: string[] | undefined;
-	definitions: string[];
+	title: string;
 }
 
 const textOf = (node: RootContent): string => {
@@ -42,7 +42,7 @@ const place = (draft: Draft, node: RootContent, source: string, closing: boolean
 	} else if (node.type === "heading" && node.depth === 1 && draft.title === "") {
 		draft.title = source;
 	} else if (isSection(node)) {
-		draft.sections.push({ title: textOf(node), heading: source, notes: [], items: [] });
+		draft.sections.push({ heading: source, items: [], notes: [], title: textOf(node) });
 	} else if (section === undefined) {
 		draft.intro.push(source);
 	} else if (node.type === "heading" && node.depth === 3) {
@@ -54,10 +54,10 @@ const place = (draft: Draft, node: RootContent, source: string, closing: boolean
 	}
 };
 
-const joined = (blocks: ReadonlyArray<string>): string => blocks.join("\n\n");
+const joined = (blocks: readonly string[]): string => blocks.join("\n\n");
 
 export const boardOf = (source: string): Board => {
-	const draft: Draft = { title: "", intro: [], sections: [], footer: undefined, definitions: [] };
+	const draft: Draft = { definitions: [], footer: undefined, intro: [], sections: [], title: "" };
 	const root = markdownToMdast(source);
 	const nodes = root.type === "root" ? root.children : [];
 	const lastHeading = nodes.findLastIndex((node) => node.type === "heading");
@@ -65,18 +65,18 @@ export const boardOf = (source: string): Board => {
 		place(draft, node, source.slice(node.position?.start.offset, node.position?.end.offset), index > lastHeading);
 	});
 	return {
-		title: draft.title,
-		intro: joined(draft.intro),
-		sections: draft.sections.map((section) => ({ ...section, notes: joined(section.notes), items: section.items.map(joined) })),
-		footer: joined(draft.footer ?? []),
 		definitions: joined(draft.definitions),
+		footer: joined(draft.footer ?? []),
+		intro: joined(draft.intro),
+		sections: draft.sections.map((section) => ({ ...section, items: section.items.map(joined), notes: joined(section.notes) })),
+		title: draft.title,
 	};
 };
 
 export interface Count {
-	readonly title: string;
 	readonly count: number;
+	readonly title: string;
 }
 
-export const countsOf = (board: Board): ReadonlyArray<Count> =>
-	board.sections.flatMap((section) => (section.items.length === 0 ? [] : [{ title: section.title, count: section.items.length }]));
+export const countsOf = (board: Board): readonly Count[] =>
+	board.sections.flatMap((section) => (section.items.length === 0 ? [] : [{ count: section.items.length, title: section.title }]));

package/src/render/code.ts

@@ -17,10 +17,10 @@ const textOf = (node: ElementContent): string => {
 };
 
 const diagram = (source: string): Element => ({
-	type: "element",
-	tagName: "figure",
+	children: [{ children: [{ type: "text", value: source }], properties: { className: ["diagram-source"] }, tagName: "pre", type: "element" }],
 	properties: { className: ["diagram"], dataState: "pending" },
-	children: [{ type: "element", tagName: "pre", properties: { className: ["diagram-source"] }, children: [{ type: "text", value: source }] }],
+	tagName: "figure",
+	type: "element",
 });
 
 const isBundled = (language: string): language is BundledLanguage => Object.hasOwn(bundledLanguages, language);
@@ -30,12 +30,11 @@ const highlighted = async (highlighter: Shiki, source: string, language: string)
 		return undefined;
 	}
 	await highlighter.loadLanguage(language);
-	return highlighter.codeToHast(source, { lang: language, themes: THEMES, defaultColor: false }).children[0];
+	return highlighter.codeToHast(source, { defaultColor: false, lang: language, themes: THEMES }).children.at(0);
 };
 
 export const codeBlocks = (highlighter: Shiki) =>
 	defineHastPlugin({
-		name: "work-board-code",
 		element: {
 			filter: ["pre"],
 			visit: async (pre) => {
@@ -51,4 +50,5 @@ export const codeBlocks = (highlighter: Shiki) =>
 				return language === undefined ? undefined : await highlighted(highlighter, source, language);
 			},
 		},
+		name: "work-board-code",
 	});

package/src/render/documentHeadings.ts

@@ -0,0 +1,52 @@
+import { defineHastPlugin } from "satteri";
+
+export interface Heading {
+	readonly depth: number;
+	readonly id: string;
+	readonly title: string;
+}
+
+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) => {
+				if (element.properties.id !== undefined) {
+					return;
+				}
+				const title = context.textContent(element).trim();
+				const slug =
+					title
+						.normalize("NFKC")
+						.toLowerCase()
+						.replace(/[^\p{Letter}\p{Number}\s_-]/gu, "")
+						.trim()
+						.replace(/\s+/gu, "-") || "section";
+				const base = `heading-${slug}`;
+				let id = base;
+				for (let suffix = 2; used.has(id); suffix += 1) {
+					id = `${base}-${suffix}`;
+				}
+				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",
+	});
+	return { entries, plugin };
+}

package/src/render/documentLinks.ts

@@ -0,0 +1,19 @@
+import { defineHastPlugin } from "satteri";
+import { fileUrl } from "#files/url.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",
+	});
+}

package/src/render/footnotes.ts

@@ -1,7 +1,7 @@
 import type { Element } from "hast";
 import { defineHastPlugin } from "satteri";
 
-const FOOTNOTE_IDS = /^(?:user-content-fn|footnote-label)/;
+const FOOTNOTE_IDS = /^(?:user-content-fn|footnote-label)/u;
 
 type Value = Element["properties"][string];
 
@@ -19,7 +19,6 @@ const scoped = (prefix: string, value: Value): Value => {
 
 export const footnoteIds = (prefix: string) =>
 	defineHastPlugin({
-		name: "work-board-footnote-ids",
 		element: {
 			filter: ["a", "h2", "li"],
 			visit: (element) => ({
@@ -29,4 +28,5 @@ export const footnoteIds = (prefix: string) =>
 				),
 			}),
 		},
+		name: "work-board-footnote-ids",
 	});

package/src/render/highlighter.ts

@@ -2,14 +2,14 @@ import { Context, Effect, Layer } from "effect";
 import { createHighlighter, type Highlighter as Shiki } from "shiki";
 import { RenderFailed } from "./failed.ts";
 
-export const THEMES = { light: "github-light", dark: "github-dark" } as const;
+export const THEMES = { dark: "github-dark", light: "github-light" } as const;
 
 export class Highlighter extends Context.Service<Highlighter, Shiki>()("WorkBoard/Highlighter") {
 	static readonly layer = Layer.effect(Highlighter)(
 		Effect.acquireRelease(
 			Effect.tryPromise({
-				try: () => createHighlighter({ themes: Object.values(THEMES), langs: [] }),
 				catch: (cause) => new RenderFailed({ cause }),
+				try: () => createHighlighter({ langs: [], themes: Object.values(THEMES) }),
 			}),
 			(highlighter) => Effect.sync(() => highlighter.dispose()),
 		),

package/src/render/markdown.ts

@@ -1,16 +1,33 @@
 import { Effect } from "effect";
-import { markdownToHtml } from "satteri";
+import { type HastPluginInput, markdownToHtml } from "satteri";
 import { codeBlocks } from "./code.ts";
+import type { documentHeadings } from "./documentHeadings.ts";
+import { documentLinks } from "./documentLinks.ts";
 import { RenderFailed } from "./failed.ts";
 import { footnoteIds } from "./footnotes.ts";
 import { Highlighter } from "./highlighter.ts";
 
-export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, idPrefix = "") {
+export interface RenderOptions {
+	readonly file?: string;
+	readonly headings?: ReturnType<typeof documentHeadings>;
+	readonly idPrefix?: string;
+}
+
+export const renderMarkdown = Effect.fn("WorkBoard.renderMarkdown")(function* (source: string, options: RenderOptions = {}) {
 	const highlighter = yield* Highlighter;
+	const plugins: HastPluginInput[] = [codeBlocks(highlighter)];
+	if (options.idPrefix !== undefined) {
+		plugins.push(footnoteIds(options.idPrefix));
+	}
+	if (options.file !== undefined) {
+		plugins.push(documentLinks(options.file));
+	}
+	if (options.headings !== undefined) {
+		plugins.push(options.headings.plugin);
+	}
 	const { html } = yield* Effect.tryPromise({
-		try: async () =>
-			markdownToHtml(source, { hastPlugins: idPrefix === "" ? [codeBlocks(highlighter)] : [codeBlocks(highlighter), footnoteIds(idPrefix)] }),
 		catch: (cause) => new RenderFailed({ cause }),
+		try: async () => markdownToHtml(source, { hastPlugins: plugins }),
 	});
 	return html;
 });

package/src/search/collector.ts

@@ -0,0 +1,44 @@
+import type { Element } from "hast";
+import { defineHastPlugin } from "satteri";
+import { fileUrl } from "#files/url.ts";
+import type { Entry } from "./entries.ts";
+
+function sourceLine(element: Element, first: number | undefined, length: number): { readonly line?: number } {
+	if (!element.position || first === undefined || element.position.start.line > length) {
+		return {};
+	}
+	return { line: first + element.position.start.line - 1 };
+}
+
+export function searchCollector(file: string, startLine: () => number | undefined, length: () => number) {
+	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;
+				}
+				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

@@ -0,0 +1,51 @@
+import { markdownToHtml } from "satteri";
+import { fileUrl } from "#files/url.ts";
+import { boardOf } from "#render/board.ts";
+import { documentHeadings } from "#render/documentHeadings.ts";
+import { searchCollector } from "./collector.ts";
+import { linkCollector } from "./linkCollector.ts";
+
+export interface Entry {
+	readonly file: string;
+	readonly href: string;
+	readonly kind: "document" | "heading" | "passage";
+	readonly line?: number;
+	readonly text: string;
+	readonly title: string;
+}
+
+function fragmentLocation(source: string, fragment: string, bodyLine: number, seen: Map<string, number>): number | undefined {
+	const start = source.indexOf(fragment, seen.get(fragment) ?? 0);
+	if (start < 0) {
+		return undefined;
+	}
+	seen.set(fragment, start + fragment.length);
+	return bodyLine + source.slice(0, start).split("\n").length - 1;
+}
+
+export async function entriesOf(source: string, file: string, home: boolean, bodyLine = 1, links = new Set<string>()): Promise<readonly Entry[]> {
+	const headings = documentHeadings();
+	let fragmentLine: number | undefined = bodyLine;
+	let fragmentLength = 0;
+	const seenFragments = new Map<string, number>();
+	const { entries, plugin } = searchCollector(
+		file,
+		() => fragmentLine,
+		() => fragmentLength,
+	);
+	const board = home ? boardOf(source) : undefined;
+	const fragments = board
+		? [board.title, board.intro, ...board.sections.flatMap((section) => [section.heading, section.notes, ...section.items]), board.footer]
+		: [source];
+	for (const fragment of fragments) {
+		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)],
+			});
+		}
+	}
+	const title = headings.entries.find((heading) => heading.depth === 1)?.title || file;
+	return [{ file, href: fileUrl(file), kind: "document", line: bodyLine, text: `${file} ${title}`, title }, ...entries];
+}

package/src/search/linkCollector.ts

@@ -0,0 +1,16 @@
+import { defineHastPlugin } from "satteri";
+
+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",
+	});
+}

package/src/search/match.ts

@@ -0,0 +1,28 @@
+import type { Entry } from "./entries.ts";
+
+function normalize(text: string): string {
+	return text.normalize("NFKC").toLowerCase().replace(/\s+/gu, " ").trim();
+}
+
+export function searchMatch(entries: readonly Entry[], query: string) {
+	const phrase = normalize(query.slice(0, 200));
+	const terms = phrase.split(" ").filter(Boolean).slice(0, 8);
+	if (terms.length === 0) {
+		return { results: [], total: 0 };
+	}
+	const matches = entries
+		.flatMap((entry, order) => {
+			const text = normalize(entry.text);
+			if (!terms.every((term) => text.includes(term))) {
+				return [];
+			}
+			const at = Math.max(0, entry.text.toLowerCase().indexOf(terms[0] ?? ""));
+			const start = Math.max(0, at - 50);
+			const snippet = (start ? "…" : "") + entry.text.slice(start, start + 180) + (entry.text.length > start + 180 ? "…" : "");
+			const ranks = { document: 0, heading: 2, passage: 4 };
+			const rank = ranks[entry.kind] + (text.includes(phrase) ? 0 : 1);
+			return [{ entry: { ...entry, snippet }, order, rank }];
+		})
+		.sort((left, right) => left.rank - right.rank || left.order - right.order);
+	return { results: matches.slice(0, 40).map((match) => match.entry), total: matches.length };
+}

package/src/search/metadataEntries.ts

@@ -0,0 +1,42 @@
+import { fileUrl } from "#files/url.ts";
+import { identityUrl } from "#metadata/links.ts";
+import type { MetadataDocument, MetadataModel } from "#metadata/model.ts";
+import type { Entry } from "./entries.ts";
+
+function itemUrl(document: MetadataDocument, model: MetadataModel): string {
+	const id = document.parsed.fields.id;
+	return model.unavailable.length === 0 && id && model.ids.get(id)?.length === 1 ? identityUrl(id) : fileUrl(document.file);
+}
+export function metadataEntries(entries: readonly Entry[], documents: readonly MetadataDocument[], model: MetadataModel): readonly Entry[] {
+	const sources = new Map(documents.map((document) => [document.file, document]));
+	const enriched = entries.map((entry) => {
+		const document = sources.get(entry.file);
+		if (entry.kind !== "document" || !document) {
+			return entry;
+		}
+		const fields = document.parsed.fields;
+		return {
+			...entry,
+			href: itemUrl(document, model),
+			text: [entry.text, fields.id, fields.kind, fields.status, fields.owner, fields.nextAction].filter(Boolean).join(" "),
+		};
+	});
+	for (const document of documents) {
+		const criteria = document.parsed.fields.criteria ?? [];
+		for (const [index, criterion] of criteria.entries()) {
+			if (criteria.filter((item) => item.id === criterion.id).length !== 1) {
+				continue;
+			}
+			const line = document.parsed.lines[`criteria.${index}`] ?? document.parsed.lines.criteria;
+			enriched.push({
+				file: document.file,
+				href: `${itemUrl(document, model)}#criterion-${encodeURIComponent(criterion.id)}`,
+				kind: "passage",
+				...(line === undefined ? {} : { line }),
+				text: criterion.text,
+				title: criterion.text,
+			});
+		}
+	}
+	return enriched;
+}