yamlover 0.3.4 → 0.3.6

package/src/client/renderers/chapter.tsx

@@ -1,142 +0,0 @@
-import { NodeJson } from "../api";
-import { asLink, Link } from "../render";
-import { segsToStr, strToSegs } from "../paths";
-import { Chunk, rendererFor } from "./registry";
-import { useHashScroll } from "./headings";
-
-/**
- * The renderer for an `object`/`x-yamlover-chapter`: a chapter shown as a readable
- * page. This is yamlover's first instance of **partial flattening** (see the global
- * README): a deeper subtree is presented shallowly, pulling some descendants up as
- * constituent parts of *this* page rather than as nodes you navigate away to.
- *
- * A chapter is a heading (`title`/`description`) plus two arrays:
- *
- *   - `chunks`   — the body, **flattened** into this page as numbered blocks. Each
- *                  chunk is delegated to the renderer for its own (type, format), so
- *                  a chapter is not prose-only: a `text/markdown` chunk routes to the
- *                  text renderer, a `text/x-plantuml` chunk to the diagram renderer,
- *                  and any file-backed binary (image, html, pdf, fb2, epub, psd,
- *                  tiff, …) to its own renderer via `renderChunk`. A flattened chunk
- *                  exposes its location as a **fragment anchor** whose syntax is the
- *                  chunk's path continuation: chunk `[1]`, still reachable in full at
- *                  `<chapter>:chunks[1]`, is anchored here at `#:chunks[1]` (so
- *                  `<chapter>#:chunks[1]` scrolls to it). The `§N` marker is that
- *                  in-page anchor link. See 16-all-formats-chunks.
- *   - `children` — the subchapters, *not* flattened: rendered as heading links you
- *                  navigate to (and surfaced in the TOC; see `chapterTocView`).
- *
- * The value arrives two levels deep (see the chapter renderer's `depth`): the
- * arrays are present, and each element is a link marker carrying its (type,
- * format), value/title, and path.
- */
-export function ChapterView({
-  node,
-  onNavigate,
-}: {
-  node: NodeJson;
-  onNavigate: (path: string) => void;
-}) {
-  const v = (node.value ?? {}) as { chunks?: unknown; children?: unknown };
-  const chunks = Array.isArray(v.chunks) ? v.chunks : [];
-  const children = Array.isArray(v.children) ? v.children : [];
-
-  // A deep link to a flattened chunk (`<chapter>#/chunks[1]`) lands on the chapter
-  // page, so scroll to the anchored chunk once it has rendered (the browser's own
-  // scroll fires before the async value arrives). Re-runs when the chapter changes.
-  useHashScroll(node);
-
-  return (
-    <div className="chapter">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-
-      {chunks.map((item, i) => (
-        <ChunkBlock key={i} index={i} item={item} basePath={node.path} documentPath={node.documentPath} onNavigate={onNavigate} />
-      ))}
-
-      {children.map((item, i) => {
-        const link = asLink(item);
-        return (
-          <h2 className="chapter-link" key={i}>
-            <a
-              className="descend"
-              href={link?.path ?? "#"}
-              onClick={(e) => {
-                e.preventDefault();
-                if (link) onNavigate(link.path);
-              }}
-            >
-              {chapterTitle(link)}
-            </a>
-          </h2>
-        );
-      })}
-    </div>
-  );
-}
-
-/** One numbered chunk, flattened into the chapter page: its zero-based index `§N`
- *  as an in-page anchor link to the chunk's own location (the fragment mirrors the
- *  chunk's path continuation), and the chunk rendered by the renderer for its
- *  (type, format) — falling back to a plain paragraph when none claims it (or the
- *  chunk is a bare inline value with no path). */
-function ChunkBlock({
-  index,
-  item,
-  basePath,
-  documentPath,
-  onNavigate,
-}: {
-  index: number;
-  item: unknown;
-  basePath: string;
-  documentPath?: string;
-  onNavigate: (path: string) => void;
-}) {
-  const link = asLink(item);
-  const chunk: Chunk = {
-    value: link ? link.value : item,
-    path: link?.path ?? "",
-    type: link?.type ?? "string",
-    format: link?.format ?? null,
-    // the renderer-dispatch facets (TYPES.md §9): a link carries them; a bare inline chunk is a string
-    valueType: link?.valueType ?? "string",
-    hasKeyed: link?.hasKeyed ?? false,
-    hasOrdinal: link?.hasOrdinal ?? false,
-    documentPath, // carried so a marklower chunk's `/…` link resolves to its document
-  };
-  const renderer = rendererFor(chunk);
-  const body = renderer?.renderChunk
-    ? renderer.renderChunk(chunk, onNavigate)
-    : <p className="chapter-prose">{String(chunk.value ?? "")}</p>;
-  // The chunk's location *within this page*: its path continuation past the chapter
-  // (e.g. `/chunks[1]`), used as both the element id and the `§N` anchor link. The
-  // full path stays navigable; this is the flattened, in-page locator.
-  const anchor = chunk.path ? pathContinuation(basePath, chunk.path) : null;
-  return (
-    <div className="chunk" id={anchor ?? undefined}>
-      {anchor ? (
-        <a className="chunk-index" href={`#${anchor}`}>
-          §{index}
-        </a>
-      ) : (
-        <span className="chunk-index">§{index}</span>
-      )}
-      <div className="chunk-body">{body}</div>
-    </div>
-  );
-}
-
-/** The path continuation from `base` to `full` — the segments of `full` past
- *  `base`, in JSON-path syntax. E.g. ("/book", "/book/chunks[1]") → "/chunks[1]".
- *  A flattened child's fragment anchor is exactly this continuation, so the anchor
- *  spelling matches the still-navigable full path. */
-function pathContinuation(base: string, full: string): string {
-  return segsToStr(strToSegs(full).slice(strToSegs(base).length));
-}
-
-/** A subchapter link's label: its schema title, else a generic fallback. */
-function chapterTitle(link: Link | null): string {
-  return link?.title ?? "(untitled chapter)";
-}

