@zerohive/hive-viewer 0.2.0 → 0.2.2

package/README.md

@@ -1,3 +1,36 @@
+# ModalViewer Usage Example
+
+You can use the ModalViewer component to display any content (such as DocumentViewer) in a modal dialog. Here is a simple example:
+
+```tsx
+import React, { useState } from 'react';
+import { ModalViewer } from './src/components/ModalViewer';
+import { DocumentViewer } from './src/components/DocumentViewer';
+import './src/components/ModalViewer.css';
+
+export default function App() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Document Modal</button>
+      <ModalViewer open={open} onClose={() => setOpen(false)}>
+        <DocumentViewer url="/path/to/document.pdf" />
+      </ModalViewer>
+    </>
+  );
+}
+```
+
+**Props:**
+
+- `open` (boolean): Whether the modal is visible.
+- `onClose` (function): Called when the modal requests to close (overlay click, ESC, close button).
+- `children` (ReactNode): Content to display inside the modal.
+- `ariaLabel` (optional string): Accessibility label for the modal dialog.
+
+**Styling:**
+
+Import `ModalViewer.css` for default modal styles, or customize as needed.
 # @zerohive/hive-viewer
 
 A self-hostable, browser-first document viewer/editor for React and Next.js.
@@ -11,13 +44,15 @@ npm i @zerohive/hive-viewer
 Import styles once in your app:
 
 ```ts
-import '@zerohive/hive-viewer/styles.css';
+import "@zerohive/hive-viewer/styles.css";
 ```
 
 ## Usage
 
+### Basic Usage
+
 ```tsx
-import { DocumentViewer } from '@zerohive/hive-viewer';
+import { DocumentViewer } from "@zerohive/hive-viewer";
 
 export default function Page() {
   return (
@@ -28,17 +63,99 @@ export default function Page() {
       fileType="pdf"
       allowSigning
       onSignRequest={async () => ({
-        signatureImageUrl: 'https://.../sig.png',
-        signedBy: 'Jane Doe',
+        signatureImageUrl: "https://.../sig.png",
+        signedBy: "Jane Doe",
         dateSigned: new Date().toISOString(),
-        comment: 'Approved'
+        comment: "Approved",
       })}
-      onSave={(b64, meta) => { /* persist */ }}
+      onSave={(b64, meta) => {
+        /* persist */
+      }}
     />
   );
 }
 ```
 
+### Using in a Modal (Recommended)
+
+Most consumers use the viewer in a modal dialog. Here is a recommended pattern:
+
+```tsx
+import React, { useState } from "react";
+import { DocumentViewer } from "@zerohive/hive-viewer";
+
+function ModalDocViewer({ open, onClose, fileUrl, fileName, fileType }) {
+  if (!open) return null;
+  return (
+    <div
+      style={{
+        position: "fixed",
+        inset: 0,
+        background: "rgba(0,0,0,0.45)",
+        zIndex: 1000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <div
+        style={{
+          background: "#fff",
+          borderRadius: 16,
+          maxWidth: "90vw",
+          maxHeight: "90vh",
+          overflow: "auto",
+          position: "relative",
+          padding: 0,
+          boxShadow: "0 8px 32px rgba(0,0,0,0.25)",
+        }}
+      >
+        <button
+          onClick={onClose}
+          aria-label="Close"
+          style={{
+            position: "absolute",
+            top: 12,
+            right: 16,
+            background: "none",
+            border: "none",
+            fontSize: "2rem",
+            color: "#888",
+            cursor: "pointer",
+            zIndex: 1,
+          }}
+        >
+          ×
+        </button>
+        <DocumentViewer
+          mode="view"
+          fileUrl={fileUrl}
+          fileName={fileName}
+          fileType={fileType}
+        />
+      </div>
+    </div>
+  );
+}
+
+// Usage example:
+export default function Example() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open Document</button>
+      <ModalDocViewer
+        open={open}
+        onClose={() => setOpen(false)}
+        fileUrl="https://example.com/my.pdf"
+        fileName="my.pdf"
+        fileType="pdf"
+      />
+    </>
+  );
+}
+```
+
 ## Signing Workflow (decoupled)
 
 - If `allowSigning={true}`, the toolbar shows **Sign Document**.

package/dist/index.cjs

@@ -39,7 +39,7 @@ var import_react6 = require("react");
 
 // 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",
