yamlover 0.3.0

package/src/client/renderers/registry.tsx

@@ -0,0 +1,389 @@
+import { lazy, Suspense } from "react";
+import { NodeJson, TreeNode } from "../api";
+import { ChapterView } from "./chapter";
+import { TextView, TextChunk } from "./text";
+import { MarklowerView, MarklowerChunk } from "./marklower";
+import { LatexView, LatexChunk } from "./latex";
+import { AsciidocView, AsciidocChunk } from "./asciidoc";
+import { CsvView, CsvChunk, CsvControls } from "./csv";
+import { PlaintextView, PlaintextChunk, EncodingControl } from "./plaintext";
+import { RtfView, RtfChunk } from "./rtf";
+import { DocView, DocChunk } from "./doc";
+import { PlantumlView, PlantumlChunk } from "./plantuml";
+import { ExplorerView, ExplorerViewControl } from "./explorer";
+import { Fb2View } from "./fb2";
+import { EpubView } from "./epub";
+import { HtmlView } from "./media";
+import { MarkupWidthControl } from "./markup";
+
+// pdf.js and DjVu.js are heavy and browser-only (they reach for canvas globals at
+// import time). Load them lazily so the registry — imported by the TOC and by
+// tests — never pulls them in until a PDF/DjVu node is actually rendered.
+const PdfView = lazy(() => import("./pdf").then((m) => ({ default: m.PdfView })));
+const DjvuView = lazy(() => import("./djvu").then((m) => ({ default: m.DjvuView })));
+const PsdView = lazy(() => import("./psd").then((m) => ({ default: m.PsdView })));
+const TiffView = lazy(() => import("./tiff").then((m) => ({ default: m.TiffView })));
+const HeicView = lazy(() => import("./heic").then((m) => ({ default: m.HeicView })));
+// mammoth (.docx) and SheetJS (.xls/.xlsx) are heavy; load each on first use.
+const DocxView = lazy(() => import("./docx").then((m) => ({ default: m.DocxView })));
+const DocxChunk = lazy(() => import("./docx").then((m) => ({ default: m.DocxChunk })));
+const SpreadsheetView = lazy(() => import("./spreadsheet").then((m) => ({ default: m.SpreadsheetView })));
+const SpreadsheetChunk = lazy(() => import("./spreadsheet").then((m) => ({ default: m.SpreadsheetChunk })));
+// Leaflet (KML/KMZ maps; and the pan/zoom image viewer) is heavy and browser-only; lazy-load.
+const MapView = lazy(() => import("./map").then((m) => ({ default: m.MapView })));
+const MapChunk = lazy(() => import("./map").then((m) => ({ default: m.MapChunk })));
+const ImageView = lazy(() => import("./imagemap").then((m) => ({ default: m.ImageView })));
+const ImageChunk = lazy(() => import("./imagemap").then((m) => ({ default: m.ImageChunk })));
+const lazily = (el: JSX.Element) => <Suspense fallback={<div className="loading">…</div>}>{el}</Suspense>;
+
+/** Synthesize a minimal `NodeJson` from a chunk so a file-backed renderer (which
+ *  only needs the node's `path`/`value`) can be reused *inline* as a chapter
+ *  chunk — the same view, addressed by the chunk's own node path. This is how a
+ *  PDF / DjVu / PSD / TIFF / HEIC / FB2 / EPUB / HTML chunk renders in a chapter
+ *  body, not just a full page. */
+const chunkNode = (chunk: Chunk): NodeJson => ({
+  path: chunk.path,
+  type: chunk.type,
+  format: chunk.format,
+  concrete: null,
+  title: null,
+  description: null,
+  value: chunk.value,
+});
+
+/**
+ * A renderer turns a node into a React element for the RHS pane. It is selected
+ * by the node's **(type, format)** tuple — the same key the TOC icons and the
+ * link markers carry — so a renderer can claim, say, every `string`/`text/markdown`,
+ * every `object`/`x-yamlover-chapter`, or a bare `(type, None)`. Our own custom
+ * formats are prefixed `x-yamlover-`.
+ *
+ * The registry is the single extension point: add an entry here to teach the UI a
+ * new renderable shape. A renderer's `name` is also its representation key — the
+ * label of its tab and the `?format=` value (e.g. `chapter`).
+ *
+ * A renderer participates in the UI three ways, all keyed by the same tuple:
+ *   - `render` — the full RHS page.
+ *   - `renderChunk` — its *inline* form, when embedded in another renderer's page
+ *     (a chapter renders each chunk by routing to the chunk's own renderer here).
+ *   - `tocView` — how the node appears in the TOC: which children are navigable,
+ *     whether it expands, and whether they are loaded. The chapter unwraps its
+ *     `children` array (subchapters become its direct TOC entries) and keeps its
+ *     `chunks` off the tree (prose is read on the page, not browsed).
+ */
+
+/** A single chunk handed to a renderer's `renderChunk` — its value plus the
+ *  (type, format) it was routed on and its JSON path (the anchor target). */
+export interface Chunk {
+  value: unknown;
+  path: string;
+  type: string;
+  format: string | null;
+  /** The JSON-space path of the document this chunk belongs to (the enclosing
+   *  chapter's `documentPath`) — the anchor a document-relative (`/…`) marklower
+   *  link in the chunk resolves against. */
+  documentPath?: string;
+}
+
+/** How a node appears in the TOC. `children` are the rows shown beneath it;
+ *  `expandable` shows a chevron; `loaded` false means the children must be
+ *  fetched (by `node.path`) on first expand. `loadDepth` is how many levels that
+ *  expand fetch must pull (default 1) — more when a renderer's TOC rows live
+ *  deeper than the node's direct children (a chapter surfaces its subchapters
+ *  from *under* its `children` wrapper, and fetches one further level so each
+ *  revealed subchapter's own chevron is accurate — so it needs 3). */
+export interface TocView {
+  children: TreeNode[];
+  expandable: boolean;
+  loaded: boolean;
+  loadDepth?: number;
+}
+
+export interface Renderer {
+  name: string;
+  /** The (type, format) tuples this renderer claims. A `null` format matches a
+   *  node that carries no `format`; a string format matches that format exactly. */
+  accepts: ReadonlyArray<readonly [type: string, format: string | null]>;
+  /** Value depth `NodeView` must fetch for this renderer (default 1). A chapter
+   *  needs 2: its `chunks`/`children` arrays one level, their elements the next. */
+  depth?: number;
+  /** This node's TOC presentation (default: its own children, lazily loaded). */
+  tocView?: (node: TreeNode) => TocView;
+  render: (node: NodeJson, onNavigate: (path: string) => void) => JSX.Element;
+  /** This renderer's inline form, for embedding a single value in another page. */
+  renderChunk?: (chunk: Chunk, onNavigate: (path: string) => void) => JSX.Element;
+  /** An optional control shown in the tab bar beside this renderer's button (only while its
+   *  view is active) — e.g. the markdown/asciidoc reading-width input. `rerender` refreshes
+   *  the node view after the control changes a URL parameter. */
+  config?: (rerender: () => void) => JSX.Element;
+}
+
+/**
+ * The EXPLORER — a file-manager "small icons" grid of a node's members, uplinks first. It is
+ * claimed two ways: by (type, format) for tags (a tag projects as `object` — fields only,
+ * `variant` — description BODY + fields, `string` — a leaf tag that is just its description,
+ * or `null` — a bare tag with neither, the shape the picker's create-on-miss writes;
+ * the grid shows the tagged MATERIALS), and as the CONCRETE fallback for any node stored as a
+ * filesystem directory (`dir`/`yamlover`) that no (type, format) renderer claims — see
+ * {@link getRenderer}. Hoisted so the fallback can reference the same instance.
+ */
+const EXPLORER: Renderer = {
+  name: "explorer",
+  accepts: [
+    ["object", "x-yamlover-tag"],
+    ["variant", "x-yamlover-tag"],
+    ["string", "x-yamlover-tag"],
+    ["null", "x-yamlover-tag"],
+  ],
+  render: (node, onNavigate) => <ExplorerView node={node} onNavigate={onNavigate} />,
+  config: (rerender) => <ExplorerViewControl rerender={rerender} />, // large/small icons (`?view=`)
+};
+
+/** A directory-stored node (`dir` = a plain folder, `yamlover` = a folder with `.yamlover/`). */
+const isDirConcrete = (concrete: string | null | undefined): boolean => concrete === "dir" || concrete === "yamlover";
+
+const REGISTRY: Renderer[] = [
+  {
+    name: "chapter",
+    accepts: [["object", "x-yamlover-chapter"]],
+    depth: 2, // reach the chunk/subchapter elements (arrays one level, items the next)
+    tocView: chapterTocView,
+    render: (node, onNavigate) => <ChapterView node={node} onNavigate={onNavigate} />,
+  },
+  {
+    // Our default for a bare, format-less string: marklower, a markup language a
+    // notch below Markdown. A chapter's prose chunks route here — both the bare
+    // (string, null) form and the explicit `text/marklower` the chunk schema applies.
+    name: "marklower",
+    accepts: [
+      ["string", null],
+      ["string", "text/marklower"],
+    ],
+    render: (node, onNavigate) => <MarklowerView node={node} onNavigate={onNavigate} />,
+    renderChunk: (chunk, onNavigate) => <MarklowerChunk chunk={chunk} onNavigate={onNavigate} />,
+  },
+  {
+    // Markdown (the component file is text.tsx for historical reasons; the renderer —
+    // its tab label and `?format=` key — is named for what it renders).
+    name: "markdown",
+    accepts: [["string", "text/markdown"]],
+    render: (node) => <TextView node={node} />,
+    renderChunk: (chunk) => <TextChunk chunk={chunk} />,
+    config: (rerender) => <MarkupWidthControl rerender={rerender} />,
+  },
+  {
+    name: "asciidoc",
+    accepts: [["string", "text/asciidoc"]],
+    render: (node) => <AsciidocView node={node} />,
+    renderChunk: (chunk) => <AsciidocChunk chunk={chunk} />,
+    config: (rerender) => <MarkupWidthControl rerender={rerender} />,
+  },
+  {
+    // Delimited text (CSV/TSV, a string) shown as a table; its parsing options
+    // (separator, header) ride in the URL query — see csv.tsx.
+    name: "csv",
+    accepts: [
+      ["string", "text/csv"],
+      ["string", "text/tab-separated-values"],
+    ],
+    render: (node) => <CsvView node={node} />,
+    renderChunk: (chunk) => <CsvChunk chunk={chunk} />,
+    config: (rerender) => <CsvControls rerender={rerender} />,
+  },
+  {
+    // Plain text shown verbatim (no markup), with a node-bar encoding selector —
+    // CP866 / Windows-1251 / KOI8-R / UTF-8 (see plaintext.tsx). Served as raw
+    // bytes so the encoding is the client's to choose.
+    name: "plaintext",
+    accepts: [["binary", "text/plain"]],
+    render: (node) => <PlaintextView node={node} />,
+    renderChunk: (chunk) => <PlaintextChunk chunk={chunk} />,
+    config: (rerender) => <EncodingControl rerender={rerender} />,
+  },
+  {
+    // RTF — a dependency-free converter to HTML (see rtf.tsx).
+    name: "rtf",
+    accepts: [["binary", "application/rtf"]],
+    render: (node) => <RtfView node={node} />,
+    renderChunk: (chunk) => <RtfChunk chunk={chunk} />,
+  },
+  {
+    // .docx (Office Open XML) via mammoth, lazily loaded.
+    name: "docx",
+    accepts: [["binary", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"]],
+    render: (node) => lazily(<DocxView node={node} />),
+    renderChunk: (chunk) => lazily(<DocxChunk chunk={chunk} />),
+  },
+  {
+    // Excel workbooks — .xlsx and legacy .xls — via SheetJS, lazily loaded.
+    name: "spreadsheet",
+    accepts: [
+      ["binary", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
+      ["binary", "application/vnd.ms-excel"],
+    ],
+    render: (node) => lazily(<SpreadsheetView node={node} />),
+    renderChunk: (chunk) => lazily(<SpreadsheetChunk chunk={chunk} />),
+  },
+  {
+    // Legacy .doc (Word 97–2003 binary) — no in-browser parser; download fallback.
+    name: "doc",
+    accepts: [["binary", "application/msword"]],
+    render: (node) => <DocView node={node} />,
+    renderChunk: (chunk) => <DocChunk chunk={chunk} />,
+  },
+  {
+    // KML / KMZ geographic overlays drawn on a Leaflet map (lazily loaded).
+    name: "map",
+    accepts: [
+      ["binary", "application/vnd.google-earth.kml+xml"],
+      ["binary", "application/vnd.google-earth.kmz"],
+    ],
+    render: (node) => lazily(<MapView node={node} />),
+    renderChunk: (chunk) => lazily(<MapChunk chunk={chunk} />),
+  },
+  {
+    // LaTeX math (a string) typeset with KaTeX, both whole and inline. marklower
+    // reuses the same engine for its `$$…$$` spans.
+    name: "latex",
+    accepts: [["string", "text/x-latex"]],
+    render: (node) => <LatexView node={node} />,
+    renderChunk: (chunk) => <LatexChunk chunk={chunk} />,
+  },
+  {
+    // PlantUML source (a string) shown as the diagram it compiles to, both as a
+    // whole node and inline as a chapter chunk.
+    name: "plantuml",
+    accepts: [["string", "text/x-plantuml"]],
+    render: (node) => <PlantumlView node={node} />,
+    renderChunk: (chunk) => <PlantumlChunk chunk={chunk} />,
+  },
+  EXPLORER,
+  {
+    // File-backed binaries the server tags with an inferred image format.
+    name: "image",
+    accepts: [
+      ["binary", "image/png"],
+      ["binary", "image/jpeg"],
+      ["binary", "image/gif"],
+      ["binary", "image/webp"],
+      ["binary", "image/avif"],
+      ["binary", "image/bmp"],
+      ["binary", "image/x-icon"],
+      ["binary", "image/svg+xml"],
+    ],
+    render: (node) => lazily(<ImageView node={node} />),
+    renderChunk: (chunk) => lazily(<ImageChunk chunk={chunk} />),
+  },
+  {
+    name: "html",
+    accepts: [["binary", "text/html"]],
+    render: (node) => <HtmlView node={node} />,
+    renderChunk: (chunk) => <HtmlView node={chunkNode(chunk)} />,
+  },
+  {
+    name: "fb2",
+    accepts: [["binary", "application/x-fictionbook+xml"]],
+    render: (node) => <Fb2View node={node} />,
+    renderChunk: (chunk) => <Fb2View node={chunkNode(chunk)} />,
+  },
+  {
+    name: "epub",
+    accepts: [["binary", "application/epub+zip"]],
+    render: (node) => <EpubView node={node} />,
+    renderChunk: (chunk) => <EpubView node={chunkNode(chunk)} />,
+  },
+  {
+    name: "pdf",
+    accepts: [["binary", "application/pdf"]],
+    render: (node) => lazily(<PdfView node={node} />),
+    renderChunk: (chunk) => lazily(<PdfView node={chunkNode(chunk)} />),
+  },
+  {
+    name: "djvu",
+    accepts: [["binary", "image/vnd.djvu"]],
+    render: (node) => lazily(<DjvuView node={node} />),
+    renderChunk: (chunk) => lazily(<DjvuView node={chunkNode(chunk)} />),
+  },
+  {
+    name: "psd",
+    accepts: [["binary", "image/vnd.adobe.photoshop"]],
+    render: (node) => lazily(<PsdView node={node} />),
+    renderChunk: (chunk) => lazily(<PsdView node={chunkNode(chunk)} />),
+  },
+  {
+    name: "tiff",
+    accepts: [["binary", "image/tiff"]],
+    render: (node) => lazily(<TiffView node={node} />),
+    renderChunk: (chunk) => lazily(<TiffView node={chunkNode(chunk)} />),
+  },
+  {
+    name: "heic",
+    accepts: [["binary", "image/heic"]],
+    render: (node) => lazily(<HeicView node={node} />),
+    renderChunk: (chunk) => lazily(<HeicView node={chunkNode(chunk)} />),
+  },
+];
+
+/** The last path segment (a property key or `[index]`) of a colon-form client path. */
+function basename(path: string): string {
+  const i = path.lastIndexOf(":");
+  return i < 0 ? path : path.slice(i + 1);
+}
+
+/** A chapter's TOC view: its subchapters (the items of its `children` array)
+ *  surfaced directly, with its `chunks` kept off the tree. The `children` wrapper
+ *  sits one level below the chapter, so its items are loaded one level deeper —
+ *  expandability follows the wrapper's own `hasChildren`. */
+function chapterTocView(node: TreeNode): TocView {
+  // Subchapters live under the `children` wrapper, one level below the chapter, so
+  // revealing them costs a level (chapter → children → subchapters). We fetch one
+  // more (→ each subchapter's own `children` wrapper) so a revealed subchapter's
+  // chevron is decided from its real subchapter list, not the generic `hasChildren`
+  // hint (which is always true for a chapter — it has `chunks`/`children` arrays).
+  // Hence 3, so a childless chapter (only chunks) shows no chevron from the start.
+  const wrap = node.children.find((c) => basename(c.path) === "children");
+  if (!wrap) {
+    // the chapter itself is not loaded yet — defer to the server's hint
+    return { children: [], expandable: node.hasChildren, loaded: node.children.length > 0, loadDepth: 3 };
+  }
+  // expandable iff the `children` wrapper actually holds subchapters (chunks-only
+  // chapters have an empty wrapper → no chevron)
+  return {
+    children: wrap.children,
+    expandable: wrap.hasChildren,
+    loaded: wrap.children.length > 0 || !wrap.hasChildren,
+    loadDepth: 3,
+  };
+}
+
+/** The renderer whose `accepts` covers `(type, format)`, or null when none does. */
+export function rendererFor(type: string, format: string | null): Renderer | null {
+  return REGISTRY.find((r) => r.accepts.some(([t, f]) => t === type && f === format)) ?? null;
+}
+
+/** The renderer for a node: its (type, format) claim, else — for a node stored as a
+ *  filesystem directory that no format renderer claims (a dir-backed chapter stays a
+ *  chapter) — the explorer, else null → the default tabbed view. */
+export function getRenderer(node: NodeJson): Renderer | null {
+  const r = rendererFor(node.type, node.format ?? null);
+  if (r) return r;
+  return isDirConcrete(node.concrete) ? EXPLORER : null;
+}
+
+/** The name (= representation key / `?format=` value) of the renderer for
+ *  `(type, format)` — with the same directory-concrete explorer fallback as
+ *  {@link getRenderer} — or null when none claims it. */
+export function rendererName(type: string, format: string | null, concrete?: string | null): string | null {
+  const r = rendererFor(type, format);
+  if (r) return r.name;
+  return isDirConcrete(concrete) ? EXPLORER.name : null;
+}
+
+/** How `node` appears in the TOC: its renderer's `tocView`, or — when no renderer
+ *  claims it — its own children, lazily loaded (the passive default). */
+export function tocView(node: TreeNode): TocView {
+  const r = rendererFor(node.type, node.format);
+  if (r?.tocView) return r.tocView(node);
+  const loaded = node.children.length > 0;
+  return { children: node.children, expandable: loaded ? node.children.length > 0 : node.hasChildren, loaded };
+}

package/src/client/renderers/rtf.tsx

@@ -0,0 +1,210 @@
+import { useEffect, useState } from "react";
+import { NodeJson, blobUrl } from "../api";
+import { Chunk } from "./registry";
+
+/**
+ * Renderer for an `application/rtf` (`.rtf`) document. RTF is a plain-text control
+ * language; rather than pull in a heavy dependency we walk it with a compact,
+ * dependency-free converter ({@link rtfToHtml}) that covers the common content:
+ * paragraphs, bold/italic/underline runs, tabs/line breaks, hex (`\'xx`, CP-1252)
+ * and `\uN` Unicode escapes — skipping the non-content destination groups
+ * (`fonttbl`, `colortbl`, `stylesheet`, `info`, pictures, …). The result is shown
+ * in the shared `.markup` body, like the Markdown/AsciiDoc renderers.
+ */
+
+// The handful of Windows-1252 code points that differ from Latin-1 (0x80–0x9F),
+// used to decode `\'xx` bytes the way most RTF producers mean them.
+const CP1252: Record<number, string> = {
+  0x80: "€", 0x82: "‚", 0x83: "ƒ", 0x84: "„", 0x85: "…", 0x86: "†", 0x87: "‡",
+  0x88: "ˆ", 0x89: "‰", 0x8a: "Š", 0x8b: "‹", 0x8c: "Œ", 0x8e: "Ž", 0x91: "‘",
+  0x92: "’", 0x93: "“", 0x94: "”", 0x95: "•", 0x96: "–", 0x97: "—", 0x98: "˜",
+  0x99: "™", 0x9a: "š", 0x9b: "›", 0x9c: "œ", 0x9e: "ž", 0x9f: "Ÿ",
+};
+const byteToChar = (b: number) => (b < 0x80 ? String.fromCharCode(b) : CP1252[b] ?? String.fromCharCode(b));
+
+// Group destinations whose contents are not document text — skipped wholesale.
+const SKIP_DESTS = new Set([
+  "fonttbl", "colortbl", "stylesheet", "info", "pict", "header", "footer",
+  "footnote", "xmlnstbl", "themedata", "colorschememapping", "datastore",
+  "latentstyles", "listtable", "listoverridetable", "rsidtbl", "generator",
+  "operator", "creatim", "revtim", "printim", "buptim", "author", "title",
+  "subject", "keywords", "comment", "company", "manager", "category", "doccomm",
+  "hlinkbase", "filetbl", "mmathPr", "fldinst", "object", "nonshppict",
+]);
+
+interface Style {
+  b: boolean;
+  i: boolean;
+  u: boolean;
+  uc: number; // Unicode fallback skip count (\ucN)
+}
+interface Run {
+  text: string;
+  b: boolean;
+  i: boolean;
+  u: boolean;
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/** Convert RTF source to an HTML string (a sequence of `<p>` paragraphs with
+ *  `<strong>`/`<em>`/`<u>` runs). Best-effort: unknown control words are ignored. */
+export function rtfToHtml(rtf: string): string {
+  const paragraphs: Run[][] = [];
+  let runs: Run[] = [];
+  let st: Style = { b: false, i: false, u: false, uc: 1 };
+  const stack: Style[] = [];
+  let depth = 0;
+  let skipDepth = Infinity; // skip content while depth >= skipDepth
+  const n = rtf.length;
+  let i = 0;
+
+  const active = () => depth < skipDepth;
+  const emit = (t: string) => {
+    if (!t || !active()) return;
+    const last = runs[runs.length - 1];
+    if (last && last.b === st.b && last.i === st.i && last.u === st.u) last.text += t;
+    else runs.push({ text: t, b: st.b, i: st.i, u: st.u });
+  };
+  const endPara = () => {
+    if (!active()) return;
+    paragraphs.push(runs);
+    runs = [];
+  };
+
+  const control = (word: string, param: number | null) => {
+    switch (word) {
+      case "b": st.b = param !== 0; break;
+      case "i": st.i = param !== 0; break;
+      case "ul": st.u = param !== 0; break;
+      case "ulnone": st.u = false; break;
+      case "uc": st.uc = param ?? 1; break;
+      case "par": case "row": endPara(); break;
+      case "line": case "sect": emit("\n"); break;
+      case "tab": case "cell": emit("\t"); break;
+      case "pard": case "plain": st.b = st.i = st.u = false; break;
+      default:
+        if (SKIP_DESTS.has(word)) skipDepth = Math.min(skipDepth, depth);
+        break;
+    }
+  };
+
+  while (i < n) {
+    const c = rtf[i];
+    if (c === "{") {
+      stack.push({ ...st });
+      depth++;
+      i++;
+    } else if (c === "}") {
+      depth--;
+      if (depth < skipDepth) skipDepth = Infinity;
+      st = stack.pop() ?? st;
+      i++;
+    } else if (c === "\\") {
+      const next = rtf[i + 1];
+      if (next === "\\" || next === "{" || next === "}") {
+        emit(next);
+        i += 2;
+      } else if (next === "*") {
+        skipDepth = Math.min(skipDepth, depth); // ignorable destination
+        i += 2;
+      } else if (next === "'") {
+        const b = parseInt(rtf.substr(i + 2, 2), 16);
+        if (!isNaN(b)) emit(byteToChar(b));
+        i += 4;
+      } else if (next === "~") {
+        emit(" "); i += 2; // non-breaking space
+      } else if (next === "-") {
+        i += 2; // optional hyphen — drop
+      } else if (/[a-zA-Z]/.test(next ?? "")) {
+        let j = i + 1;
+        while (j < n && /[a-zA-Z]/.test(rtf[j])) j++;
+        const word = rtf.slice(i + 1, j);
+        let num = "";
+        if (rtf[j] === "-") { num += "-"; j++; }
+        while (j < n && /[0-9]/.test(rtf[j])) num += rtf[j++];
+        const param = num === "" ? null : parseInt(num, 10);
+        if (rtf[j] === " ") j++; // a single trailing space delimits, and is consumed
+        i = j;
+        if (word === "u" && param !== null) {
+          if (active()) emit(String.fromCodePoint(param < 0 ? param + 0x10000 : param));
+          // skip the \ucN fallback characters that follow the \u
+          for (let skip = st.uc; skip > 0 && i < n; skip--) {
+            if (rtf[i] === "\\" && rtf[i + 1] === "'") i += 4;
+            else if (rtf[i] === "\\") i += 2;
+            else if (rtf[i] === "{" || rtf[i] === "}") break;
+            else i++;
+          }
+        } else {
+          control(word, param);
+        }
+      } else {
+        i++; // a lone backslash before something unexpected
+      }
+    } else if (c === "\r" || c === "\n") {
+      i++; // raw newlines in the source are not content
+    } else {
+      emit(c);
+      i++;
+    }
+  }
+  endPara();
+
+  const renderRun = (r: Run) => {
+    let t = escapeHtml(r.text).replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;").replace(/\n/g, "<br>");
+    if (r.u) t = `<u>${t}</u>`;
+    if (r.i) t = `<em>${t}</em>`;
+    if (r.b) t = `<strong>${t}</strong>`;
+    return t;
+  };
+  return paragraphs
+    .filter((p) => p.some((r) => r.text.trim() || r.text.includes("\n")))
+    .map((p) => `<p>${p.map(renderRun).join("")}</p>`)
+    .join("\n");
+}
+
+/** Fetch the `.rtf` bytes, decode as Windows-1252 (RTF source is 7-bit with
+ *  `\'xx` for the rest), and convert to HTML. Shared by the page and chunk forms. */
+function useRtfHtml(path: string): { html: string | null; error: string | null } {
+  const [html, setHtml] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setHtml(null);
+    setError(null);
+    fetch(blobUrl(path))
+      .then((r) => r.arrayBuffer())
+      .then((buf) => {
+        if (cancelled) return;
+        const src = new TextDecoder("windows-1252").decode(new Uint8Array(buf));
+        setHtml(rtfToHtml(src));
+      })
+      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
+    return () => {
+      cancelled = true;
+    };
+  }, [path]);
+  return { html, error };
+}
+
+export function RtfView({ node }: { node: NodeJson }) {
+  const { html, error } = useRtfHtml(node.path);
+  if (error) return <div className="error">rtf: {error}</div>;
+  if (html == null) return <div className="loading">reading RTF…</div>;
+  return (
+    <div className="text">
+      {node.title && <h1 className="chapter-title">{node.title}</h1>}
+      {node.description && <p className="chapter-subtitle">{node.description}</p>}
+      <div className="markup" dangerouslySetInnerHTML={{ __html: html }} />
+    </div>
+  );
+}
+
+export function RtfChunk({ chunk }: { chunk: Chunk }) {
+  const { html, error } = useRtfHtml(chunk.path);
+  if (error) return <div className="error">rtf: {error}</div>;
+  if (html == null) return <div className="loading">reading RTF…</div>;
+  return <div className="markup" dangerouslySetInnerHTML={{ __html: html }} />;
+}