yamlover 0.3.4 → 0.3.6

package/src/client/renderers/imagemap.tsx

@@ -1,170 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-import { NodeJson, blobUrl } from "../api";
-import { Chunk } from "./registry";
-import { Annotation } from "../api";
-import { DEFAULT_COLOR, colorOf, editable, useAnnotationMenu, useMaterialAnnotations } from "./annotate";
-import { wireGestures } from "./panzoom";
-
-/** A rectangular annotation region in the image's own pixel space (origin top-left). `ann` is the
- *  source annotation when it is a real saved one (→ clickable to edit); absent for the live preview. */
-export interface ImageRegion { x: number; y: number; w: number; h: number; title?: string; color?: string; ann?: Annotation }
-
-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
-    .filter((a) => a.selector?.type === "rect")
-    .map((a) => ({ 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 }));
-}
-
-/**
- * Pan/zoom image viewer — the same widget the KML map uses, over a flat picture. The image is an
- * `imageOverlay` on a `CRS.Simple` map sized to its natural pixels; the view fits it initially.
- * Gestures follow the unified model (see {@link wireGestures} / the UI guide): plain drag selects a
- * region (when `onSelectRegion` is set), ctrl/alt-drag pans, plain wheel pans vertically, ctrl/alt-
- * wheel zooms. The map is built once (per `src`); regions redraw in place without resetting the view.
- */
-export function PanZoomImage({
-  src, className, regions, onSelectRegion, onRegionClick, selectColor,
-}: {
-  src: string;
-  className: string;
-  regions?: ImageRegion[];
-  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);
-  const colorRef = useRef(selectColor);
-  const [error, setError] = useState<string | null>(null);
-  const [ready, setReady] = useState(0); // bumps once the map (and its overlay layer) exist
-  const regionsKey = JSON.stringify(regions ?? []);
-  const selectable = !!onSelectRegion; // fixed per instance: full view annotates, chunk doesn't
-
-  useEffect(() => { onSelectRef.current = onSelectRegion; onRegionClickRef.current = onRegionClick; colorRef.current = selectColor; });
-
-  // Build the map once per src; gestures + the overlay layer live with it.
-  useEffect(() => {
-    let cancelled = false;
-    let dispose: (() => void) | null = null;
-    setError(null);
-    const img = new Image();
-    img.onload = () => {
-      if (cancelled || !ref.current) return;
-      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]];
-      L.imageOverlay(src, bounds).addTo(map);
-      map.fitBounds(bounds); // initial view frames the whole image
-      layerRef.current = L.layerGroup().addTo(map);
-      mapRef.current = map;
-      dispose = wireGestures(map, {
-        color: () => colorRef.current?.() ?? DEFAULT_COLOR,
-        onSelect: selectable
-          ? (b, screen) => {
-              // 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();
-              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,
-      });
-      setReady((r) => r + 1);
-    };
-    img.onerror = () => { if (!cancelled) setError("could not load image"); };
-    img.src = src;
-    return () => {
-      cancelled = true;
-      dispose?.();
-      mapRef.current?.remove();
-      mapRef.current = null;
-      layerRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [src]);
-
-  // Draw the region rectangles into the overlay layer — in place, so creating one keeps the view.
-  useEffect(() => {
-    const lg = layerRef.current;
-    if (!lg) return;
-    lg.clearLayers();
-    const { h } = sizeRef.current;
-    for (const r of regions ?? []) {
-      const c = r.color || DEFAULT_COLOR;
-      // image y is from the top; CRS.Simple lat from the bottom, so flip y
-      const rect = L.rectangle([[h - r.y, r.x], [h - (r.y + r.h), r.x + r.w]], {
-        className: "yo-region", color: c, weight: 3, fillColor: c, fillOpacity: 0.25,
-      });
-      if (r.title) rect.bindTooltip(r.title);
-      if (r.ann) {
-        const ann = r.ann;
-        rect.on("click", (ev) => { L.DomEvent.stop(ev); onRegionClickRef.current?.(ann, { x: ev.originalEvent.clientX, y: ev.originalEvent.clientY }); });
-      }
-      rect.addTo(lg);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [regionsKey, ready]);
-
-  return (
-    <>
-      {error && <div className="error">image: {error}</div>}
-      <div ref={ref} className={className + (selectable ? " yo-selectable" : "")} />
-    </>
-  );
-}
-
-export function ImageView({ node }: { node: NodeJson }) {
-  const material = useMaterialAnnotations(node.path);
-  const { openCreate, openEdit, palette, preview, color } = useAnnotationMenu(material);
-  // include the live PREVIEW selector 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;
-  return (
-    <div className="text">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <PanZoomImage
-        src={blobUrl(node.path)}
-        regions={imageRegions(shown)}
-        onSelectRegion={(sel, screen, crop) => openCreate(sel, screen, undefined, crop)}
-        onRegionClick={openEdit}
-        selectColor={() => color}
-        className="filemap fileimagemap"
-      />
-      {palette}
-    </div>
-  );
-}
-
-/** An image embedded inline in a chapter — pan/zoom only (no annotation target → plain drag pans). */
-export function ImageChunk({ chunk }: { chunk: Chunk }) {
-  return <PanZoomImage src={blobUrl(chunk.path)} className="filemap chunk-map fileimagemap" />;
-}

package/src/client/renderers/kml.ts

@@ -1,46 +0,0 @@
-import { kml as kmlDomToGeoJSON } from "@tmcw/togeojson";
-import { unzipSync, strFromU8 } from "fflate";
-
-/**
- * The pure (Leaflet-free) half of the map renderer: turn the bytes of a `.kml` or
- * `.kmz` file into GeoJSON. Kept apart from `map.tsx` so it can be unit-tested
- * without importing Leaflet (a browser-only library with CSS side effects).
- *
- *   - **KML** is XML — decoded as text, parsed to a DOM, then converted with
- *     `@tmcw/togeojson`.
- *   - **KMZ** is a ZIP — unzipped (with the already-bundled `fflate`); its first
- *     `.kml` entry is the document, then the same KML path.
- */
-
-/** A GeoJSON FeatureCollection (the shape togeojson returns). Loosely typed — the
- *  map renderer only hands it to Leaflet's `L.geoJSON`. */
-export interface GeoJSON {
-  type: "FeatureCollection";
-  features: unknown[];
-}
-
-/** Whether `bytes` begin with the ZIP local-file signature `PK\x03\x04` — i.e. a
- *  KMZ rather than a bare KML. Robust regardless of the file's extension. */
-export function isZip(bytes: Uint8Array): boolean {
-  return bytes[0] === 0x50 && bytes[1] === 0x4b && bytes[2] === 0x03 && bytes[3] === 0x04;
-}
-
-/** Parse a KML XML string into GeoJSON via a DOM (available in the browser and in
- *  jsdom tests). */
-export function kmlStringToGeoJSON(xml: string): GeoJSON {
-  const dom = new DOMParser().parseFromString(xml, "application/xml");
-  if (dom.getElementsByTagName("parsererror").length) throw new Error("malformed KML XML");
-  return kmlDomToGeoJSON(dom) as unknown as GeoJSON;
-}
-
-/** Parse `.kml`/`.kmz` bytes into GeoJSON. KMZ is detected by its ZIP signature
- *  (not just the extension); the first `.kml` entry inside is the document. */
-export function bytesToGeoJSON(bytes: Uint8Array): GeoJSON {
-  if (isZip(bytes)) {
-    const files = unzipSync(bytes);
-    const name = Object.keys(files).find((n) => n.toLowerCase().endsWith(".kml"));
-    if (!name) throw new Error("no .kml document inside the KMZ archive");
-    return kmlStringToGeoJSON(strFromU8(files[name]));
-  }
-  return kmlStringToGeoJSON(new TextDecoder().decode(bytes));
-}

package/src/client/renderers/latex.tsx

@@ -1,37 +0,0 @@
-import katex from "katex";
-import "katex/dist/katex.min.css";
-import { NodeJson } from "../api";
-import { scalarValue } from "../render";
-import { Chunk } from "./registry";
-
-/**
- * The renderer for a `string`/`text/x-latex` node: LaTeX math typeset with KaTeX.
- * Like the markdown/asciidoc renderers it works straight from the node's string
- * value, so it serves both a whole formula node (`render`) and a single inline
- * chunk (`renderChunk`).
- *
- * `renderMath` is the one place KaTeX is invoked, exported so **marklower** can
- * reuse it for its inline `$$…$$` spans — math is rendered the same way whether it
- * is a standalone `text/x-latex` string or embedded in marklower prose.
- */
-export function renderMath(tex: unknown, displayMode: boolean): string {
-  // `throwOnError: false` makes KaTeX emit the offending source in red rather than
-  // throwing, so a typo in one formula never blanks the whole page.
-  return katex.renderToString(String(tex ?? ""), { displayMode, throwOnError: false });
-}
-
-export function LatexView({ 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>}
-      <div className="markup" dangerouslySetInnerHTML={{ __html: renderMath(scalarValue(node.value), true) }} />
-    </div>
-  );
-}
-
-/** A LaTeX chunk embedded inline in a chapter: the formula typeset as a display
- *  block (the chapter supplies the surrounding number + anchor). */
-export function LatexChunk({ chunk }: { chunk: Chunk }) {
-  return <div className="markup" dangerouslySetInnerHTML={{ __html: renderMath(chunk.value, true) }} />;
-}

package/src/client/renderers/map.tsx

@@ -1,205 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-import { NodeJson, blobUrl } from "../api";
-import { Chunk } from "./registry";
-import { bytesToGeoJSON, GeoJSON } from "./kml";
-import { Annotation } from "../api";
-import { DEFAULT_COLOR, colorOf, editable, useAnnotationMenu, useMaterialAnnotations } from "./annotate";
-import { wireGestures } from "./panzoom";
-
-/**
- * Renderer for geographic overlays — `.kml` and `.kmz` (zipped KML). The file is
- * served as bytes; we convert it to GeoJSON (see `kml.ts`) and draw it on a
- * Leaflet slippy map over OpenStreetMap tiles, fitting the view to the data.
- * Points become circle markers, lines/polygons keep their KML colours, and a
- * feature's name/description show in a popup.
- *
- * Gestures follow the unified model (see {@link wireGestures} / the UI guide): plain drag selects a
- * geographic region to annotate, ctrl/alt-drag pans, plain wheel pans vertically, ctrl/alt-wheel
- * zooms.
- *
- * **Network note:** the vector overlay and KML/KMZ parsing are fully local, but the
- * *map tiles* are fetched from a tile server — by default OpenStreetMap. Point
- * `VITE_MAP_TILE_URL` (and optionally `VITE_MAP_TILE_ATTRIBUTION`) at a self-hosted
- * tile server to keep map traffic off the public one. Leaflet is heavy and
- * browser-only, so the registry loads this module lazily.
- */
-const TILE_URL =
-  ((import.meta as any).env?.VITE_MAP_TILE_URL as string | undefined) ??
-  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-const TILE_ATTRIBUTION =
-  ((import.meta as any).env?.VITE_MAP_TILE_ATTRIBUTION as string | undefined) ??
-  '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
-
-/** A rectangular annotation region on the map, in geographic edges (degrees). `ann` is the source
- *  annotation when it is a real saved one (→ clickable to edit); absent for the live preview. */
-interface MapRegion { n: number; s: number; e: number; w: number; title?: string; color?: string; ann?: Annotation }
-const num = (v: unknown): number => Number(v) || 0;
-
-/** The `map`-type annotations, as geographic rectangles to overlay. */
-function mapRegions(anns: Annotation[]): MapRegion[] {
-  return anns
-    .filter((a) => a.selector?.type === "map")
-    .map((a) => ({ n: num(a.selector!.n), s: num(a.selector!.s), e: num(a.selector!.e), w: num(a.selector!.w), title: a.description, color: colorOf(a), ann: editable(a) ? a : undefined }));
-}
-
-function escapeHtml(s: string): string {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-/** A feature's description as popup HTML. togeojson returns a plain-text KML
- *  description as a string (escaped here) and an HTML/CDATA one as
- *  `{ "@type": "html", value }` — authored markup, kept as-is (this is a local
- *  viewer of the user's own files). */
-function descriptionHtml(description: unknown): string {
-  if (!description) return "";
-  if (typeof description === "string") return escapeHtml(description);
-  if (typeof description === "object" && (description as any)["@type"] === "html") {
-    return String((description as any).value ?? "");
-  }
-  return "";
-}
-
-/** Draw `geo` onto a fresh Leaflet map in `el`, fit to the data, and return the map
- *  (so the caller can dispose it). */
-function drawMap(el: HTMLElement, geo: GeoJSON): L.Map {
-  const map = L.map(el);
-  L.tileLayer(TILE_URL, { maxZoom: 19, attribution: TILE_ATTRIBUTION }).addTo(map);
-  const layer = L.geoJSON(geo as any, {
-    // honour KML styling that togeojson surfaces as simplestyle properties
-    style: (f) => {
-      const p = (f?.properties ?? {}) as Record<string, unknown>;
-      return {
-        color: (p["stroke"] as string) || "#3388ff",
-        weight: (p["stroke-width"] as number) || 2,
-        opacity: (p["stroke-opacity"] as number) ?? 1,
-        fillColor: (p["fill"] as string) || "#3388ff",
-        fillOpacity: (p["fill-opacity"] as number) ?? 0.2,
-      };
-    },
-    pointToLayer: (_f, latlng) => L.circleMarker(latlng, { radius: 5, color: "#e23", weight: 2, fillOpacity: 0.8 }),
-    onEachFeature: (f, lyr) => {
-      const p = (f.properties ?? {}) as { name?: string; description?: unknown };
-      const name = p.name ? `<strong>${escapeHtml(p.name)}</strong>` : "";
-      const body = descriptionHtml(p.description);
-      const desc = body ? `<div class="map-popup-desc">${body}</div>` : "";
-      if (name || desc) lyr.bindPopup(`${name}${desc}`);
-    },
-  }).addTo(map);
-
-  const bounds = layer.getBounds();
-  if (bounds.isValid()) map.fitBounds(bounds, { padding: [24, 24], maxZoom: 16 });
-  else map.setView([0, 0], 2); // nothing geocoded — show the whole world
-  return map;
-}
-
-/** Fetch the file, convert to GeoJSON, and render a Leaflet map into `className`.
- *  Shared by the full page and the inline chunk (which only differ in height/CSS + annotation). */
-function MapBody({
-  path, className, regions, onSelectRegion, onRegionClick, selectColor,
-}: {
-  path: string;
-  className: string;
-  regions?: MapRegion[];
-  onSelectRegion?: (selector: Record<string, unknown>, screen: { x: number; y: number }) => 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 onSelectRef = useRef(onSelectRegion);
-  const onRegionClickRef = useRef(onRegionClick);
-  const colorRef = useRef(selectColor);
-  const [error, setError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [ready, setReady] = useState(0);
-  const regionsKey = JSON.stringify(regions ?? []);
-  const selectable = !!onSelectRegion;
-
-  useEffect(() => { onSelectRef.current = onSelectRegion; onRegionClickRef.current = onRegionClick; colorRef.current = selectColor; });
-
-  useEffect(() => {
-    let cancelled = false;
-    let dispose: (() => void) | null = null;
-    setError(null);
-    setLoading(true);
-    fetch(blobUrl(path))
-      .then((r) => r.arrayBuffer())
-      .then((buf) => {
-        if (cancelled || !ref.current) return;
-        const map = drawMap(ref.current, bytesToGeoJSON(new Uint8Array(buf)));
-        layerRef.current = L.layerGroup().addTo(map);
-        mapRef.current = map;
-        dispose = wireGestures(map, {
-          color: () => colorRef.current?.() ?? DEFAULT_COLOR,
-          onSelect: selectable
-            ? (b, screen) => onSelectRef.current?.({ type: "map", n: b.getNorth(), s: b.getSouth(), e: b.getEast(), w: b.getWest() }, screen)
-            : undefined,
-        });
-        setReady((x) => x + 1);
-        setLoading(false);
-      })
-      .catch((e) => {
-        if (!cancelled) {
-          setError(String((e as Error).message || e));
-          setLoading(false);
-        }
-      });
-    return () => {
-      cancelled = true;
-      dispose?.();
-      mapRef.current?.remove();
-      mapRef.current = null;
-      layerRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [path]);
-
-  // Draw region rectangles into the overlay layer — in place, so creating one keeps the view.
-  useEffect(() => {
-    const lg = layerRef.current;
-    if (!lg) return;
-    lg.clearLayers();
-    for (const r of regions ?? []) {
-      const c = r.color || DEFAULT_COLOR;
-      const rect = L.rectangle([[r.s, r.w], [r.n, r.e]], { className: "yo-region", color: c, weight: 3, fillColor: c, fillOpacity: 0.25 });
-      if (r.title) rect.bindTooltip(r.title);
-      if (r.ann) {
-        const ann = r.ann;
-        rect.on("click", (ev) => { L.DomEvent.stop(ev); onRegionClickRef.current?.(ann, { x: ev.originalEvent.clientX, y: ev.originalEvent.clientY }); });
-      }
-      rect.addTo(lg);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [regionsKey, ready]);
-
-  return (
-    <>
-      {error && <div className="error">map: {error}</div>}
-      <div ref={ref} className={className + (selectable ? " yo-selectable" : "")} />
-      {loading && !error && <div className="loading">loading map…</div>}
-    </>
-  );
-}
-
-export function MapView({ node }: { node: NodeJson }) {
-  const material = useMaterialAnnotations(node.path);
-  const { openCreate, openEdit, palette, preview, color } = useAnnotationMenu(material);
-  const shown = preview
-    ? [...material.annotations, { path: "(preview)", selector: preview.selector, tag: preview.tag } as Annotation]
-    : material.annotations;
-  return (
-    <div className="text">
-      {node.title && <h1 className="chapter-title">{node.title}</h1>}
-      {node.description && <p className="chapter-subtitle">{node.description}</p>}
-      <MapBody path={node.path} regions={mapRegions(shown)} onSelectRegion={openCreate} onRegionClick={openEdit} selectColor={() => color} className="filemap" />
-      {palette}
-    </div>
-  );
-}
-
-export function MapChunk({ chunk }: { chunk: Chunk }) {
-  return <MapBody path={chunk.path} className="filemap chunk-map" />;
-}

package/src/client/renderers/marklower.tsx

@@ -1,120 +0,0 @@
-import { ReactNode } from "react";
-import { NodeJson } from "../api";
-import { scalarValue } from "../render";
-import { Chunk } from "./registry";
-import { renderMath } from "./latex";
-import { NavLink } from "../links";
-
-/**
- * The renderer for a bare `string` with no explicit format — `(string, null)` —
- * our own lightweight markup language, **marklower**: deliberately a notch below
- * Markdown ("downshifted" from it). It is the *default* format for prose strings
- * inside a chapter: a chunk that declares no format routes here rather than to the
- * plain-paragraph fallback.
- *
- * The language is meant to cover inline concerns only — font styling, hyperlinks,
- * images, math, and (perhaps) embedded code — but deliberately **no** chapter
- * structure: no headings/subheadings, since chapters are modeled by the chapter
- * renderer's `children`, not by markup.
- *
- * The syntax so far is all inline:
- *
- *   - **atomic tokens**, whose contents are *not* re-interpreted as markup:
- *     `$$…$$` math (typeset with KaTeX via the shared {@link renderMath}, the same
- *     path the `text/x-latex` renderer uses) and `` `code` `` spans;
- *   - **links**: `[text](target)`, where `target` is a path in the app's JSON
- *     instance space (the same space the whole app navigates). Resolved and made
- *     clickable through the shared {@link NavLink} — the one link concept that refs
- *     and rels are expected to adopt later;
- *   - **text styling** on the plain runs between those: `**bold**`/`__bold__`,
- *     `*italic*`/`_italic_`, and `~~strikethrough~~`.
- *
- * Anything else is passed through verbatim. `parse` is the single seam every entry
- * point goes through, so there is one place to teach the grammar.
- */
-
-/** Escape a plain-text run so it can be dropped into HTML (`parse` emits HTML now
- *  that some tokens — math, code, emphasis — render to markup). */
-function escapeHtml(s: string): string {
-  return s
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;");
-}
-
-/** Style a plain-text run (one of the stretches between the atomic tokens): escape
- *  it, then apply emphasis. Bold (`**`/`__`) runs before italic (`*`/`_`) so a
- *  double marker isn't mistaken for two single ones; non-greedy so neighbours don't
- *  merge. The markers (`* _ ~`) survive `escapeHtml`, so styling the escaped text
- *  is safe. */
-function styleText(text: string): string {
-  return escapeHtml(text)
-    .replace(/~~(.+?)~~/g, "<del>$1</del>")
-    .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
-    .replace(/__(.+?)__/g, "<strong>$1</strong>")
-    .replace(/\*(.+?)\*/g, "<em>$1</em>")
-    .replace(/_(.+?)_/g, "<em>$1</em>");
-}
-
-/** The non-text tokens, in one alternation matched in source order: `$$…$$` math
- *  (group 1; `[\s\S]` so a formula may span lines), a `` `code` `` span (group 2),
- *  or a `[label](target)` link (groups 3 = label, 4 = target). Non-greedy so
- *  adjacent tokens don't merge. The label may contain a balanced `[…]` (so a path
- *  used as its own label — `[/children[0]](/children[0])` — works), but a stray `]`
- *  is not a label, so a non-link `[a]` in prose is left alone. */
-const TOKEN = /\$\$([\s\S]+?)\$\$|`([^`]+?)`|\[((?:[^\[\]]|\[[^\]]*\])*?)\]\(([^)]+?)\)/g;
-
-/** Parse marklower into React nodes. Most syntax renders to an HTML string (math,
- *  code, emphasis), accumulated and flushed into `<span>`s; a link must be a real
- *  element so it navigates in-app (an HTML `<a href>` would reload), so the result
- *  is a node list, not one HTML string. `documentPath` anchors a link's `/…`
- *  (document-relative) target. */
-function parse(value: unknown, onNavigate: (path: string) => void, documentPath?: string): ReactNode[] {
-  const src = String(value ?? "");
-  const nodes: ReactNode[] = [];
-  let html = ""; // buffer of HTML-rendered runs between links
-  let key = 0;
-  const flush = () => {
-    if (!html) return;
-    nodes.push(<span key={key++} dangerouslySetInnerHTML={{ __html: html }} />);
-    html = "";
-  };
-  let last = 0;
-  for (const m of src.matchAll(TOKEN)) {
-    html += styleText(src.slice(last, m.index)); // plain run before this token
-    if (m[1] !== undefined) {
-      html += renderMath(m[1], false); // $$ inline math $$
-    } else if (m[2] !== undefined) {
-      html += `<code>${escapeHtml(m[2])}</code>`; // `code` — contents literal
-    } else {
-      // [label](target) — a real anchor so it navigates in JSON instance space; the
-      // label keeps its own inline styling.
-      flush();
-      nodes.push(
-        <NavLink key={key++} target={m[4]} documentPath={documentPath} onNavigate={onNavigate}>
-          <span dangerouslySetInnerHTML={{ __html: styleText(m[3]) }} />
-        </NavLink>,
-      );
-    }
-    last = m.index + m[0].length;
-  }
-  html += styleText(src.slice(last));
-  flush();
-  return nodes;
-}
-
-export function MarklowerView({ node, onNavigate }: { node: NodeJson; onNavigate: (path: string) => void }) {
-  return (
-    <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(scalarValue(node.value), onNavigate, node.documentPath)}</p>
-    </div>
-  );
-}
-
-/** A marklower chunk embedded inline in a chapter (the chapter supplies the
- *  surrounding number + anchor). */
-export function MarklowerChunk({ chunk, onNavigate }: { chunk: Chunk; onNavigate: (path: string) => void }) {
-  return <p className="chapter-prose">{parse(chunk.value, onNavigate, chunk.documentPath)}</p>;
-}

package/src/client/renderers/markup.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from "react";
-
-/**
- * The rendered-HTML body for the markdown/asciidoc page views, plus the control that sets its
- * line-wrap measure. The **reading width is a URL parameter** — `?width=<ch>`, alongside
- * `?format=` — so a particular width is a shareable link (the CSV renderer keeps its options in
- * the query the same way). Default 72ch. The control lives in the tab bar next to the renderer
- * button (see NodeView), not in the body. Chapter *chunks* render plain `.markup`, unaffected.
- */
-const DEFAULT_WIDTH_CH = 72;
-const MIN_CH = 20;
-const MAX_CH = 400;
-const params = () => new URLSearchParams(window.location.search);
-
-/** The reading width in `ch` from the URL's `?width=`, or the default (out-of-range ignored). */
-export function markupWidthCh(): number {
-  const w = Number(params().get("width"));
-  return Number.isFinite(w) && w >= MIN_CH && w <= MAX_CH ? w : DEFAULT_WIDTH_CH;
-}
-
-function writeWidth(ch: number): void {
-  const q = params();
-  if (ch === DEFAULT_WIDTH_CH) q.delete("width");
-  else q.set("width", String(ch));
-  const qs = q.toString();
-  window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : ""));
-}
-
-/** The markdown/asciidoc body at the URL-configured reading width. */
-export function Markup({ html }: { html: string }) {
-  return <div className="markup" style={{ maxWidth: `${markupWidthCh()}ch` }} dangerouslySetInnerHTML={{ __html: html }} />;
-}
-
-/**
- * The width control beside the markdown/asciidoc renderer button (in the tab bar). It accepts
- * ANY input — a valid measure (20–400 ch) is applied to the URL and `rerender()` re-wraps the
- * body; an impossible/half-typed value is simply left unapplied and the field turns red (no
- * editing is blocked). No visible label: the hover title reads "width, ch".
- */
-export function MarkupWidthControl({ rerender }: { rerender: () => void }) {
-  const urlWidth = markupWidthCh();
-  const [text, setText] = useState(String(urlWidth));
-  useEffect(() => setText(String(urlWidth)), [urlWidth]); // resync when the URL changes (nav / apply)
-  const n = Number(text);
-  const valid = text.trim() !== "" && Number.isInteger(n) && n >= MIN_CH && n <= MAX_CH;
-  return (
-    <input
-      className={"markup-width" + (valid ? "" : " invalid")}
-      type="text"
-      inputMode="numeric"
-      title="width, ch"
-      value={text}
-      onChange={(e) => {
-        const v = e.target.value;
-        setText(v);
-        const num = Number(v);
-        if (v.trim() !== "" && Number.isInteger(num) && num >= MIN_CH && num <= MAX_CH) {
-          writeWidth(num);
-          rerender();
-        }
-      }}
-    />
-  );
-}

package/src/client/renderers/media.tsx

@@ -1,19 +0,0 @@
-import { NodeJson, blobUrl } from "../api";
-
-/**
- * Renderer for a file-backed HTML document (`<iframe>`), pointing at the server's `/api/blob`
- * endpoint, which streams the file's raw bytes with its inferred Content-Type — so there is no
- * base64 round-trip through the JSON API. (Images live in `imagemap.tsx`: a pan/zoom viewer.)
- */
-export function HtmlView({ node }: { node: NodeJson }) {
-  // sandboxed: same-origin so the page's own CSS/images (served from /api/blob)
-  // load, but no scripts run — a saved web page renders without taking over.
-  return (
-    <iframe
-      className="filehtml"
-      src={blobUrl(node.path)}
-      sandbox="allow-same-origin"
-      title={node.title ?? node.path}
-    />
-  );
-}