yamlover 0.3.4 → 0.3.6

package/src/client/renderers/explorer.tsx

@@ -1,294 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { NodeJson, fetchTagged } from "../api";
-import { asLink, Link } from "../render";
-import { typeIcon } from "../icons";
-import { TAG_FORMAT, tagLabel, tagBody, resolveTagColor } from "./tag";
-import { displayPath, displayKey } from "../paths";
-import { touchesYamlover, useDiffBump } from "../live";
-
-const ANNOTATION_FORMAT = "x-yamlover-annotation";
-const MIXED_KEY = "$yamloverMixed";
-
-// ---- the view mode: a URL parameter (`?view=`), so a view is a shareable link ---- //
-
-const VIEWS = ["large", "small"] as const;
-type ViewMode = (typeof VIEWS)[number];
-const DEFAULT_VIEW: ViewMode = "large";
-const params = () => new URLSearchParams(window.location.search);
-
-/** The grid view from the URL's `?view=`, or the default (an unknown value ignored). */
-export function explorerViewMode(): ViewMode {
-  const v = params().get("view");
-  return (VIEWS as readonly string[]).includes(v ?? "") ? (v as ViewMode) : DEFAULT_VIEW;
-}
-
-function writeViewMode(v: ViewMode): void {
-  const q = params();
-  if (v === DEFAULT_VIEW) q.delete("view");
-  else q.set("view", v);
-  const qs = q.toString();
-  window.history.replaceState({}, "", window.location.pathname + (qs ? "?" + qs : ""));
-}
-
-/** The view selector beside the explorer tab (the renderer's `config` hook) — writes
- *  `?view=` and rerenders, like the plaintext encoding control. */
-export function ExplorerViewControl({ rerender }: { rerender: () => void }) {
-  return (
-    <label className="enc-control">
-      view{" "}
-      <select
-        value={explorerViewMode()}
-        onChange={(e) => {
-          writeViewMode(e.target.value as ViewMode);
-          rerender();
-        }}
-      >
-        <option value="large">large icons</option>
-        <option value="small">small icons</option>
-      </select>
-    </label>
-  );
-}
-
-/**
- * The EXPLORER renderer — a directory (or a tag) as a desktop file manager:
- * every member an icon + label, with the node's reverse UPLINKS (`relations`:
- * the `..` parent and each upstream `*`/`~` source) leading the grid as
- * visually distinct items. Two views, chosen by the `?view=` URL parameter
- * (a renderer param, like the markup width or the CSV options): **large
- * icons** (the default — tiles, the icon above the label) and **small icons**
- * (rows, the icon beside the label).
- *
- * It claims two shapes:
- *   - a node stored as a filesystem directory (`concrete` `dir`/`yamlover`,
- *     the registry's concrete fallback) — ALL members show, not just files:
- *     scalar members read `key: value`, containers and binaries link onward;
- *   - a tag (`x-yamlover-tag`) — the members are the MATERIALS filed under it
- *     (GET /api/tagged: annotations resolved to their `target`, deduped),
- *     alongside its owned fields (subtags as colored badges); the mediating
- *     annotation nodes themselves stay out of the grid.
- */
-
-/** One grid item: a navigable link marker (or a defensive non-link member). */
-export interface ExplorerItem {
-  key: string; // the label source: a member key, `[i]`, or a relation key (`..`, `/eve`, …)
-  link: Link | null;
-  raw?: unknown; // the value when it is not a link marker (rendered inert)
-  up?: boolean; // an uplink (relations) item — shown first, styled distinct
-}
-
-/** The uplink items: the node's `relations` in server order (`..` always first). */
-export function uplinkItems(relations?: Record<string, unknown>): ExplorerItem[] {
-  return Object.entries(relations ?? {})
-    .map(([key, v]) => ({ key, link: asLink(v), up: true }))
-    .filter((it) => it.link != null);
-}
-
-/** The member items, from any depth-1 projection shape: a plain object's entries, an array's
- *  items, or a `$yamloverMixed` marker's entries (the omni self-value is the BODY — shown in
- *  the header, not the grid). At depth 1 every member arrives as a `$yamloverLink` marker;
- *  a non-link value is kept defensively as an inert label. */
-export function memberItems(node: NodeJson): ExplorerItem[] {
-  const v = node.value;
-  if (Array.isArray(v)) return v.map((item, i) => ({ key: `[${i}]`, link: asLink(item), raw: item }));
-  if (!v || typeof v !== "object") return [];
-  const mixed = (v as Record<string, unknown>)[MIXED_KEY] as
-    | { entries?: { key: string | null; value: unknown }[] }
-    | undefined;
-  if (Object.keys(v).length === 1 && mixed?.entries) {
-    return mixed.entries.map((e, i) => ({ key: e.key ?? `[${i}]`, link: asLink(e.value), raw: e.value }));
-  }
-  return Object.entries(v as Record<string, unknown>).map(([key, val]) => ({ key, link: asLink(val), raw: val }));
-}
-
-/** A scalar member's value as a short label tail (`key: <this>`) — its first line,
- *  capped (a long text would bloat the DOM; the CSS ellipsis only hides overflow). */
-function scalarText(v: unknown): string {
-  if (v === null || v === undefined) return "~";
-  const line = String(v).split("\n", 1)[0];
-  return line.length > 80 ? line.slice(0, 79) + "…" : line;
-}
-
-/** A scalar whose format marks it file-like CONTENT (a media type such as `text/markdown`,
- *  or an `x-yamlover-…` shape) — its value is the whole document, not a datum: the grid
- *  shows just the name (the icon already says what it is). A schema VALUE format (`date`,
- *  `email`, …) keeps the `key: value` form. */
-function isDocFormat(f?: string | null): boolean {
-  return !!f && (f.includes("/") || f.startsWith("x-yamlover-"));
-}
-
-/** 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" ref={setRef} tabIndex={tabIndex} onFocus={onFocus}>
-        <span className="dirview-icon t-bin">•</span>
-        <span className="dirview-label">{it.key}: {scalarText(it.raw)}</span>
-      </span>
-    );
-  }
-  const g = typeIcon(link.type ?? link.kind, link.format ?? null, link.concrete);
-  // an uplink labels by its (decoded) relation key; a member by title, else its key
-  const name = it.up ? displayKey(it.key) : link.title ?? it.key;
-  const label =
-    link.format === TAG_FORMAT ? (
-      // a tag member (e.g. a subtag) keeps its badge color everywhere
-      <span className="tagtag" style={{ background: resolveTagColor({ name, color: link.color }) }}>{name}</span>
-    ) : link.kind === "scalar" && !isDocFormat(link.format) ? (
-      <>
-        {name}: <span className="val">{scalarText(link.value)}</span>
-      </>
-    ) : (
-      name
-    );
-  return (
-    <a
-      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);
-      }}
-    >
-      <span className={"dirview-icon " + g.cls} title={g.title}>{g.glyph}</span>
-      <span className="dirview-label">{label}</span>
-    </a>
-  );
-}
-
-export function ExplorerView({ node, onNavigate }: { node: NodeJson; onNavigate: (path: string) => void }) {
-  const isTag = node.format === TAG_FORMAT;
-  // a tag's materials (annotations resolved to their targets) — fetched per tag page, refetched
-  // when a diff (live.ts) touches a `.yamlover` file (an annotation created/deleted anywhere)
-  const [tagged, setTagged] = useState<Link[]>([]);
-  const diffBump = useDiffBump(touchesYamlover);
-  useEffect(() => {
-    setTagged([]);
-    if (!isTag) return;
-    let cancelled = false;
-    fetchTagged(node.path)
-      .then((arr) => {
-        if (!cancelled) setTagged(arr.map(asLink).filter((l): l is Link => l != null));
-      })
-      .catch(() => {}); // the owned members still show
-    return () => {
-      cancelled = true;
-    };
-  }, [node.path, isTag, diffBump]);
-
-  const ups = uplinkItems(node.relations);
-  let members = memberItems(node);
-  if (isTag) {
-    // the raw back-edge members are the mediating ANNOTATION nodes — the grid shows the
-    // materials from /api/tagged instead (directly-tagged nodes are in both → dedup by path)
-    members = members.filter((m) => m.link?.format !== ANNOTATION_FORMAT);
-    const have = new Set(members.map((m) => m.link?.path).filter(Boolean));
-    for (const l of tagged) if (!have.has(l.path)) members.push({ key: tagLabel(l.path, l.title), link: l });
-  }
-  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 (
-    <div className="explorerview">
-      {desc && (
-        <div className="dirhead">
-          <p className="tagdesc">{desc}</p>
-        </div>
-      )}
-      <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}
-            active={i === active}
-            setRef={(el) => { itemEls.current[i] = el; }}
-            onFocus={() => setActive(i)}
-            onNavigate={onNavigate}
-          />
-        ))}
-        {items.length === 0 && <span className="dirview-empty">empty</span>}
-      </div>
-    </div>
-  );
-}

package/src/client/renderers/fb2.tsx

@@ -1,149 +0,0 @@
-import { useEffect, useState } from "react";
-import { NodeJson, blobUrl } from "../api";
-
-const XLINK = "http://www.w3.org/1999/xlink";
-// Characters illegal in XML 1.0 (control codes other than tab/newline/cr). FB2
-// generators frequently leave these in; strict parsing rejects them, so drop.
-// Built from an escaped string to keep literal control bytes out of the source.
-const BAD_XML = new RegExp("[\\u0000-\\u0008\\u000B\\u000C\\u000E-\\u001F]", "g");
-
-/** Decode the file's bytes using the encoding named in its XML declaration —
- *  FB2 is frequently windows-1251 (Cyrillic), not UTF-8 — then strip the stray
- *  control characters that would otherwise fail strict XML parsing. */
-function decodeXml(buf: ArrayBuffer): string {
-  const bytes = new Uint8Array(buf);
-  const head = new TextDecoder("latin1").decode(bytes.subarray(0, 256));
-  const enc = (head.match(/encoding=["']([^"']+)["']/i)?.[1] || "utf-8").toLowerCase();
-  let text: string;
-  try {
-    text = new TextDecoder(enc).decode(bytes);
-  } catch {
-    text = new TextDecoder("utf-8").decode(bytes);
-  }
-  return text.replace(BAD_XML, "");
-}
-
-function esc(s: string): string {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-/** Recursively turn an FB2 body element into HTML. `images` maps a `<binary>`
- *  id to a data URL. Switches on `localName`, so the FB2 namespace is ignored. */
-function toHtml(node: Node, images: Map<string, string>): string {
-  if (node.nodeType === 3) return esc(node.textContent || ""); // text
-  if (node.nodeType !== 1) return "";
-  const el = node as Element;
-  const kids = () => Array.from(el.childNodes).map((n) => toHtml(n, images)).join("");
-  switch (el.localName) {
-    case "section": return `<section class="fb2-section">${kids()}</section>`;
-    case "title": return `<div class="fb2-title">${kids()}</div>`;
-    case "subtitle": return `<p class="fb2-subtitle">${kids()}</p>`;
-    case "p": return `<p>${kids()}</p>`;
-    case "empty-line": return "<br/>";
-    case "emphasis": return `<em>${kids()}</em>`;
-    case "strong": return `<strong>${kids()}</strong>`;
-    case "strikethrough": return `<s>${kids()}</s>`;
-    case "sub": return `<sub>${kids()}</sub>`;
-    case "sup": return `<sup>${kids()}</sup>`;
-    case "code": return `<code>${kids()}</code>`;
-    case "epigraph":
-    case "cite": return `<blockquote class="fb2-cite">${kids()}</blockquote>`;
-    case "text-author": return `<p class="fb2-text-author">${kids()}</p>`;
-    case "poem": return `<div class="fb2-poem">${kids()}</div>`;
-    case "stanza": return `<div class="fb2-stanza">${kids()}</div>`;
-    case "v": return `<div class="fb2-v">${kids()}</div>`;
-    case "a": return `<span class="fb2-a">${kids()}</span>`; // FB2 links are intra-doc
-    case "image": {
-      const href =
-        el.getAttributeNS(XLINK, "href") || el.getAttribute("l:href") || el.getAttribute("href") || "";
-      const src = images.get(href.replace(/^#/, ""));
-      return src ? `<img class="fb2-img" src="${src}" alt=""/>` : "";
-    }
-    case "title-info":
-    case "description":
-    case "binary":
-      return ""; // metadata / payload, not body prose
-    default: return kids();
-  }
-}
-
-interface Book {
-  title?: string;
-  author?: string;
-  cover?: string;
-  html: string;
-}
-
-/**
- * Renderer for an `application/x-fictionbook+xml` (`.fb2`) ebook. The file is
- * served as bytes; here we decode it (honoring its declared encoding), parse the
- * FictionBook XML, and present the book — cover, title, author, then the body
- * with its sections/paragraphs/poems and embedded images inlined.
- */
-export function Fb2View({ node }: { node: NodeJson }) {
-  const [book, setBook] = useState<Book | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-    setBook(null);
-    setError(null);
-    fetch(blobUrl(node.path))
-      .then((r) => r.arrayBuffer())
-      .then((buf) => {
-        if (cancelled) return;
-        const doc = new DOMParser().parseFromString(decodeXml(buf), "application/xml");
-        const perr = doc.getElementsByTagName("parsererror")[0];
-        if (perr) throw new Error(perr.textContent?.trim().split("\n")[0] || "invalid FB2 XML");
-
-        const images = new Map<string, string>();
-        for (const b of Array.from(doc.getElementsByTagNameNS("*", "binary"))) {
-          const id = b.getAttribute("id");
-          if (id) {
-            const ct = b.getAttribute("content-type") || "image/jpeg";
-            images.set(id, `data:${ct};base64,${(b.textContent || "").replace(/\s+/g, "")}`);
-          }
-        }
-
-        const ti = doc.getElementsByTagNameNS("*", "title-info")[0] as Element | undefined;
-        const at = (e: Element | undefined, name: string) =>
-          e?.getElementsByTagNameNS("*", name)[0]?.textContent?.trim() || "";
-        const title = at(ti, "book-title") || undefined;
-        const author =
-          ti &&
-          Array.from(ti.getElementsByTagNameNS("*", "author"))
-            .map((a) =>
-              [at(a, "first-name"), at(a, "middle-name"), at(a, "last-name")]
-                .filter(Boolean)
-                .join(" ") || at(a, "nickname"),
-            )
-            .filter(Boolean)
-            .join(", ");
-        const coverImg = ti?.getElementsByTagNameNS("*", "coverpage")[0]?.getElementsByTagNameNS("*", "image")[0];
-        const coverId = (
-          coverImg?.getAttributeNS(XLINK, "href") || coverImg?.getAttribute("l:href") || ""
-        ).replace(/^#/, "");
-
-        const bodies = Array.from(doc.getElementsByTagNameNS("*", "body"));
-        const main = bodies.find((b) => b.getAttribute("name") !== "notes") || bodies[0];
-        const html = main ? Array.from(main.childNodes).map((n) => toHtml(n, images)).join("") : "";
-
-        setBook({ title, author: author || undefined, cover: coverId ? images.get(coverId) : undefined, html });
-      })
-      .catch((e) => !cancelled && setError(String((e as Error).message || e)));
-    return () => {
-      cancelled = true;
-    };
-  }, [node.path]);
-
-  if (error) return <div className="error">fb2: {error}</div>;
-  if (!book) return <div className="loading">loading FB2…</div>;
-  return (
-    <div className="text fb2">
-      {book.cover && <img className="fb2-cover" src={book.cover} alt="" />}
-      {book.title && <h1 className="chapter-title">{book.title}</h1>}
-      {book.author && <p className="chapter-subtitle">{book.author}</p>}
-      <div className="markup fb2-body" dangerouslySetInnerHTML={{ __html: book.html }} />
-    </div>
-  );
-}

package/src/client/renderers/headings.ts

@@ -1,69 +0,0 @@
-import { useEffect } from "react";
-
-/**
- * Shared heading machinery for the rendered-markup formats (Markdown and AsciiDoc).
- *
- * A `.md`/`.adoc` page is a single HTML blob dumped via `dangerouslySetInnerHTML`,
- * so on its own a heading is not addressable. {@link anchorizeHeadings} gives every
- * heading a stable `id` and a small `§` link to it, mirroring the way GitHub renders
- * the same documents — so a deep link like `<page>#<slug>` lands on, and scrolls to,
- * one section. This is the prose-document counterpart of the chapter renderer's `§N`
- * chunk anchors (see `chapter.tsx`): there the locator is the chunk's path; here it
- * is the heading's slug.
- */
-
-/** GitHub-style slug of a heading's text: lowercase, punctuation dropped, runs of
- *  whitespace collapsed to single hyphens. Unicode letters/numbers are kept. */
-function slugify(text: string): string {
-  return text
-    .trim()
-    .toLowerCase()
-    .replace(/[^\p{L}\p{N}\s-]/gu, "")
-    .replace(/\s+/g, "-");
-}
-
-/** `base`, suffixed `-2`, `-3`, … until it is not already in `used` (which it is
- *  then added to). Empty `base` (a heading with no sluggable text) yields "". */
-function uniqueId(base: string, used: Set<string>): string {
-  if (!base) return "";
-  let id = base;
-  for (let n = 2; used.has(id); n++) id = `${base}-${n}`;
-  used.add(id);
-  return id;
-}
-
-/** Give every heading in a block of rendered markup an `id` and a leading `§`
- *  anchor link to it (placed first so it sits in the left gutter, like a chapter
- *  chunk's `§N` index). An id already present (Asciidoctor stamps section ids) is
- *  kept — so its anchor matches the document's own cross-references — otherwise a
- *  de-duplicated slug of the heading text is assigned. Returns the rewritten HTML.
- *  Runs in the browser/jsdom; with no `DOMParser` (or no headings) it is a no-op. */
-export function anchorizeHeadings(html: string): string {
-  if (typeof DOMParser === "undefined" || !html.includes("<h")) return html;
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  const used = new Set<string>();
-  for (const h of doc.querySelectorAll("h1, h2, h3, h4, h5, h6")) {
-    // slug from the text before inserting the anchor, so the `§` is not part of it
-    const id = uniqueId(h.id || slugify(h.textContent ?? ""), used);
-    if (!id) continue;
-    h.id = id;
-    const a = doc.createElement("a");
-    a.className = "header-anchor";
-    a.href = `#${id}`;
-    a.setAttribute("aria-label", "Link to this section");
-    a.textContent = "§";
-    h.insertBefore(a, h.firstChild);
-  }
-  return doc.body.innerHTML;
-}
-
-/** Scroll to the element named by the URL hash once `dep` (the rendered node)
- *  settles. A deep link `<page>#<slug>` lands on the page, but the value is fetched
- *  async — after the browser's own one-shot scroll — so re-scroll when it arrives.
- *  The same pattern the chapter renderer uses for `#/chunks[n]`. */
-export function useHashScroll(dep: unknown): void {
-  useEffect(() => {
-    const id = decodeURIComponent(window.location.hash.slice(1));
-    if (id) document.getElementById(id)?.scrollIntoView?.(); // optional-call: absent in jsdom
-  }, [dep]);
-}

package/src/client/renderers/heic.tsx

@@ -1,23 +0,0 @@
-import heic2any from "heic2any";
-import { NodeJson } from "../api";
-import { DecodedImageView } from "./decoded";
-
-/**
- * Renders an HEIC/HEIF image (`image/heic`, `.heic`/`.heif`) — the format iPhones
- * shoot. It's HEVC-encoded and patent-encumbered, with no browser support, so we
- * decode it with `heic2any` (libheif compiled to wasm), which converts the bytes
- * to a PNG blob. An HEIC may hold an image *sequence* (burst/Live Photo); when it
- * does, `heic2any` returns several blobs and we show each.
- */
-export function HeicView({ node }: { node: NodeJson }) {
-  return (
-    <DecodedImageView
-      node={node}
-      label="heic"
-      decode={async (buf) => {
-        const out = await heic2any({ blob: new Blob([buf]), toType: "image/png" });
-        return Array.isArray(out) ? out : [out];
-      }}
-    />
-  );
-}