yamlover 0.3.0

package/src/client/renderers/spreadsheet.tsx

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,113 @@
+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

@@ -0,0 +1,41 @@
+import { marked } from "marked";
+import { NodeJson } from "../api";
+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(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

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