@shivaedev/work-board 0.0.0 → 0.1.0

package/src/page/style.ts

@@ -0,0 +1,79 @@
+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; }
+`;
+
+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; }
+h2 { font-size: 1.45em; }
+h3 { font-size: 1.15em; }
+h1 strong, h2 strong, h3 strong { font-weight: inherit; }
+p, ul, ol, pre, table, blockquote, details, figure { margin: 0 0 1.1em; }
+li + li { margin-top: 0.25em; }
+.contains-task-list { list-style: none; padding-left: 0.4em; }
+hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
+blockquote { padding-left: 1em; border-left: 3px solid var(--border); color: var(--muted); }
+code { font: 0.875em var(--mono); background: var(--surface); padding: 0.1em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
+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); } }
+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); }
+@media (max-width: 600px) { table { table-layout: fixed; } td, th { overflow-wrap: anywhere; } }
+summary { cursor: pointer; color: var(--muted); }
+details[open] > summary { margin-bottom: 0.5em; }
+img, svg { max-width: 100%; height: auto; }
+.empty { color: var(--muted); font-style: italic; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+`;
+
+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); }
+.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; }
+`;
+
+const diagrams = `
+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; }
+@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
+`;
+
+export const style = tokens + page + prose + board + diagrams;

package/src/page/swap.ts

@@ -0,0 +1,122 @@
+export const swap = `
+const containers = new Set(["DIV", "SECTION", "ARTICLE", "HEADER", "FOOTER", "MAIN", "NAV"]);
+
+const structural = (element) => [...element.childNodes].every((node) => node.nodeType === 1 || node.textContent.trim() === "");
+
+const pristine = new WeakMap();
+
+export const remember = (element) => {
+  pristine.set(element, element.outerHTML);
+  if (containers.has(element.tagName)) for (const child of element.children) remember(child);
+};
+
+const normalized = (element) => {
+  const copy = element.cloneNode(true);
+  for (const node of [copy, ...copy.querySelectorAll("*")]) {
+    if (node.tagName === "DETAILS") node.removeAttribute("open");
+    if (node.matches("figure.diagram")) {
+      node.querySelector(".diagram-svg")?.remove();
+      node.dataset.state = "pending";
+      delete node.dataset.error;
+    }
+    if (node.matches("[data-modified]")) node.textContent = "";
+  }
+  return copy.outerHTML;
+};
+
+const signature = (element) => {
+  if (!pristine.has(element)) pristine.set(element, normalized(element));
+  return pristine.get(element);
+};
+
+const sameShell = (old, next) =>
+  old.tagName === next.tagName && containers.has(old.tagName) && old.cloneNode(false).outerHTML === next.cloneNode(false).outerHTML;
+
+const matches = (a, b) => {
+  let start = 0;
+  while (start < a.length && start < b.length && a[start] === b[start]) start++;
+  let tail = 0;
+  while (tail < a.length - start && tail < b.length - start && a[a.length - 1 - tail] === b[b.length - 1 - tail]) tail++;
+  const n = a.length - start - tail;
+  const m = b.length - start - tail;
+  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      table[i][j] = a[start + i] === b[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);
+    }
+  }
+  const pairs = Array.from({ length: start }, (_, index) => [index, index]);
+  for (let i = 0, j = 0; i < n && j < m; ) {
+    if (a[start + i] === b[start + j]) pairs.push([start + i++, start + j++]);
+    else if (table[i + 1][j] >= table[i][j + 1]) i++;
+    else j++;
+  }
+  for (let index = tail; index > 0; index--) pairs.push([a.length - index, b.length - index]);
+  return [...pairs, [a.length, b.length]];
+};
+
+const patch = (current, incoming) => {
+  if (!structural(current) || !structural(incoming)) {
+    current.replaceChildren(...incoming.childNodes);
+    for (const child of current.children) remember(child);
+    return;
+  }
+  const olds = [...current.children];
+  const news = [...incoming.children];
+  const signatures = news.map((next) => next.outerHTML);
+  const arrive = (index) => {
+    remember(news[index]);
+    return news[index];
+  };
+  let i = 0;
+  let j = 0;
+  for (const [kept, arrived] of matches(olds.map(signature), signatures)) {
+    const anchor = olds[kept] ?? null;
+    for (; i < kept && j < arrived; i++, j++) {
+      if (sameShell(olds[i], news[j])) {
+        patch(olds[i], news[j]);
+        pristine.set(olds[i], signatures[j]);
+      } else olds[i].replaceWith(arrive(j));
+    }
+    for (; i < kept; i++) olds[i].remove();
+    for (; j < arrived; j++) current.insertBefore(arrive(j), anchor);
+    i++;
+    j++;
+  }
+};
+
+const keysOf = (root) => {
+  const seen = new Map();
+  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];
+  });
+};
+
+const carryDrawings = (drawings, figures) => {
+  if (drawings.length !== figures.length) return;
+  figures.forEach((figure, index) => {
+    const drawing = drawings[index];
+    if (figure.dataset.state !== "pending" || drawing === null || drawing.isConnected) return;
+    figure.prepend(drawing);
+    figure.dataset.state = "redrawing";
+  });
+};
+
+export const swap = (current, incoming) => {
+  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);
+  carryDrawings(drawings, [...current.querySelectorAll("figure.diagram")]);
+  for (const [key, details] of keysOf(current)) {
+    const was = open.get(key);
+    if (was !== undefined && !existing.has(details)) details.open = was;
+  }
+};
+`;

package/src/page/updated.ts

@@ -0,0 +1 @@
+export const updated = (modified: number): string => `<span class="age" data-modified="${modified}">updated</span>`;

package/src/render/board.ts

@@ -0,0 +1,82 @@
+import type { RootContent } from "mdast";
+import { markdownToMdast } from "satteri";
+
+export interface Section {
+	readonly title: string;
+	readonly heading: string;
+	readonly notes: string;
+	readonly items: ReadonlyArray<string>;
+}
+
+export interface Board {
+	readonly title: string;
+	readonly intro: string;
+	readonly sections: ReadonlyArray<Section>;
+	readonly footer: string;
+	readonly definitions: string;
+}
+
+interface Draft {
+	title: string;
+	intro: string[];
+	sections: Array<{ title: string; heading: string; notes: string[]; items: string[][] }>;
+	footer: string[] | undefined;
+	definitions: string[];
+}
+
+const textOf = (node: RootContent): string => {
+	if ("value" in node) {
+		return node.value;
+	}
+	return "children" in node ? node.children.map((child) => textOf(child)).join("") : "";
+};
+
+const isSection = (node: RootContent): boolean => node.type === "heading" && node.depth === 2;
+
+const place = (draft: Draft, node: RootContent, source: string, closing: boolean): void => {
+	const section = draft.sections.at(-1);
+	if (node.type === "definition" || node.type === "footnoteDefinition") {
+		draft.definitions.push(source);
+	} else if (draft.footer !== undefined) {
+		draft.footer.push(source);
+	} 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: [] });
+	} else if (section === undefined) {
+		draft.intro.push(source);
+	} else if (node.type === "heading" && node.depth === 3) {
+		section.items.push([source]);
+	} else if (node.type === "thematicBreak" && closing) {
+		draft.footer = [];
+	} else {
+		(section.items.at(-1) ?? section.notes).push(source);
+	}
+};
+
+const joined = (blocks: ReadonlyArray<string>): string => blocks.join("\n\n");
+
+export const boardOf = (source: string): Board => {
+	const draft: Draft = { title: "", intro: [], sections: [], footer: undefined, definitions: [] };
+	const root = markdownToMdast(source);
+	const nodes = root.type === "root" ? root.children : [];
+	const lastHeading = nodes.findLastIndex((node) => node.type === "heading");
+	nodes.forEach((node, index) => {
+		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),
+	};
+};
+
+export interface Count {
+	readonly title: string;
+	readonly count: number;
+}
+
+export const countsOf = (board: Board): ReadonlyArray<Count> =>
+	board.sections.flatMap((section) => (section.items.length === 0 ? [] : [{ title: section.title, count: section.items.length }]));

package/src/render/code.ts

@@ -0,0 +1,54 @@
+import type { Element, ElementContent } from "hast";
+import { defineHastPlugin } from "satteri";
+import { type BundledLanguage, bundledLanguages, type Highlighter as Shiki } from "shiki";
+import { THEMES } from "./highlighter.ts";
+
+const languageOf = (code: Element): string | undefined => {
+	const classes = code.properties.className;
+	const named = Array.isArray(classes) ? classes.find((name) => String(name).startsWith("language-")) : undefined;
+	return named === undefined ? undefined : String(named).slice("language-".length);
+};
+
+const textOf = (node: ElementContent): string => {
+	if (node.type === "text") {
+		return node.value;
+	}
+	return node.type === "element" ? node.children.map(textOf).join("") : "";
+};
+
+const diagram = (source: string): Element => ({
+	type: "element",
+	tagName: "figure",
+	properties: { className: ["diagram"], dataState: "pending" },
+	children: [{ type: "element", tagName: "pre", properties: { className: ["diagram-source"] }, children: [{ type: "text", value: source }] }],
+});
+
+const isBundled = (language: string): language is BundledLanguage => Object.hasOwn(bundledLanguages, language);
+
+const highlighted = async (highlighter: Shiki, source: string, language: string) => {
+	if (!isBundled(language)) {
+		return undefined;
+	}
+	await highlighter.loadLanguage(language);
+	return highlighter.codeToHast(source, { lang: language, themes: THEMES, defaultColor: false }).children[0];
+};
+
+export const codeBlocks = (highlighter: Shiki) =>
+	defineHastPlugin({
+		name: "work-board-code",
+		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);
+				}
+				return language === undefined ? undefined : await highlighted(highlighter, source, language);
+			},
+		},
+	});

package/src/render/failed.ts

@@ -0,0 +1,3 @@
+import { Data } from "effect";
+
+export class RenderFailed extends Data.TaggedError("RenderFailed")<{ readonly cause: unknown }> {}

package/src/render/footnotes.ts

@@ -0,0 +1,32 @@
+import type { Element } from "hast";
+import { defineHastPlugin } from "satteri";
+
+const FOOTNOTE_IDS = /^(?:user-content-fn|footnote-label)/;
+
+type Value = Element["properties"][string];
+
+const SCOPED = new Set(["id", "href", "ariaDescribedBy"]);
+
+const scoped = (prefix: string, value: Value): Value => {
+	if (typeof value === "string" && FOOTNOTE_IDS.test(value)) {
+		return `${prefix}${value}`;
+	}
+	if (typeof value === "string" && value.startsWith("#") && FOOTNOTE_IDS.test(value.slice(1))) {
+		return `#${prefix}${value.slice(1)}`;
+	}
+	return Array.isArray(value) ? value.map((each) => (typeof each === "string" ? String(scoped(prefix, each)) : each)) : value;
+};
+
+export const footnoteIds = (prefix: string) =>
+	defineHastPlugin({
+		name: "work-board-footnote-ids",
+		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]),
+				),
+			}),
+		},
+	});

