yamlover 0.3.0

package/src/client/renderers/pdf.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import "react-pdf/dist/Page/TextLayer.css";
+import "react-pdf/dist/Page/AnnotationLayer.css";
+import { Annotation, NodeJson, blobUrl } from "../api";
+import { DEFAULT_COLOR, colorOf, editable, useAnnotationMenu, useMaterialAnnotations } from "./annotate";
+
+/** A rectangular annotation region on a PDF page, in points (origin top-left). `ann` is the source
+ *  annotation when real/saved (→ clickable to edit); absent for the live preview. */
+interface PdfRegion { page: number; x: number; y: number; w: number; h: number; title?: string; color?: string; ann?: Annotation }
+const num = (v: unknown): number => Number(v) || 0;
+
+// pdf.js renders in a Web Worker; point it at the bundled worker (the version
+// react-pdf depends on) resolved through Vite. Done once at module load.
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url,
+).toString();
+
+/**
+ * Renders a `application/pdf` file with pdf.js (via react-pdf): every page laid out top-to-bottom,
+ * fit to the pane's width. A plain wheel scrolls the document and text stays selectable; ctrl/alt-
+ * wheel zooms (scales the page width), matching the image/map viewers (see the UI guide).
+ * SELECTING text on a page raises the color palette and saves a `pdf` region annotation (the
+ * selection's bounding box, in page points) — the same flow as image/map regions. The document is
+ * loaded straight from `/api/blob` so pdf.js streams the bytes itself.
+ */
+export function PdfView({ node }: { node: NodeJson }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(0);
+  const [pages, setPages] = useState(0);
+  const [zoom, setZoom] = useState(1); // ctrl/alt-wheel scale factor
+  const [orig, setOrig] = useState<Record<number, { w: number; h: number }>>({}); // each page's natural size in points
+
+  // WINDOWED RENDERING: every page keeps a wrapper (so the scroll height is right), but only
+  // pages near the viewport mount a real <Page> — mounting ALL of them queues every canvas
+  // through the pdf.js worker at open (and again on each zoom), which saturates the main
+  // thread and janks scrolling on long documents. Far pages are fixed-height placeholders.
+  const wraps = useRef(new Map<number, HTMLElement>());
+  const [near, setNear] = useState<Set<number>>(() => new Set());
+  useEffect(() => {
+    if (!pages) return;
+    const obs = new IntersectionObserver(
+      (entries) => {
+        setNear((prev) => {
+          const next = new Set(prev);
+          for (const e of entries) {
+            const pn = Number((e.target as HTMLElement).dataset.page);
+            if (e.isIntersecting) next.add(pn);
+            else next.delete(pn);
+          }
+          return next.size === prev.size && [...next].every((p) => prev.has(p)) ? prev : next;
+        });
+      },
+      // root = the .filepdf scroller (the pane scrolls INSIDE it — a viewport root would
+      // never see pages clipped below its fold); pre-render ~2 screens above/below
+      { root: ref.current, rootMargin: "2000px 0px" },
+    );
+    for (const el of wraps.current.values()) obs.observe(el);
+    return () => obs.disconnect();
+    // wrappers exist only once BOTH the page count and the pane width are known
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pages, width > 0]);
+
+  const material = useMaterialAnnotations(node.path);
+  const { openCreate, openEdit, palette, preview } = useAnnotationMenu(material);
+  // include the live PREVIEW so the rectangle stays drawn while the menu is open
+  const shown = preview
+    ? [...material.annotations, { path: "(preview)", selector: preview.selector, tag: preview.tag } as Annotation]
+    : material.annotations;
+  const regions: PdfRegion[] = shown
+    .filter((a) => a.selector?.type === "pdf")
+    .map((a) => ({ page: num(a.selector!.page) || 1, x: num(a.selector!.x), y: num(a.selector!.y), w: num(a.selector!.w), h: num(a.selector!.h), title: a.description, color: colorOf(a), ann: editable(a) ? a : undefined }));
+
+  // Track the pane width so pages re-flow on resize.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // ctrl/alt-wheel zooms; a plain wheel is left alone so the pane keeps scrolling.
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (!(e.ctrlKey || e.altKey || e.metaKey)) return;
+      e.preventDefault();
+      setZoom((z) => Math.min(5, Math.max(0.4, z * (e.deltaY < 0 ? 1.1 : 1 / 1.1))));
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, []);
+
+  const pageWidth = Math.min(width, 1000) * zoom;
+
+  // A finished text selection on a page → a `pdf` region (its bounding box, converted to points).
+  const onMouseUp = () => {
+    const sel = window.getSelection();
+    if (!sel || sel.isCollapsed || !sel.anchorNode) return;
+    const host = sel.anchorNode.nodeType === 1 ? (sel.anchorNode as Element) : sel.anchorNode.parentElement;
+    const pageEl = host?.closest(".pdf-page") as HTMLElement | null;
+    if (!pageEl || !ref.current?.contains(pageEl)) return;
+    const pn = Number(pageEl.dataset.page);
+    const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // rendered px per point
+    if (!sc) return;
+    const pr = pageEl.getBoundingClientRect();
+    const sr = sel.getRangeAt(0).getBoundingClientRect();
+    if (sr.width < 2 || sr.height < 2) return;
+    openCreate(
+      { type: "pdf", page: pn, x: Math.round((sr.left - pr.left) / sc), y: Math.round((sr.top - pr.top) / sc), w: Math.round(sr.width / sc), h: Math.round(sr.height / sc) },
+      { x: sr.left, y: sr.bottom + 6 },
+    );
+  };
+
+  return (
+    <>
+      <div className="filepdf yo-zoomable" ref={ref} onMouseUp={onMouseUp}>
+        <Document
+          file={blobUrl(node.path)}
+          onLoadSuccess={({ numPages }) => setPages(numPages)}
+          loading={<div className="loading">loading PDF…</div>}
+          error={<div className="error">could not load PDF</div>}
+        >
+          {width > 0 &&
+            Array.from({ length: pages }, (_, i) => {
+              const pn = i + 1;
+              const sc = orig[pn] ? pageWidth / orig[pn].w : 0; // rendered px per point — tracks zoom
+              // a far page's placeholder: its measured aspect when known, A4 portrait until then
+              const estHeight = pageWidth * (orig[pn] ? orig[pn].h / orig[pn].w : Math.SQRT2);
+              return (
+                <div
+                  key={i}
+                  className="pdf-page"
+                  data-page={pn}
+                  ref={(el) => {
+                    if (el) wraps.current.set(pn, el);
+                    else wraps.current.delete(pn);
+                  }}
+                >
+                  {near.has(pn) ? (
+                    <>
+                      <Page
+                        pageNumber={pn}
+                        width={pageWidth}
+                        onLoadSuccess={(p) => setOrig((o) => (o[pn] ? o : { ...o, [pn]: { w: p.originalWidth || pageWidth, h: p.originalHeight || pageWidth * Math.SQRT2 } }))}
+                        loading={<div className="loading" style={{ height: estHeight }}>page {pn}…</div>}
+                      />
+                      {sc > 0 &&
+                        regions.filter((r) => r.page === pn).map((r, j) => {
+                          const c = r.color || DEFAULT_COLOR;
+                          return (
+                            <div
+                              key={j}
+                              className={"pdf-region" + (r.ann ? " editable" : "")}
+                              title={r.ann ? r.title || "click to recolor or delete" : r.title}
+                              onClick={r.ann ? (e) => { e.stopPropagation(); openEdit(r.ann!, { x: e.clientX, y: e.clientY }); } : undefined}
+                              style={{ left: r.x * sc, top: r.y * sc, width: r.w * sc, height: r.h * sc, borderColor: c, background: c + "2e" }}
+                            />
+                          );
+                        })}
+                    </>
+                  ) : (
+                    <div className="pdf-placeholder" style={{ width: pageWidth, height: estHeight }} />
+                  )}
+                </div>
+              );
+            })}
+        </Document>
+      </div>
+      {palette}
+    </>
+  );
+}