@@ -62,7 +62,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) {
@@ -93,7 +103,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;
@@ -216,38 +227,60 @@ function PdfRenderer(props) {
   const { url, arrayBuffer } = props;
   const [doc, setDoc] = (0, import_react.useState)(null);
   const [pageCount, setPageCount] = (0, import_react.useState)(0);
-  const [rendered, setRendered] = (0, import_react.useState)(/* @__PURE__ */ new Map());
+  const [rendered, setRendered] = (0, import_react.useState)(
+    /* @__PURE__ */ new Map()
+  );
   const [thumbs, setThumbs] = (0, import_react.useState)([]);
   const [size, setSize] = (0, import_react.useState)({ w: 840, h: 1188 });
+  const [error, setError] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(false);
   const containerRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     try {
-      import_pdfjs_dist.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import_meta.url).toString();
+      import_pdfjs_dist.GlobalWorkerOptions.workerSrc = new URL(
+        "pdfjs-dist/build/pdf.worker.min.mjs",
+        import_meta.url
+      ).toString();
     } catch {
     }
   }, []);
   (0, import_react.useEffect)(() => {
     let cancel = false;
+    setError(null);
+    setLoading(true);
     (async () => {
       setDoc(null);
       setRendered(/* @__PURE__ */ new Map());
       setThumbs([]);
-      if (!url && !arrayBuffer) return;
-      const task = (0, import_pdfjs_dist.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 = (0, import_pdfjs_dist.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;
     };
@@ -269,37 +302,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 {
         }
@@ -308,13 +347,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) {
@@ -327,22 +369,37 @@ function PdfRenderer(props) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-doc", ref: containerRef, onWheel, children: [
     !doc ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-loading", children: "Loading PDF\u2026" }) : null,
-    doc ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-page", style: { width: size.w, height: size.h }, onClick: (e) => clickPlace(e, p), children: c ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-loading", children: "Rendering\u2026" }) }, p);
-    }) }) : null
+    doc ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "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__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "hv-page",
+              style: { width: size.w, height: size.h },
+              onClick: (e) => clickPlace(e, p),
+              children: c ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-loading", children: "Rendering\u2026" })
+            },
+            p
+          );
+        })
+      }
+    ) : null
   ] });
 }
 
@@ -457,17 +514,29 @@ var RichTextEditor = (0, import_react2.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;
@@ -631,7 +700,11 @@ function ensureExt(name, ext) {
 // src/renderers/ImageRenderer.tsx
 var import_react4 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function ImageRenderer({ arrayBuffer, fileType, fileName }) {
+function ImageRenderer({
+  arrayBuffer,
+  fileType,
+  fileName
+}) {
   const [zoom, setZoom] = (0, import_react4.useState)(1);
   const url = (0, import_react4.useMemo)(() => {
     if (!arrayBuffer) return void 0;
@@ -647,14 +720,42 @@ function ImageRenderer({ arrayBuffer, fileType, fileName }) {
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-mini-toolbar", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-title", children: fileName }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-spacer" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "hv-btn", onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)), children: "-" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "hv-btn",
+          onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)),
+          children: "-"
+        }
+      ),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-zoom", children: [
         Math.round(zoom * 100),
         "%"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "hv-btn", onClick: () => setZoom((z) => Math.min(4, z + 0.25)), children: "+" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "hv-btn",
+          onClick: () => setZoom((z) => Math.min(4, z + 0.25)),
+          children: "+"
+        }
+      )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-center", children: url ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("img", { src: url, alt: fileName, style: { transform: `scale(${zoom})` }, className: "hv-image" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-loading", children: "Loading\u2026" }) })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-center", children: [
+      !arrayBuffer && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-error", children: "No image data provided." }),
+      arrayBuffer && !url && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-error", children: "Failed to load image." }),
+      url && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "img",
+        {
+          src: url,
+          alt: fileName,
+          style: { transform: `scale(${zoom})` },
+          className: "hv-image"
+        }
+      )
+    ] })
   ] });
 }
 
@@ -671,37 +772,57 @@ function extractText(xml) {
 function PptxRenderer(props) {
   const [slides, setSlides] = (0, import_react5.useState)([]);
   const [thumbs, setThumbs] = (0, import_react5.useState)([]);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react5.useState)(false);
   (0, import_react5.useEffect)(() => {
     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 import_jszip.default.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 import_jszip.default.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;
     };
@@ -710,19 +831,43 @@ function PptxRenderer(props) {
     props.onThumbs(thumbs);
   }, [thumbs]);
   const pagesToShow = (0, import_react5.useMemo)(() => {
-    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__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-doc", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-slide", tabIndex: 0, onFocus: () => props.onCurrentPageChange(p), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-slide-title", children: [
-        "Slide ",
-        p
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-slide-text", children: s?.text || "" })
-    ] }, p);
-  }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-doc", children: [
+    loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-loading", children: "Loading PPTX\u2026" }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-error", children: error }),
+    !loading && !error && (!slides || slides.length === 0) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-error", children: "No slides to display." }),
+    !error && slides && slides.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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__ */ (0, import_jsx_runtime8.jsxs)(
+            "div",
+            {
+              className: "hv-slide",
+              tabIndex: 0,
+              onFocus: () => props.onCurrentPageChange(p),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-slide-title", children: [
+                  "Slide ",
+                  p
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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>`;