package/src/render/highlighter.ts

@@ -0,0 +1,17 @@
+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 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 }),
+			}),
+			(highlighter) => Effect.sync(() => highlighter.dispose()),
+		),
+	);
+}

package/src/render/markdown.ts

@@ -0,0 +1,16 @@
+import { Effect } from "effect";
+import { markdownToHtml } from "satteri";
+import { codeBlocks } from "./code.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 = "") {
+	const highlighter = yield* Highlighter;
+	const { html } = yield* Effect.tryPromise({
+		try: async () =>
+			markdownToHtml(source, { hastPlugins: idPrefix === "" ? [codeBlocks(highlighter)] : [codeBlocks(highlighter), footnoteIds(idPrefix)] }),
+		catch: (cause) => new RenderFailed({ cause }),
+	});
+	return html;
+});

package/src/serve.ts

@@ -0,0 +1,16 @@
+import { createServer } from "node:http";
+import { NodeHttpServer } from "@effect/platform-node";
+import { Layer } from "effect";
+import { HttpRouter } from "effect/unstable/http";
+import { type BoardOptions, boardLayer } from "./board.ts";
+
+export const HOST = "127.0.0.1";
+
+export interface ServeOptions extends BoardOptions {
+	readonly port: number;
+}
+
+export const listenOn = (port: number) => NodeHttpServer.layer(createServer, { host: HOST, port, disablePreemptiveShutdown: true });
+
+export const serveBoard = (options: ServeOptions) =>
+	HttpRouter.serve(boardLayer(options), { disableLogger: true }).pipe(Layer.provideMerge(listenOn(options.port)));