yamlover 0.3.4 → 0.3.6

package/src/client/renderers/rtf.tsx

@@ -1,210 +0,0 @@
-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 }} />;
-}

package/src/client/renderers/spreadsheet.tsx

@@ -1,105 +0,0 @@
-import { useEffect, useState } from "react";
-import * as XLSX from "xlsx";
-import { NodeJson, blobUrl } from "../api";
-import { Chunk } from "./registry";
-
-/**
- * Renderer for Excel workbooks — `.xlsx` (Office Open XML) and legacy `.xls`
- * (BIFF). SheetJS reads both from the served bytes; each sheet is shown as a table
- * (reusing the `.csv-table` styling), with a tab row to switch sheets in a
- * multi-sheet workbook. SheetJS is heavy, so the registry loads this module lazily.
- */
-function useWorkbook(path: string): { wb: XLSX.WorkBook | null; error: string | null } {
-  const [wb, setWb] = useState<XLSX.WorkBook | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  useEffect(() => {
-    let cancelled = false;
-    setWb(null);
-    setError(null);
-    fetch(blobUrl(path))
-      .then((r) => r.arrayBuffer())
-      .then((buf) => {
-        if (cancelled) return;
-        setWb(XLSX.read(new Uint8Array(buf), { type: "array" }));
-      })
-      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
-    return () => {
-      cancelled = true;
-    };
-  }, [path]);
-  return { wb, error };
-}
-
-/** One sheet → a 2-D array of cell strings, then a bordered table (first row as a
- *  header, matching the CSV renderer's look). */
-function SheetTable({ sheet }: { sheet: XLSX.WorkSheet }) {
-  const rows = XLSX.utils.sheet_to_json<string[]>(sheet, { header: 1, blankrows: false, defval: "" });
-  if (!rows.length) return <p className="csv-empty">(empty sheet)</p>;
-  const cols = rows.reduce((m, r) => Math.max(m, r.length), 0);
-  const pad = (r: string[]) => (r.length >= cols ? r : [...r, ...Array(cols - r.length).fill("")]);
-  const [head, ...body] = rows;
-  return (
-    <div className="csv-scroll">
-      <table className="csv-table">
-        <thead>
-          <tr>
-            {pad(head).map((c, k) => (
-              <th key={k}>{String(c)}</th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {body.map((r, ri) => (
-            <tr key={ri}>
-              {pad(r).map((c, ci) => (
-                <td key={ci}>{String(c)}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-/** The workbook body: a sheet-tab row (when there is more than one) and the active
- *  sheet's table. Shared by the full page and the inline chunk. */
-function Workbook({ wb }: { wb: XLSX.WorkBook }) {
-  const [active, setActive] = useState(0);
-  const names = wb.SheetNames;
-  const name = names[Math.min(active, names.length - 1)];
-  return (
-    <div className="spreadsheet">
-      {names.length > 1 && (
-        <div className="sheet-tabs">
-          {names.map((nm, k) => (
-            <button key={nm} className={"sheet-tab" + (k === active ? " active" : "")} onClick={() => setActive(k)}>
-              {nm}
-            </button>
-          ))}
-        </div>
-      )}
-      <SheetTable sheet={wb.Sheets[name]} />
-    </div>
-  );
-}
-
-export function SpreadsheetView({ node }: { node: NodeJson }) {
-  const { wb, error } = useWorkbook(node.path);
-  if (error) return <div className="error">spreadsheet: {error}</div>;
-  if (!wb) return <div className="loading">reading workbook…</div>;
-  return (
-    <div className="text">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <Workbook wb={wb} />
-    </div>
-  );
-}
-
-export function SpreadsheetChunk({ chunk }: { chunk: Chunk }) {
-  const { wb, error } = useWorkbook(chunk.path);
-  if (error) return <div className="error">spreadsheet: {error}</div>;
-  if (!wb) return <div className="loading">reading workbook…</div>;
-  return <Workbook wb={wb} />;
-}

package/src/client/renderers/tag.tsx

@@ -1,113 +0,0 @@
-import { asLink } from "../render";
-import { strToSegs } from "../paths";
-
-export const TAG_FORMAT = "x-yamlover-tag";
-
-export interface TagLink {
-  path: string;
-  label: string;
-  color?: string | null; // a pure color tag's explicit color (else the hue derives from label)
-}
-
-/**
- * Split a node's `relations` into **tag references** (any up-edge that resolves to
- * an `x-yamlover-tag` node) and everything else. This includes the structural
- * `..` when the containment parent is itself a tag — so a tag shows its *parent
- * tag* in the bar, exactly as a paper shows the tags it is filed under. Tag
- * references render as badges (see {@link TagBadges}); the rest stay in the
- * ordinary relations panel.
- */
-export function splitTagRefs(relations?: Record<string, unknown>): {
-  tags: TagLink[];
-  rest: Record<string, unknown>;
-} {
-  const tags: TagLink[] = [];
-  const rest: Record<string, unknown> = {};
-  for (const [name, v] of Object.entries(relations || {})) {
-    const link = asLink(v);
-    if (link && link.format === TAG_FORMAT) {
-      tags.push({ path: link.path, label: tagLabel(link.path, link.title), color: link.color ?? null });
-    } else {
-      rest[name] = v;
-    }
-  }
-  return { tags, rest };
-}
-
-/** A stable color for a tag, derived from its name — so a tag is the same hue
- *  everywhere it appears. Mid lightness keeps white label text legible. */
-export function tagColor(name: string): string {
-  let h = 0;
-  for (let i = 0; i < name.length; i++) h = (Math.imul(h, 31) + name.charCodeAt(i)) >>> 0;
-  return `hsl(${h % 360} 52% 42%)`;
-}
-
-/** A tag's display color: its explicit `color` (a "pure color tag"), else the
- *  stable hue derived from its name. */
-export function resolveTagColor(t: { name: string; color?: string | null }): string {
-  return t.color ?? tagColor(t.name);
-}
-
-// A tag node's projected value arrives in one of two shapes: a plain object (a tag with only
-// fields), or a `$yamloverMixed` marker (a tag whose description is its BODY — the variant/omni
-// shape: `{kind:"omni", value: <body>, entries: [{key, value}]}`). The helpers below read both.
-const MIXED_KEY = "$yamloverMixed";
-type MixedMarker = { kind?: string; value?: unknown; entries?: { key: string | null; value: unknown }[] };
-
-/** A tag value's keyed fields as [key, value] pairs — from either projection shape. */
-export function tagFields(value: unknown): [string, unknown][] {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return [];
-  const marker = (value as Record<string, unknown>)[MIXED_KEY] as MixedMarker | undefined;
-  if (marker?.entries) return marker.entries.filter((e) => e.key != null).map((e) => [e.key!, e.value]);
-  return Object.entries(value as Record<string, unknown>);
-}
-
-/** A tag's BODY (its description — the node's own scalar value), or null. */
-export function tagBody(value: unknown): string | null {
-  if (typeof value === "string") return value;
-  const marker = (value as Record<string, unknown> | null | undefined)?.[MIXED_KEY] as MixedMarker | undefined;
-  return typeof marker?.value === "string" ? marker.value : null;
-}
-
-/** A tag node value's explicit `color`, if any. Depth-limited projection may hand the color
- *  scalar as a `$yamloverLink` marker instead of a plain string — both shapes are read. */
-export function explicitColor(value: unknown): string | null {
-  const raw = tagFields(value).find(([k]) => k === "color")?.[1];
-  if (typeof raw === "string") return raw;
-  const linked = (raw as { $yamloverLink?: { value?: unknown } } | null | undefined)?.$yamloverLink?.value;
-  return typeof linked === "string" ? linked : null;
-}
-
-/** The tags a node is classified under, each a colored luggage-tag shape (one end
- *  rectangular, the other a pierced triangular point), shown inline in the node's
- *  header bar on every representation. Returns the tags directly (a fragment) so
- *  they flow among the header's type/format chips. */
-export function TagBadges({ tags, onNavigate }: { tags: TagLink[]; onNavigate: (path: string) => void }) {
-  if (tags.length === 0) return null;
-  return (
-    <>
-      {tags.map((t) => (
-        <a
-          key={t.path}
-          className="tagtag"
-          style={{ background: resolveTagColor({ name: t.label, color: t.color }) }}
-          href={t.path}
-          title={t.label}
-          onClick={(e) => {
-            e.preventDefault();
-            onNavigate(t.path);
-          }}
-        >
-          {t.label}
-        </a>
-      ))}
-    </>
-  );
-}
-
-/** A node's display name: its schema title, else its last path segment. */
-export function tagLabel(path: string, title?: string | null): string {
-  if (title) return title;
-  const segs = strToSegs(path);
-  return segs.length ? String(segs[segs.length - 1]) : path;
-}

package/src/client/renderers/text.tsx

@@ -1,42 +0,0 @@
-import { marked } from "marked";
-import { NodeJson } from "../api";
-import { scalarValue } from "../render";
-import { Chunk } from "./registry";
-import { anchorizeHeadings, useHashScroll } from "./headings";
-import { Markup } from "./markup";
-
-/**
- * The renderer for a `string`/`text/markdown` node: prose shown as rendered
- * Markdown rather than a quoted scalar. It serves in two contexts via the one
- * (type, format) routing key:
- *
- *   - as a full RHS page (`render`) — a standalone prose node (e.g. a `.md`
- *     file, read as a string by the server), and
- *   - inline (`renderChunk`) — a single chunk embedded in another renderer's
- *     page, e.g. one paragraph of a chapter.
- *
- * Markdown is parsed with `marked`; the value is whatever string the node holds,
- * so the same renderer covers an inline `const` chunk and a whole `.md` file. Each
- * heading is then given an id and a `§` anchor link (see {@link anchorizeHeadings})
- * so a section is addressable as `<page>#<slug>`.
- */
-function md(value: unknown): string {
-  return anchorizeHeadings(marked.parse(String(value ?? ""), { async: false }) as string);
-}
-
-export function TextView({ node }: { node: NodeJson }) {
-  useHashScroll(node);
-  return (
-    <div className="text">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <Markup html={md(scalarValue(node.value))} />
-    </div>
-  );
-}
-
-/** A prose chunk embedded inline: just the rendered Markdown (the chapter
- *  supplies the surrounding number + anchor). */
-export function TextChunk({ chunk }: { chunk: Chunk }) {
-  return <div className="markup" dangerouslySetInnerHTML={{ __html: md(chunk.value) }} />;
-}

package/src/client/renderers/tiff.tsx

@@ -1,33 +0,0 @@
-import UTIF from "utif";
-import { NodeJson } from "../api";
-import { DecodedImageView, rgbaToPng } from "./decoded";
-
-/**
- * Renders a TIFF image (`image/tiff`, `.tif`/`.tiff`). Browsers don't display
- * TIFF, so we decode it with UTIF.js: each top-level IFD is one page (multi-page
- * TIFFs — common for scans — render every page), decoded to RGBA and painted to a
- * canvas/PNG. IFDs without dimensions (e.g. stray metadata directories) are skipped.
- */
-export function TiffView({ node }: { node: NodeJson }) {
-  return (
-    <DecodedImageView
-      node={node}
-      label="tiff"
-      decode={async (buf) => {
-        const view = new Uint8Array(buf);
-        const ifds = UTIF.decode(view);
-        const pages: Blob[] = [];
-        for (const ifd of ifds) {
-          UTIF.decodeImage(view, ifd);
-          const w = ifd.width as number;
-          const h = ifd.height as number;
-          if (!w || !h) continue;
-          const rgba = UTIF.toRGBA8(ifd);
-          pages.push(await rgbaToPng(rgba, w, h));
-        }
-        if (!pages.length) throw new Error("no decodable image in this TIFF");
-        return pages;
-      }}
-    />
-  );
-}