@zerohive/hive-viewer 0.2.1 → 0.2.2

package/dist/index.mjs

@@ -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
   ] });
 }
 
@@ -613,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;
@@ -629,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"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -653,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;
     };
@@ -692,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>`;

package/dist/styles.css

@@ -1,3 +1,78 @@
+/* Focus ring for accessibility */
+.hv-btn:focus, .hv-thumb:focus, .hv-modal-close:focus {
+	outline: 2px solid #6366f1;
+	outline-offset: 2px;
+	z-index: 2;
+}
+
+/* Modal overlay and modal polish */
+.hv-modal-overlay {
+	position: fixed;
+	inset: 0;
+	background: rgba(0,0,0,0.45);
+	z-index: 1000;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+}
+.hv-modal {
+	background: #fff;
+	border-radius: 16px;
+	max-width: 95vw;
+	max-height: 95vh;
+	overflow: auto;
+	position: relative;
+	padding: 0;
+	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+	display: flex;
+	flex-direction: column;
+}
+.hv-modal-close {
+	position: absolute;
+	top: 12px;
+	right: 16px;
+	background: none;
+	border: none;
+	font-size: 2rem;
+	color: #888;
+	cursor: pointer;
+	z-index: 1;
+}
+
+/* Error and loading states */
+.hv-error {
+	padding: 18px 24px;
+	color: #b91c1c;
+	background: #fef2f2;
+	border-radius: 10px;
+	margin: 16px auto;
+	max-width: 480px;
+	font-size: 1rem;
+	text-align: center;
+}
+.hv-loading {
+	padding: 18px 24px;
+	color: #64748b;
+	background: #f1f5f9;
+	border-radius: 10px;
+	margin: 16px auto;
+	max-width: 480px;
+	font-size: 1rem;
+	text-align: center;
+}
+
+/* Touch-friendly spacing */
+@media (pointer: coarse) {
+	.hv-btn, .hv-thumb, .hv-modal-close {
+		min-height: 44px;
+		min-width: 44px;
+		font-size: 1.1rem;
+	}
+	.hv-toolbar, .hv-ribbon {
+		padding: 16px 8px;
+	}
+}
 .hv-root{--hv-bg:#0b1020;--hv-fg:#e5e7eb;--hv-muted:#9ca3af;--hv-panel:#0f172a;--hv-border:rgba(255,255,255,.10);--hv-btn:rgba(255,255,255,.06);--hv-btnh:rgba(255,255,255,.10);background:var(--hv-bg);color:var(--hv-fg);border:1px solid var(--hv-border);border-radius:16px;overflow:hidden}
 .hv-root[data-hv-theme="light"]{--hv-bg:#f8fafc;--hv-fg:#0f172a;--hv-muted:#64748b;--hv-panel:#ffffff;--hv-border:rgba(15,23,42,.12);--hv-btn:rgba(15,23,42,.06);--hv-btnh:rgba(15,23,42,.10)}
 .hv-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--hv-panel);border-bottom:1px solid var(--hv-border)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zerohive/hive-viewer",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -43,6 +43,8 @@
     "xlsx": "^0.18.5"
   },
   "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^25.0.9",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "react": "^18.3.1",