@zerohive/hive-viewer 0.2.0 → 0.2.2

package/dist/index.js

@@ -3,7 +3,7 @@ import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3, useSta
 
 // src/utils/locale.ts
 var defaultLocale = {
-  "loading": "Loading\u2026",
+  loading: "Loading\u2026",
   "error.title": "Error",
   "toolbar.layout.single": "Single page",
   "toolbar.layout.two": "Side-by-side",
@@ -26,7 +26,17 @@ var defaultLocale = {
 function guessFileType(name, explicit) {
   if (explicit) return explicit;
   const ext = (name?.split(".").pop() || "").toLowerCase();
-  const allowed = ["pdf", "md", "docx", "xlsx", "pptx", "txt", "png", "jpg", "svg"];
+  const allowed = [
+    "pdf",
+    "md",
+    "docx",
+    "xlsx",
+    "pptx",
+    "txt",
+    "png",
+    "jpg",
+    "svg"
+  ];
   return allowed.includes(ext) ? ext : "txt";
 }
 function arrayBufferToBase64(buf) {
@@ -57,7 +67,8 @@ async function resolveSource(args) {
     const ab = await base64ToArrayBuffer(args.base64);
     return { fileType, fileName, arrayBuffer: ab };
   }
-  if (!args.fileUrl) throw new Error("No file source provided. Use fileUrl, blob, or base64.");
+  if (!args.fileUrl)
+    throw new Error("No file source provided. Use fileUrl, blob, or base64.");
   const res = await fetch(args.fileUrl);
   if (!res.ok) throw new Error(`Failed to fetch file (${res.status})`);
   const total = Number(res.headers.get("content-length") || "") || void 0;
@@ -173,44 +184,69 @@ function SignaturePanel(props) {
 
 // src/renderers/PdfRenderer.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
-import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
+import {
+  GlobalWorkerOptions,
+  getDocument
+} from "pdfjs-dist";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function PdfRenderer(props) {
   const { url, arrayBuffer } = props;
   const [doc, setDoc] = useState(null);
   const [pageCount, setPageCount] = useState(0);
-  const [rendered, setRendered] = useState(/* @__PURE__ */ new Map());
+  const [rendered, setRendered] = useState(
+    /* @__PURE__ */ new Map()
+  );
   const [thumbs, setThumbs] = useState([]);
   const [size, setSize] = useState({ w: 840, h: 1188 });
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
   const containerRef = useRef(null);
   useEffect(() => {
     try {
-      GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
+      GlobalWorkerOptions.workerSrc = new URL(
+        "pdfjs-dist/build/pdf.worker.min.mjs",
+        import.meta.url
+      ).toString();
     } catch {
     }
   }, []);
   useEffect(() => {
     let cancel = false;
+    setError(null);
+    setLoading(true);
     (async () => {
       setDoc(null);
       setRendered(/* @__PURE__ */ new Map());
       setThumbs([]);
-      if (!url && !arrayBuffer) return;
-      const task = getDocument(url ? { url, rangeChunkSize: 512 * 1024 } : { data: arrayBuffer });
-      const pdf = await task.promise;
-      if (cancel) return;
-      setDoc(pdf);
-      setPageCount(pdf.numPages);
-      props.onPageCount(pdf.numPages);
-      setThumbs(Array.from({ length: pdf.numPages }));
-      const p1 = await pdf.getPage(1);
-      const base = p1.getViewport({ scale: 1 });
-      const w = Math.min(980, Math.max(640, base.width));
-      const s = w / base.width;
-      const vp = p1.getViewport({ scale: s });
-      setSize({ w: Math.round(vp.width), h: Math.round(vp.height) });
-    })().catch(() => {
-    });
+      if (!url && !arrayBuffer) {
+        setError("No PDF source provided.");
+        setLoading(false);
+        return;
+      }
+      try {
+        const task = getDocument(
+          url ? { url, rangeChunkSize: 512 * 1024 } : { data: arrayBuffer }
+        );
+        const pdf = await task.promise;
+        if (cancel) return;
+        setDoc(pdf);
+        setPageCount(pdf.numPages);
+        props.onPageCount(pdf.numPages);
+        setThumbs(Array.from({ length: pdf.numPages }));
+        const p1 = await pdf.getPage(1);
+        const base = p1.getViewport({ scale: 1 });
+        const w = Math.min(980, Math.max(640, base.width));
+        const s = w / base.width;
+        const vp = p1.getViewport({ scale: s });
+        setSize({ w: Math.round(vp.width), h: Math.round(vp.height) });
+      } catch (e) {
+        setError(
+          "Failed to load PDF. " + (e instanceof Error ? e.message : "")
+        );
+      } finally {
+        setLoading(false);
+      }
+    })();
     return () => {
       cancel = true;
     };
@@ -232,37 +268,43 @@ function PdfRenderer(props) {
     (async () => {
       for (const p of pagesToShow) {
         if (rendered.has(p)) continue;
-        const page = await doc.getPage(p);
-        if (cancel) return;
-        const base = page.getViewport({ scale: 1 });
-        const vp = page.getViewport({ scale: size.w / base.width });
-        const canvas = document.createElement("canvas");
-        canvas.width = Math.round(vp.width);
-        canvas.height = Math.round(vp.height);
-        const ctx = canvas.getContext("2d", { alpha: false });
-        if (!ctx) continue;
-        await page.render({ canvasContext: ctx, viewport: vp }).promise;
-        if (cancel) return;
-        setRendered((prev) => {
-          const next = new Map(prev);
-          next.set(p, canvas);
-          return next;
-        });
         try {
-          const tw = 140;
-          const th = Math.round(tw * (canvas.height / canvas.width));
-          const t = document.createElement("canvas");
-          t.width = tw;
-          t.height = th;
-          const tctx = t.getContext("2d");
-          if (tctx) {
-            tctx.drawImage(canvas, 0, 0, tw, th);
-            const url2 = t.toDataURL("image/jpeg", 0.75);
-            setThumbs((prev) => {
-              const next = prev.slice();
-              next[p - 1] = url2;
-              return next;
-            });
+          const page = await doc.getPage(p);
+          if (cancel) return;
+          const base = page.getViewport({ scale: 1 });
+          const vp = page.getViewport({ scale: size.w / base.width });
+          const canvas = document.createElement("canvas");
+          canvas.width = Math.round(vp.width);
+          canvas.height = Math.round(vp.height);
+          const ctx = canvas.getContext("2d", { alpha: false });
+          if (!ctx) continue;
+          await page.render({ canvasContext: ctx, viewport: vp }).promise;
+          if (cancel) return;
+          setRendered((prev) => {
+            const next = new Map(prev);
+            next.set(p, canvas);
+            return next;
+          });
+          if (!thumbs[p - 1]) {
+            const thumbCanvas = document.createElement("canvas");
+            const thumbScale = 120 / vp.width;
+            thumbCanvas.width = Math.round(vp.width * thumbScale);
+            thumbCanvas.height = Math.round(vp.height * thumbScale);
+            const thumbCtx = thumbCanvas.getContext("2d", { alpha: false });
+            if (thumbCtx) {
+              thumbCtx.drawImage(
+                canvas,
+                0,
+                0,
+                thumbCanvas.width,
+                thumbCanvas.height
+              );
+              setThumbs((prev) => {
+                const arr = prev.slice();
+                arr[p - 1] = thumbCanvas.toDataURL("image/png");
+                return arr;
+              });
+            }
           }
         } catch {
         }
@@ -271,13 +313,16 @@ function PdfRenderer(props) {
     return () => {
       cancel = true;
     };
-  }, [doc, pagesToShow, size.w, rendered]);
+  }, [doc, pagesToShow, size.w, rendered, thumbs]);
   function onWheel(e) {
     if (!pageCount) return;
     if (Math.abs(e.deltaY) < 10) return;
     const dir = e.deltaY > 0 ? 1 : -1;
     const step = props.layout === "side-by-side" ? 2 : 1;
-    const next = Math.max(1, Math.min(pageCount, props.currentPage + dir * step));
+    const next = Math.max(
+      1,
+      Math.min(pageCount, props.currentPage + dir * step)
+    );
     props.onCurrentPageChange(next);
   }
   function clickPlace(e, page) {
@@ -290,22 +335,37 @@ function PdfRenderer(props) {
   }
   return /* @__PURE__ */ jsxs4("div", { className: "hv-doc", ref: containerRef, onWheel, children: [
     !doc ? /* @__PURE__ */ jsx4("div", { className: "hv-loading", children: "Loading PDF\u2026" }) : null,
-    doc ? /* @__PURE__ */ jsx4("div", { className: props.layout === "side-by-side" ? "hv-pages hv-pages--two" : "hv-pages", children: pagesToShow.map((p) => {
-      const c = rendered.get(p);
-      return /* @__PURE__ */ jsx4("div", { className: "hv-page", style: { width: size.w, height: size.h }, onClick: (e) => clickPlace(e, p), children: c ? /* @__PURE__ */ jsx4(
-        "canvas",
-        {
-          className: "hv-canvas",
-          width: c.width,
-          height: c.height,
-          ref: (node) => {
-            if (!node) return;
-            const ctx = node.getContext("2d");
-            if (ctx) ctx.drawImage(c, 0, 0);
-          }
-        }
-      ) : /* @__PURE__ */ jsx4("div", { className: "hv-loading", children: "Rendering\u2026" }) }, p);
-    }) }) : null
+    doc ? /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: props.layout === "side-by-side" ? "hv-pages hv-pages--two" : "hv-pages",
+        children: pagesToShow.map((p) => {
+          const c = rendered.get(p);
+          return /* @__PURE__ */ jsx4(
+            "div",
+            {
+              className: "hv-page",
+              style: { width: size.w, height: size.h },
+              onClick: (e) => clickPlace(e, p),
+              children: c ? /* @__PURE__ */ jsx4(
+                "canvas",
+                {
+                  className: "hv-canvas",
+                  width: c.width,
+                  height: c.height,
+                  ref: (node) => {
+                    if (!node) return;
+                    const ctx = node.getContext("2d");
+                    if (ctx) ctx.drawImage(c, 0, 0);
+                  }
+                }
+              ) : /* @__PURE__ */ jsx4("div", { className: "hv-loading", children: "Rendering\u2026" })
+            },
+            p
+          );
+        })
+      }
+    ) : null
   ] });
 }
 
@@ -427,17 +487,29 @@ var RichTextEditor = forwardRef((props, ref) => {
     }
     if (props.fileType === "docx") {
       try {
-        const htmlToDocx = (await import("html-to-docx")).default;
-        const blob = await htmlToDocx(stitched);
-        const ab = await blob.arrayBuffer();
-        props.onSave(arrayBufferToBase64(ab), {
-          fileName: replaceExt(props.fileName, "docx"),
-          fileType: "docx",
-          annotations: { signaturePlacements: props.signaturePlacements }
+        const response = await fetch("/api/export-docx", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            html: stitched,
+            fileName: replaceExt(props.fileName, "docx")
+          })
         });
+        if (!response.ok) throw new Error("Failed to generate DOCX");
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = replaceExt(props.fileName, "docx");
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => {
+          window.URL.revokeObjectURL(url);
+          a.remove();
+        }, 100);
       } catch (err) {
         alert(
-          "DOCX export is not supported in this environment. Please use this feature in a Node.js/server context."
+          "DOCX export failed: " + (err instanceof Error ? err.message : String(err))
         );
       }
       return;
@@ -601,7 +673,11 @@ function ensureExt(name, ext) {
 // src/renderers/ImageRenderer.tsx
 import { useEffect as useEffect4, useMemo as useMemo4, useState as useState4 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function ImageRenderer({ arrayBuffer, fileType, fileName }) {
+function ImageRenderer({
+  arrayBuffer,
+  fileType,
+  fileName
+}) {
   const [zoom, setZoom] = useState4(1);
   const url = useMemo4(() => {
     if (!arrayBuffer) return void 0;
@@ -617,14 +693,42 @@ function ImageRenderer({ arrayBuffer, fileType, fileName }) {
     /* @__PURE__ */ jsxs7("div", { className: "hv-mini-toolbar", children: [
       /* @__PURE__ */ jsx7("div", { className: "hv-title", children: fileName }),
       /* @__PURE__ */ jsx7("div", { className: "hv-spacer" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: "hv-btn", onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)), children: "-" }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "hv-btn",
+          onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)),
+          children: "-"
+        }
+      ),
       /* @__PURE__ */ jsxs7("div", { className: "hv-zoom", children: [
         Math.round(zoom * 100),
         "%"
       ] }),
-      /* @__PURE__ */ jsx7("button", { type: "button", className: "hv-btn", onClick: () => setZoom((z) => Math.min(4, z + 0.25)), children: "+" })
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          className: "hv-btn",
+          onClick: () => setZoom((z) => Math.min(4, z + 0.25)),
+          children: "+"
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "hv-center", children: url ? /* @__PURE__ */ jsx7("img", { src: url, alt: fileName, style: { transform: `scale(${zoom})` }, className: "hv-image" }) : /* @__PURE__ */ jsx7("div", { className: "hv-loading", children: "Loading\u2026" }) })
+    /* @__PURE__ */ jsxs7("div", { className: "hv-center", children: [
+      !arrayBuffer && /* @__PURE__ */ jsx7("div", { className: "hv-error", children: "No image data provided." }),
+      arrayBuffer && !url && /* @__PURE__ */ jsx7("div", { className: "hv-error", children: "Failed to load image." }),
+      url && /* @__PURE__ */ jsx7(
+        "img",
+        {
+          src: url,
+          alt: fileName,
+          style: { transform: `scale(${zoom})` },
+          className: "hv-image"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -641,37 +745,57 @@ function extractText(xml) {
 function PptxRenderer(props) {
   const [slides, setSlides] = useState5([]);
   const [thumbs, setThumbs] = useState5([]);
+  const [error, setError] = useState5(null);
+  const [loading, setLoading] = useState5(false);
   useEffect5(() => {
     let cancelled = false;
+    setError(null);
+    setLoading(true);
     (async () => {
       setSlides([]);
       setThumbs([]);
       if (!props.arrayBuffer) {
         props.onSlideCount(1);
         setSlides([{ index: 1, text: "No content" }]);
+        setError("No PPTX data provided.");
+        setLoading(false);
         return;
       }
-      const zip = await JSZip.loadAsync(props.arrayBuffer);
-      const files = Object.keys(zip.files).filter((p) => /^ppt\/slides\/slide\d+\.xml$/.test(p)).sort((a, b) => {
-        const na = Number(a.match(/slide(\d+)\.xml/)?.[1] || 0);
-        const nb = Number(b.match(/slide(\d+)\.xml/)?.[1] || 0);
-        return na - nb;
-      });
-      const out = [];
-      for (let i = 0; i < files.length; i++) {
-        const xml = await zip.file(files[i]).async("string");
-        out.push({ index: i + 1, text: extractText(xml) });
+      try {
+        const zip = await JSZip.loadAsync(props.arrayBuffer);
+        const files = Object.keys(zip.files).filter((p) => /^ppt\/slides\/slide\d+\.xml$/.test(p)).sort((a, b) => {
+          const na = Number(a.match(/slide(\d+)\.xml/)?.[1] || 0);
+          const nb = Number(b.match(/slide(\d+)\.xml/)?.[1] || 0);
+          return na - nb;
+        });
+        const out = [];
+        for (let i = 0; i < files.length; i++) {
+          const xml = await zip.file(files[i]).async("string");
+          out.push({ index: i + 1, text: extractText(xml) });
+        }
+        if (cancelled) return;
+        const count = Math.max(1, out.length);
+        props.onSlideCount(count);
+        setSlides(out.length ? out : [{ index: 1, text: "(empty)" }]);
+        setThumbs(
+          Array.from(
+            { length: count },
+            (_, i) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgThumb(i + 1))}`
+          )
+        );
+      } catch (e) {
+        props.onSlideCount(1);
+        setSlides([
+          { index: 1, text: "Unable to render this .pptx in-browser." }
+        ]);
+        setThumbs([void 0]);
+        setError(
+          "Failed to load PPTX. " + (e instanceof Error ? e.message : "")
+        );
+      } finally {
+        setLoading(false);
       }
-      if (cancelled) return;
-      const count = Math.max(1, out.length);
-      props.onSlideCount(count);
-      setSlides(out.length ? out : [{ index: 1, text: "(empty)" }]);
-      setThumbs(Array.from({ length: count }, (_, i) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgThumb(i + 1))}`));
-    })().catch(() => {
-      props.onSlideCount(1);
-      setSlides([{ index: 1, text: "Unable to render this .pptx in-browser." }]);
-      setThumbs([void 0]);
-    });
+    })();
     return () => {
       cancelled = true;
     };
@@ -680,19 +804,43 @@ function PptxRenderer(props) {
     props.onThumbs(thumbs);
   }, [thumbs]);
   const pagesToShow = useMemo5(() => {
-    if (props.layout === "side-by-side") return [props.currentPage, Math.min(slides.length || props.currentPage + 1, props.currentPage + 1)];
+    if (props.layout === "side-by-side")
+      return [
+        props.currentPage,
+        Math.min(slides.length || props.currentPage + 1, props.currentPage + 1)
+      ];
     return [props.currentPage];
   }, [props.currentPage, props.layout, slides.length]);
-  return /* @__PURE__ */ jsx8("div", { className: "hv-doc", children: /* @__PURE__ */ jsx8("div", { className: props.layout === "side-by-side" ? "hv-pages hv-pages--two" : "hv-pages", children: pagesToShow.map((p) => {
-    const s = slides[p - 1];
-    return /* @__PURE__ */ jsxs8("div", { className: "hv-slide", tabIndex: 0, onFocus: () => props.onCurrentPageChange(p), children: [
-      /* @__PURE__ */ jsxs8("div", { className: "hv-slide-title", children: [
-        "Slide ",
-        p
-      ] }),
-      /* @__PURE__ */ jsx8("div", { className: "hv-slide-text", children: s?.text || "" })
-    ] }, p);
-  }) }) });
+  return /* @__PURE__ */ jsxs8("div", { className: "hv-doc", children: [
+    loading && /* @__PURE__ */ jsx8("div", { className: "hv-loading", children: "Loading PPTX\u2026" }),
+    error && /* @__PURE__ */ jsx8("div", { className: "hv-error", children: error }),
+    !loading && !error && (!slides || slides.length === 0) && /* @__PURE__ */ jsx8("div", { className: "hv-error", children: "No slides to display." }),
+    !error && slides && slides.length > 0 && /* @__PURE__ */ jsx8(
+      "div",
+      {
+        className: props.layout === "side-by-side" ? "hv-pages hv-pages--two" : "hv-pages",
+        children: pagesToShow.map((p) => {
+          const s = slides[p - 1];
+          return /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: "hv-slide",
+              tabIndex: 0,
+              onFocus: () => props.onCurrentPageChange(p),
+              children: [
+                /* @__PURE__ */ jsxs8("div", { className: "hv-slide-title", children: [
+                  "Slide ",
+                  p
+                ] }),
+                /* @__PURE__ */ jsx8("div", { className: "hv-slide-text", children: s?.text || "" })
+              ]
+            },
+            p
+          );
+        })
+      }
+    )
+  ] });
 }
 function svgThumb(n) {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="180" height="100"><rect width="100%" height="100%" rx="12" fill="#111827"/><text x="50%" y="54%" font-size="18" fill="#e5e7eb" text-anchor="middle">${n}</text></svg>`;