package/src/client/renderers/csv.tsx

@@ -1,234 +0,0 @@
-import { NodeJson } from "../api";
-import { scalarValue } from "../render";
-import { Chunk } from "./registry";
-
-/**
- * The renderer for a `string`/`text/csv` (or `text/tab-separated-values`) node:
- * delimited text shown as a table. Like the markdown/asciidoc renderers it works
- * from the node's string value, so it serves both a whole `.csv`/`.tsv` file
- * (`render`) and a single inline chunk (`renderChunk`).
- *
- * The **main parsing parameters live in the URL**, alongside `?format=csv`, so a
- * particular reading of a file is a shareable link:
- *
- *   - `sep`    — the field separator. `,` `;` `|`, the word `tab` (or `space`), or
- *                empty/absent for **auto-detect** (the most frequent candidate on
- *                the first line; `\t` for a `.tsv`).
- *   - `header` — whether the first row is a header (default true; `false`/`0` off).
- *
- * The full-page view exposes these in the node bar beside the renderer's tab (the
- * {@link CsvControls} `config` control, like the markdown/asciidoc width input),
- * writing the same query params (via `history.replaceState`, preserving the path +
- * `format`), so the URL stays the single source of truth — editing it by hand and
- * reloading is equivalent to using the controls.
- */
-
-/** Parse delimited text into rows of fields, RFC-4180-ish: fields may be wrapped in
- *  `quote`, a doubled quote is a literal one, and separators/newlines inside quotes
- *  are data. Handles `\n` and `\r\n`; a trailing newline does not yield an empty
- *  row. */
-export function parseDelimited(text: string, sep: string, quote = '"'): string[][] {
-  const rows: string[][] = [];
-  let row: string[] = [];
-  let field = "";
-  let inQuotes = false;
-  let i = 0;
-  const pushField = () => {
-    row.push(field);
-    field = "";
-  };
-  const pushRow = () => {
-    pushField();
-    rows.push(row);
-    row = [];
-  };
-  while (i < text.length) {
-    const c = text[i];
-    if (inQuotes) {
-      if (c === quote) {
-        if (text[i + 1] === quote) {
-          field += quote;
-          i += 2;
-        } else {
-          inQuotes = false;
-          i++;
-        }
-      } else {
-        field += c;
-        i++;
-      }
-      continue;
-    }
-    if (c === quote) {
-      inQuotes = true;
-      i++;
-    } else if (c === sep) {
-      pushField();
-      i++;
-    } else if (c === "\n" || c === "\r") {
-      if (c === "\r" && text[i + 1] === "\n") i++;
-      pushRow();
-      i++;
-    } else {
-      field += c;
-      i++;
-    }
-  }
-  // flush the final field/row unless the text ended exactly on a row break
-  if (field !== "" || row.length) pushRow();
-  return rows;
-}
-
-/** Decode a `sep` URL value to the actual separator character, or null for
- *  auto-detect (empty/absent). `tab`/`space` are spelled out for URL-friendliness. */
-function decodeSep(v: string | null): string | null {
-  if (!v) return null;
-  if (v === "tab" || v === "\\t") return "\t";
-  if (v === "space") return " ";
-  return v[0];
-}
-
-/** Auto-detect a separator from the first line: a `.tsv` is tab; otherwise the most
- *  frequent of `, ; \t |` (comma when none appears). */
-function autoSep(text: string, format: string | null): string {
-  if (format === "text/tab-separated-values") return "\t";
-  const firstLine = text.split(/\r?\n/, 1)[0] ?? "";
-  let best = ",";
-  let bestN = 0;
-  for (const c of [",", ";", "\t", "|"]) {
-    const n = firstLine.split(c).length - 1;
-    if (n > bestN) {
-      bestN = n;
-      best = c;
-    }
-  }
-  return best;
-}
-
-const SEP_OPTIONS: { label: string; value: string }[] = [
-  { label: "auto", value: "" },
-  { label: "comma  ,", value: "," },
-  { label: "semicolon  ;", value: ";" },
-  { label: "tab", value: "tab" },
-  { label: "pipe  |", value: "|" },
-];
-
-const params = () => new URLSearchParams(window.location.search);
-
-/** Read the (header) flag from the URL — default true, off for `false`/`0`. */
-function headerOn(p: URLSearchParams): boolean {
-  const h = p.get("header");
-  return !(h === "false" || h === "0");
-}
-
-/** Pad a row to `cols` cells so every `<tr>` is rectangular. */
-function pad(row: string[], cols: number): string[] {
-  return row.length >= cols ? row : [...row, ...Array(cols - row.length).fill("")];
-}
-
-/** The table itself — shared by the full page and the inline chunk. */
-function Table({ rows, header }: { rows: string[][]; header: boolean }) {
-  if (!rows.length) return <p className="csv-empty">(empty)</p>;
-  const cols = rows.reduce((m, r) => Math.max(m, r.length), 0);
-  const head = header ? rows[0] : null;
-  const body = header ? rows.slice(1) : rows;
-  return (
-    <div className="csv-scroll">
-      <table className="csv-table">
-        {head && (
-          <thead>
-            <tr>
-              {pad(head, cols).map((c, i) => (
-                <th key={i}>{c}</th>
-              ))}
-            </tr>
-          </thead>
-        )}
-        <tbody>
-          {body.map((r, ri) => (
-            <tr key={ri}>
-              {pad(r, cols).map((c, ci) => (
-                <td key={ci}>{c}</td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-export function CsvView({ node }: { node: NodeJson }) {
-  // Options are read straight from the URL each render; the node bar's CsvControls
-  // (see registry `config`) write them and re-render the node view, so the URL stays
-  // the single source of truth — this view holds no parsing state of its own.
-  const p = params();
-  const header = headerOn(p);
-  const text = String(scalarValue(node.value) ?? "");
-  const sep = decodeSep(p.get("sep")) ?? autoSep(text, node.format ?? null);
-  const rows = parseDelimited(text, sep);
-
-  return (
-    <div className="csv">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <Table rows={rows} header={header} />
-    </div>
-  );
-}
-
-/**
- * The CSV parsing controls (separator + header row) shown in the node bar beside
- * the renderer's tab — the `config` hook, mirroring the markdown/asciidoc width
- * input. Each writes a query param (preserving the path + other params) and calls
- * `rerender` so {@link CsvView} re-reads the URL and re-parses.
- */
-export function CsvControls({ rerender }: { rerender: () => void }) {
-  const p = params();
-  const sepParam = p.get("sep") ?? "";
-  const header = headerOn(p);
-
-  const setParam = (key: string, value: string) => {
-    const q = params();
-    if (value) q.set(key, value);
-    else q.delete(key);
-    const qs = q.toString();
-    window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : ""));
-    rerender();
-  };
-
-  return (
-    <div className="csv-toolbar">
-      <label>
-        separator{" "}
-        <select value={sepParam} onChange={(e) => setParam("sep", e.target.value)}>
-          {SEP_OPTIONS.map((o) => (
-            <option key={o.value} value={o.value}>
-              {o.label}
-            </option>
-          ))}
-        </select>
-      </label>
-      <label>
-        <input
-          type="checkbox"
-          checked={header}
-          onChange={(e) => setParam("header", e.target.checked ? "" : "false")}
-        />{" "}
-        header row
-      </label>
-    </div>
-  );
-}
-
-/** A CSV chunk embedded inline in a chapter: just the table, auto-detecting the
- *  separator and treating the first row as a header (no per-chunk URL controls). */
-export function CsvChunk({ chunk }: { chunk: Chunk }) {
-  const text = String(chunk.value ?? "");
-  const rows = parseDelimited(text, autoSep(text, chunk.format ?? null));
-  return (
-    <div className="csv">
-      <Table rows={rows} header />
-    </div>
-  );
-}

package/src/client/renderers/decoded.tsx

@@ -1,72 +0,0 @@
-import { useEffect, useState } from "react";
-import { NodeJson, blobUrl } from "../api";
-import { PanZoomImage } from "./imagemap";
-
-/**
- * Shared scaffold for the file formats the browser cannot display natively but
- * that we can decode client-side to ordinary raster images (PSD, TIFF, HEIC).
- * It fetches the node's bytes from `/api/blob`, hands them to a format-specific
- * `decode` that returns one PNG `Blob` per page, and shows each in the same
- * pan/zoom viewer as a native image (each decoded page is its own object-URL).
- * Object-URLs are revoked on unmount / path change so decoded pages don't leak.
- */
-export function DecodedImageView({
-  node,
-  label,
-  decode,
-}: {
-  node: NodeJson;
-  label: string;
-  decode: (buf: ArrayBuffer) => Promise<Blob[]>;
-}) {
-  const [urls, setUrls] = useState<string[]>([]);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    const created: string[] = [];
-    setUrls([]);
-    setError(null);
-    (async () => {
-      const buf = await fetch(blobUrl(node.path)).then((r) => r.arrayBuffer());
-      const blobs = await decode(buf);
-      if (cancelled) return;
-      for (const b of blobs) created.push(URL.createObjectURL(b));
-      if (!cancelled) setUrls(created);
-    })().catch((e) => !cancelled && setError(String((e as Error).message || e)));
-    return () => {
-      cancelled = true;
-      created.forEach(URL.revokeObjectURL);
-    };
-  }, [node.path]);
-
-  if (error) return <div className="error">{label}: {error}</div>;
-  if (!urls.length) return <div className="loading">decoding {label}…</div>;
-  return (
-    <>
-      {urls.map((url, i) => (
-        <PanZoomImage key={i} src={url} className="filemap fileimagemap" />
-      ))}
-    </>
-  );
-}
-
-/** Paint RGBA pixels onto a canvas and export it as a PNG blob. */
-export async function rgbaToPng(rgba: Uint8ClampedArray | Uint8Array, width: number, height: number): Promise<Blob> {
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error("no 2d context");
-  const img = ctx.createImageData(width, height);
-  img.data.set(rgba);
-  ctx.putImageData(img, 0, 0);
-  return canvasToPng(canvas);
-}
-
-/** Export a canvas as a PNG blob (Promise wrapper over the callback API). */
-export function canvasToPng(canvas: HTMLCanvasElement): Promise<Blob> {
-  return new Promise((resolve, reject) =>
-    canvas.toBlob((b) => (b ? resolve(b) : reject(new Error("canvas export failed"))), "image/png"),
-  );
-}