package/src/client/renderers/plaintext.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useMemo, useState } from "react";
+import { NodeJson, blobUrl } from "../api";
+import { Chunk } from "./registry";
+
+/**
+ * The renderer for a `binary`/`text/plain` (`.txt`/`.text`/`.log`) node: the file's
+ * bytes shown verbatim in a `<pre>` — NO markup interpretation. (A bare `.txt`
+ * otherwise falls to the marklower renderer, which both processes `*…*`/`_…_`-style
+ * formatting sequences and re-flows the text, both misleading for plain text.)
+ *
+ * Because the server serves `text/plain` as raw bytes (it is deliberately kept out
+ * of the server's TEXT_FORMATS), the **encoding is chosen on the client** — legacy
+ * Cyrillic files are commonly CP866 / Windows-1251 / KOI8-R, not UTF-8. The choice
+ * rides in the URL as `?enc=`, alongside `?format=`, so a particular reading is a
+ * shareable link; the {@link EncodingControl} `config` control in the node bar
+ * writes it (like the CSV controls / markdown width input). Bytes are fetched once
+ * per path and re-decoded in place when the encoding changes — no refetch.
+ */
+
+const params = () => new URLSearchParams(window.location.search);
+
+/** Selectable encodings — label shown in the bar → the `TextDecoder` label. All four
+ *  are part of the WHATWG Encoding standard, so `TextDecoder` decodes them natively. */
+export const ENCODINGS: { label: string; value: string }[] = [
+  { label: "UTF-8", value: "utf-8" },
+  { label: "Windows-1251", value: "windows-1251" },
+  { label: "CP866", value: "ibm866" },
+  { label: "KOI8-R", value: "koi8-r" },
+];
+const DEFAULT_ENCODING = "utf-8";
+const isEncoding = (v: string) => ENCODINGS.some((e) => e.value === v);
+
+/** The encoding from the URL's `?enc=`, or UTF-8 (an unknown value is ignored). */
+export function textEncoding(): string {
+  const e = params().get("enc") ?? "";
+  return isEncoding(e) ? e : DEFAULT_ENCODING;
+}
+
+/** Decode bytes under `encoding`, falling back to UTF-8 if the label is unsupported. */
+function decode(bytes: Uint8Array, encoding: string): string {
+  try {
+    return new TextDecoder(encoding).decode(bytes);
+  } catch {
+    return new TextDecoder("utf-8").decode(bytes);
+  }
+}
+
+/** Fetch a file's raw bytes once per `path` (decoding happens separately, so changing
+ *  the encoding does not refetch). */
+function useBytes(path: string): { bytes: Uint8Array | null; error: string | null } {
+  const [bytes, setBytes] = useState<Uint8Array | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  useEffect(() => {
+    let cancelled = false;
+    setBytes(null);
+    setError(null);
+    fetch(blobUrl(path))
+      .then((r) => r.arrayBuffer())
+      .then((buf) => !cancelled && setBytes(new Uint8Array(buf)))
+      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
+    return () => {
+      cancelled = true;
+    };
+  }, [path]);
+  return { bytes, error };
+}
+
+export function PlaintextView({ node }: { node: NodeJson }) {
+  const { bytes, error } = useBytes(node.path);
+  const encoding = textEncoding();
+  const text = useMemo(() => (bytes ? decode(bytes, encoding) : null), [bytes, encoding]);
+  if (error) return <div className="error">text: {error}</div>;
+  if (text == null) return <div className="loading">reading…</div>;
+  return (
+    <div className="text">
+      {node.title && <h1 className="chapter-title">{node.title}</h1>}
+      {node.description && <p className="chapter-subtitle">{node.description}</p>}
+      <pre className="plaintext">{text}</pre>
+    </div>
+  );
+}
+
+/** A plain-text chunk embedded inline in a chapter: just the verbatim text, decoded
+ *  as UTF-8 (no per-chunk URL controls, like the CSV chunk). */
+export function PlaintextChunk({ chunk }: { chunk: Chunk }) {
+  const { bytes, error } = useBytes(chunk.path);
+  const text = useMemo(() => (bytes ? decode(bytes, DEFAULT_ENCODING) : null), [bytes]);
+  if (error) return <div className="error">text: {error}</div>;
+  if (text == null) return <div className="loading">reading…</div>;
+  return <pre className="plaintext">{text}</pre>;
+}
+
+/**
+ * The encoding selector shown in the node bar beside the plaintext tab — the
+ * `config` hook. Writes `?enc=` (preserving the path + other params) and calls
+ * `rerender` so {@link PlaintextView} re-decodes the already-fetched bytes.
+ */
+export function EncodingControl({ rerender }: { rerender: () => void }) {
+  const enc = textEncoding();
+  const setEnc = (value: string) => {
+    const q = params();
+    if (value && value !== DEFAULT_ENCODING) q.set("enc", value);
+    else q.delete("enc");
+    const qs = q.toString();
+    window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : ""));
+    rerender();
+  };
+  return (
+    <label className="enc-control">
+      encoding{" "}
+      <select value={enc} onChange={(e) => setEnc(e.target.value)}>
+        {ENCODINGS.map((o) => (
+          <option key={o.value} value={o.value}>
+            {o.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/src/client/renderers/plantuml.tsx

@@ -0,0 +1,82 @@
+import { deflateSync } from "fflate";
+import { NodeJson } from "../api";
+import { Chunk } from "./registry";
+
+/**
+ * The renderer for a `string`/`text/x-plantuml` node: PlantUML source shown as the
+ * diagram it describes. Like the markdown/asciidoc renderers it works from the
+ * node's string value, so it serves both a whole `.puml` file (`render`) and a
+ * single inline chunk embedded in a chapter (`renderChunk`).
+ *
+ * PlantUML is a *language that compiles to a picture* — it can only be rendered by
+ * a PlantUML server. So, exactly as every PlantUML integration does, the source is
+ * deflate+encoded into a URL and handed to one as an `<img>`. The default is the
+ * public server; point `VITE_PLANTUML_SERVER` at a self-hosted instance (e.g.
+ * `docker run -d -p 8080:8080 plantuml/plantuml-server`) to keep diagrams off it.
+ */
+const PLANTUML_SERVER =
+  ((import.meta as any).env?.VITE_PLANTUML_SERVER as string | undefined)?.replace(/\/+$/, "") ??
+  "https://www.plantuml.com/plantuml";
+
+// PlantUML's text transport: UTF-8 → raw DEFLATE → its own base64 variant (the
+// alphabet `0-9 A-Z a-z - _`, three bytes packed into four 6-bit chars). The
+// server inflates it back, so any valid DEFLATE stream is accepted — we let
+// fflate compress and only reproduce PlantUML's character mapping.
+function encode6bit(b: number): string {
+  if (b < 10) return String.fromCharCode(48 + b);
+  b -= 10;
+  if (b < 26) return String.fromCharCode(65 + b);
+  b -= 26;
+  if (b < 26) return String.fromCharCode(97 + b);
+  b -= 26;
+  if (b === 0) return "-";
+  if (b === 1) return "_";
+  return "?";
+}
+
+function append3bytes(b1: number, b2: number, b3: number): string {
+  const c1 = b1 >> 2;
+  const c2 = ((b1 & 0x3) << 4) | (b2 >> 4);
+  const c3 = ((b2 & 0xf) << 2) | (b3 >> 6);
+  const c4 = b3 & 0x3f;
+  return encode6bit(c1 & 0x3f) + encode6bit(c2 & 0x3f) + encode6bit(c3 & 0x3f) + encode6bit(c4 & 0x3f);
+}
+
+function encode64(data: Uint8Array): string {
+  let r = "";
+  for (let i = 0; i < data.length; i += 3) {
+    if (i + 2 === data.length) r += append3bytes(data[i], data[i + 1], 0);
+    else if (i + 1 === data.length) r += append3bytes(data[i], 0, 0);
+    else r += append3bytes(data[i], data[i + 1], data[i + 2]);
+  }
+  return r;
+}
+
+/** The PlantUML server URL that renders `source` as an SVG diagram. */
+export function plantumlUrl(source: string): string {
+  const deflated = deflateSync(new TextEncoder().encode(source), { level: 9 });
+  return `${PLANTUML_SERVER}/svg/${encode64(deflated)}`;
+}
+
+function Diagram({ source }: { source: string }) {
+  return (
+    <div className="filemedia">
+      <img className="fileimage plantuml" src={plantumlUrl(source)} alt="PlantUML diagram" />
+    </div>
+  );
+}
+
+export function PlantumlView({ node }: { node: NodeJson }) {
+  return (
+    <div className="text">
+      {node.title && <h1 className="chapter-title">{node.title}</h1>}
+      {node.description && <p className="chapter-subtitle">{node.description}</p>}
+      <Diagram source={String(node.value ?? "")} />
+    </div>
+  );
+}
+
+/** A diagram chunk embedded inline (the chapter supplies the number + anchor). */
+export function PlantumlChunk({ chunk }: { chunk: Chunk }) {
+  return <Diagram source={String(chunk.value ?? "")} />;
+}

package/src/client/renderers/psd.tsx

@@ -0,0 +1,25 @@
+import { readPsd } from "ag-psd";
+import { NodeJson } from "../api";
+import { DecodedImageView, canvasToPng } from "./decoded";
+
+/**
+ * Renders an Adobe Photoshop document (`image/vnd.adobe.photoshop`, `.psd`/`.psb`).
+ * The browser has no native PSD support, so we decode it with `ag-psd`: read the
+ * file's *flattened composite* — the merged RGB preview Photoshop embeds on save —
+ * which `ag-psd` paints onto a `<canvas>` for us, and export that as a PNG. We skip
+ * the per-layer/thumbnail image data: we only show the one composite, and decoding
+ * every layer of a big PSD would allocate far more than we display.
+ */
+export function PsdView({ node }: { node: NodeJson }) {
+  return (
+    <DecodedImageView
+      node={node}
+      label="psd"
+      decode={async (buf) => {
+        const psd = readPsd(buf, { skipLayerImageData: true, skipThumbnail: true });
+        if (!psd.canvas) throw new Error("no composite image in this PSD");
+        return [await canvasToPng(psd.canvas)];
+      }}
+    />
+  );
+}