yamlover 0.3.2 → 0.3.4

package/src/client/renderers/asciidoc.tsx

@@ -1,5 +1,6 @@
 import Asciidoctor from "@asciidoctor/core";
 import { NodeJson } from "../api";
+import { scalarValue } from "../render";
 import { Chunk } from "./registry";
 import { anchorizeHeadings, useHashScroll } from "./headings";
 import { Markup } from "./markup";
@@ -25,7 +26,7 @@ export function AsciidocView({ node }: { node: NodeJson }) {
     <div className="text">
       {node.title && <h1 className="chapter-title">{node.title}</h1>}
       {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <Markup html={adoc(node.value)} />
+      <Markup html={adoc(scalarValue(node.value))} />
     </div>
   );
 }

package/src/client/renderers/chapter.tsx

@@ -100,9 +100,13 @@ function ChunkBlock({
     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.type, chunk.format);
+  const renderer = rendererFor(chunk);
   const body = renderer?.renderChunk
     ? renderer.renderChunk(chunk, onNavigate)
     : <p className="chapter-prose">{String(chunk.value ?? "")}</p>;

package/src/client/renderers/csv.tsx

@@ -1,4 +1,5 @@
 import { NodeJson } from "../api";
+import { scalarValue } from "../render";
 import { Chunk } from "./registry";
 
 /**
@@ -163,7 +164,7 @@ export function CsvView({ node }: { node: NodeJson }) {
   // the single source of truth — this view holds no parsing state of its own.
   const p = params();
   const header = headerOn(p);
-  const text = String(node.value ?? "");
+  const text = String(scalarValue(node.value) ?? "");
   const sep = decodeSep(p.get("sep")) ?? autoSep(text, node.format ?? null);
   const rows = parseDelimited(text, sep);
 

package/src/client/renderers/djvu.tsx

@@ -67,6 +67,13 @@ export function DjvuView({ node }: { node: NodeJson }) {
   pagedRef.current = paged;
   useLayoutEffect(() => { paged.restoreAnchor(); }, [zoom]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Focus the `.filedjvu` scroller on mount so arrows / space / PageUp-Down scroll the document
+  // natively (it's a nested scroller the focused RHS pane can't reach). Skip when chunk-embedded.
+  useEffect(() => {
+    const el = ref.current;
+    if (el && !el.closest(".chunk-body")) el.focus({ preventScroll: true });
+  }, []);
+
   // Track the pane width so a page fits but is capped (≤1000px) like the PDF viewer.
   useLayoutEffect(() => {
     const el = ref.current;
@@ -205,7 +212,7 @@ export function DjvuView({ node }: { node: NodeJson }) {
   if (error) return <div className="error">djvu: {error}</div>;
   return (
     <>
-      <div className="filedjvu yo-zoomable" ref={ref} onMouseUp={onMouseUp}>
+      <div className="filedjvu yo-zoomable" ref={ref} tabIndex={0} onMouseUp={onMouseUp}>
         {count === 0 && <div className="loading">opening djvu…</div>}
         {width > 0 &&
           Array.from({ length: count }, (_, i) => {

package/src/client/renderers/explorer.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { NodeJson, fetchTagged } from "../api";
 import { asLink, Link } from "../render";
 import { typeIcon } from "../icons";
@@ -117,12 +117,46 @@ function isDocFormat(f?: string | null): boolean {
   return !!f && (f.includes("/") || f.startsWith("x-yamlover-"));
 }
 
-function Item({ it, onNavigate }: { it: ExplorerItem; onNavigate: (path: string) => void }) {
+/** The grid item to move to from `cur` for an arrow key. Left/Right step in reading
+ *  order; Up/Down pick the nearest item in the adjacent row, preferring the same
+ *  column — measured from live geometry, so it's correct for the wrapping flex grid
+ *  (variable columns, a short last row) without knowing the column count. */
+function arrowTarget(els: (HTMLElement | null)[], cur: number, key: string, count: number): number {
+  if (key === "ArrowRight") return Math.min(cur + 1, count - 1);
+  if (key === "ArrowLeft") return Math.max(cur - 1, 0);
+  if (key === "Home") return 0;
+  if (key === "End") return count - 1;
+  const a = els[cur];
+  if (!a) return cur;
+  const r = a.getBoundingClientRect();
+  const cx = r.left + r.width / 2, cy = r.top + r.height / 2;
+  const down = key === "ArrowDown";
+  let best = cur, bestScore = Infinity;
+  for (let i = 0; i < count; i++) {
+    const el = els[i];
+    if (!el || i === cur) continue;
+    const ri = el.getBoundingClientRect();
+    const ix = ri.left + ri.width / 2, iy = ri.top + ri.height / 2;
+    if (down ? iy <= cy + 1 : iy >= cy - 1) continue; // must lie in the arrow's direction
+    const score = Math.abs(ix - cx) * 2 + Math.abs(iy - cy); // prefer same column, nearest row
+    if (score < bestScore) { bestScore = score; best = i; }
+  }
+  return best;
+}
+
+function Item({ it, active, setRef, onFocus, onNavigate }: {
+  it: ExplorerItem;
+  active: boolean;
+  setRef: (el: HTMLElement | null) => void;
+  onFocus: () => void;
+  onNavigate: (path: string) => void;
+}) {
   const link = it.link;
+  const tabIndex = active ? 0 : -1; // roving tabindex: only the selected item is in the tab order
   if (!link) {
     // not a marker (unexpected at depth 1) — an inert label, no navigation
     return (
-      <span className="dirview-item">
+      <span className="dirview-item" ref={setRef} tabIndex={tabIndex} onFocus={onFocus}>
         <span className="dirview-icon t-bin">•</span>
         <span className="dirview-label">{it.key}: {scalarText(it.raw)}</span>
       </span>
@@ -147,6 +181,9 @@ function Item({ it, onNavigate }: { it: ExplorerItem; onNavigate: (path: string)
       className={"dirview-item" + (it.up ? " dirview-up" : "")}
       href={link.path}
       title={displayPath(link.path)}
+      ref={setRef}
+      tabIndex={tabIndex}
+      onFocus={onFocus}
       onClick={(e) => {
         e.preventDefault();
         onNavigate(link.path);
@@ -189,6 +226,43 @@ export function ExplorerView({ node, onNavigate }: { node: NodeJson; onNavigate:
   }
   const items = [...ups, ...members];
 
+  // Roving keyboard focus over the grid: plain arrows walk the icons, Enter opens the
+  // selected one. The item elements are tracked by index for the geometry-based row moves.
+  const gridRef = useRef<HTMLDivElement>(null);
+  const itemEls = useRef<(HTMLElement | null)[]>([]);
+  itemEls.current.length = items.length; // drop stale refs when the member list shrinks
+  const [active, setActive] = useState(0);
+  useEffect(() => {
+    if (active > items.length - 1) setActive(Math.max(0, items.length - 1));
+  }, [items.length, active]);
+
+  // On navigating to a new directory, reset the selection and re-arm autofocus (this
+  // component is reused across nodes, not remounted, so the flag must follow `node.path`).
+  const wantFocus = useRef(true);
+  useEffect(() => { setActive(0); wantFocus.current = true; }, [node.path]);
+  // Focus the first item once the grid has members (a tag's load async), so arrows work right
+  // after navigating here (the RHS pane handed us focus) — once per node, and never when
+  // embedded as a chapter chunk (several grids would fight over focus).
+  useEffect(() => {
+    if (!wantFocus.current || !items.length) return;
+    wantFocus.current = false;
+    if (gridRef.current?.closest(".chunk-body")) return; // embedded — don't steal focus
+    itemEls.current[0]?.focus({ preventScroll: true });
+  }, [items.length, node.path]);
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    if (e.ctrlKey || e.altKey || e.metaKey || !items.length) return; // Ctrl/Alt+arrows = TOC nav (App)
+    if (e.key === "Enter") {
+      const link = items[active]?.link;
+      if (link) { e.preventDefault(); onNavigate(link.path); }
+      return;
+    }
+    if (!/^(Arrow(Up|Down|Left|Right)|Home|End)$/.test(e.key)) return;
+    e.preventDefault(); // don't also scroll the pane
+    const next = arrowTarget(itemEls.current, active, e.key, items.length);
+    if (next !== active) { setActive(next); itemEls.current[next]?.focus(); }
+  };
+
   // a tag page's description is its BODY (the header bar already names the node)
   const desc = (isTag ? tagBody(node.value) : null) ?? node.description;
   return (
@@ -198,9 +272,20 @@ export function ExplorerView({ node, onNavigate }: { node: NodeJson; onNavigate:
           <p className="tagdesc">{desc}</p>
         </div>
       )}
-      <div className={"dirview" + (explorerViewMode() === "large" ? " dirview-lg" : "")}>
+      <div
+        ref={gridRef}
+        className={"dirview" + (explorerViewMode() === "large" ? " dirview-lg" : "")}
+        onKeyDown={onKeyDown}
+      >
         {items.map((it, i) => (
-          <Item key={`${it.up ? "^" : ""}${it.link?.path ?? it.key}#${i}`} it={it} onNavigate={onNavigate} />
+          <Item
+            key={`${it.up ? "^" : ""}${it.link?.path ?? it.key}#${i}`}
+            it={it}
+            active={i === active}
+            setRef={(el) => { itemEls.current[i] = el; }}
+            onFocus={() => setActive(i)}
+            onNavigate={onNavigate}
+          />
         ))}
         {items.length === 0 && <span className="dirview-empty">empty</span>}
       </div>

package/src/client/renderers/imagemap.tsx

@@ -13,6 +13,19 @@ export interface ImageRegion { x: number; y: number; w: number; h: number; title
 
 const num = (v: unknown): number => Number(v) || 0;
 
+/** A PNG data-URL crop of the natural-pixel region (x,y,w,h) of `img`, for an image-like
+ *  fragment's embedded preview; undefined if the region is empty or the canvas reads back tainted
+ *  (cross-origin — image blobs are same-origin, so this is just a guard). */
+function cropPng(img: HTMLImageElement | null, x: number, y: number, w: number, h: number): string | undefined {
+  if (!img || w <= 0 || h <= 0) return undefined;
+  const cv = document.createElement("canvas");
+  cv.width = w; cv.height = h;
+  const ctx = cv.getContext("2d");
+  if (!ctx) return undefined;
+  ctx.drawImage(img, x, y, w, h, 0, 0, w, h);
+  try { return cv.toDataURL("image/png"); } catch { return undefined; }
+}
+
 /** The `rect`-type annotations, as pixel regions to overlay on the image. */
 function imageRegions(anns: Annotation[]): ImageRegion[] {
   return anns
@@ -33,13 +46,14 @@ export function PanZoomImage({
   src: string;
   className: string;
   regions?: ImageRegion[];
-  onSelectRegion?: (selector: Record<string, unknown>, screen: { x: number; y: number }) => void;
+  onSelectRegion?: (selector: Record<string, unknown>, screen: { x: number; y: number }, imageBase64?: string) => void;
   onRegionClick?: (ann: Annotation, screen: { x: number; y: number }) => void;
   selectColor?: () => string;
 }) {
   const ref = useRef<HTMLDivElement>(null);
   const mapRef = useRef<L.Map | null>(null);
   const layerRef = useRef<L.LayerGroup | null>(null);
+  const imgElRef = useRef<HTMLImageElement | null>(null);
   const sizeRef = useRef({ w: 1, h: 1 });
   const onSelectRef = useRef(onSelectRegion);
   const onRegionClickRef = useRef(onRegionClick);
@@ -62,6 +76,7 @@ export function PanZoomImage({
       const w = img.naturalWidth || 1;
       const h = img.naturalHeight || 1;
       sizeRef.current = { w, h };
+      imgElRef.current = img; // kept for cropping a selected region (same-origin → un-tainted canvas)
       // CRS.Simple: coordinates are raw pixels (y, x); negative minZoom allows zooming far out.
       const map = L.map(ref.current, { crs: L.CRS.Simple, minZoom: -8, attributionControl: false, zoomSnap: 0 });
       const bounds: L.LatLngBoundsExpression = [[0, 0], [h, w]];
@@ -76,10 +91,8 @@ export function PanZoomImage({
               // image pixels have y from the top; CRS.Simple lat is from the bottom → flip.
               const { h: ih } = sizeRef.current;
               const west = b.getWest(), east = b.getEast(), south = b.getSouth(), north = b.getNorth();
-              onSelectRef.current?.(
-                { type: "rect", x: Math.round(west), y: Math.round(ih - north), w: Math.round(east - west), h: Math.round(north - south) },
-                screen,
-              );
+              const x = Math.round(west), y = Math.round(ih - north), w = Math.round(east - west), hh = Math.round(north - south);
+              onSelectRef.current?.({ type: "rect", x, y, w, h: hh }, screen, cropPng(imgElRef.current, x, y, w, hh));
             }
           : undefined,
       });
@@ -141,7 +154,7 @@ export function ImageView({ node }: { node: NodeJson }) {
       <PanZoomImage
         src={blobUrl(node.path)}
         regions={imageRegions(shown)}
-        onSelectRegion={openCreate}
+        onSelectRegion={(sel, screen, crop) => openCreate(sel, screen, undefined, crop)}
         onRegionClick={openEdit}
         selectColor={() => color}
         className="filemap fileimagemap"

package/src/client/renderers/latex.tsx

@@ -1,6 +1,7 @@
 import katex from "katex";
 import "katex/dist/katex.min.css";
 import { NodeJson } from "../api";
+import { scalarValue } from "../render";
 import { Chunk } from "./registry";
 
 /**
@@ -24,7 +25,7 @@ export function LatexView({ node }: { node: NodeJson }) {
     <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: renderMath(node.value, true) }} />
+      <div className="markup" dangerouslySetInnerHTML={{ __html: renderMath(scalarValue(node.value), true) }} />
     </div>
   );
 }

package/src/client/renderers/marklower.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { NodeJson } from "../api";
+import { scalarValue } from "../render";
 import { Chunk } from "./registry";
 import { renderMath } from "./latex";
 import { NavLink } from "../links";
@@ -107,7 +108,7 @@ export function MarklowerView({ node, onNavigate }: { node: NodeJson; onNavigate
     <div className="marklower">
       {node.title && <h1 className="chapter-title">{node.title}</h1>}
       {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <p className="chapter-prose">{parse(node.value, onNavigate, node.documentPath)}</p>
+      <p className="chapter-prose">{parse(scalarValue(node.value), onNavigate, node.documentPath)}</p>
     </div>
   );
 }

package/src/client/renderers/pdf.tsx

@@ -96,6 +96,14 @@ export function PdfView({ node }: { node: NodeJson }) {
   // After a zoom COMMIT reflows the pages, restore the captured reading position.
   useLayoutEffect(() => { paged.restoreAnchor(); }, [zoom]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // The `.filepdf` scroller is its OWN scroll container nested in the (focused) RHS pane, so the
+  // pane's focus can't drive it — focus it on mount so arrows / space / PageUp-Down / Home-End
+  // scroll the document natively. Skip when embedded as a chapter chunk (several would fight + jump).
+  useEffect(() => {
+    const el = ref.current;
+    if (el && !el.closest(".chunk-body")) el.focus({ preventScroll: true });
+  }, []);
+
   // Track the pane width so pages re-flow on resize.
   useLayoutEffect(() => {
     const el = ref.current;
@@ -226,7 +234,7 @@ export function PdfView({ node }: { node: NodeJson }) {
 
   return (
     <>
-      <div className="filepdf yo-zoomable" ref={ref} onMouseUp={onMouseUp}>
+      <div className="filepdf yo-zoomable" ref={ref} tabIndex={0} onMouseUp={onMouseUp}>
         <Document
           file={blobUrl(node.path)}
           onLoadSuccess={({ numPages }) => setPages(numPages)}

package/src/client/renderers/plantuml.tsx

@@ -1,5 +1,6 @@
 import { deflateSync } from "fflate";
 import { NodeJson } from "../api";
+import { scalarValue } from "../render";
 import { Chunk } from "./registry";
 
 /**
@@ -71,7 +72,7 @@ export function PlantumlView({ node }: { node: NodeJson }) {
     <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 ?? "")} />
+      <Diagram source={String(scalarValue(node.value) ?? "")} />
     </div>
   );
 }