@zerohive/hive-viewer 0.2.7 → 1.0.1

package/dist/index.mjs

@@ -1,17 +1,10 @@
 // src/components/DocumentViewer.tsx
-import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState7 } from "react";
 
 // src/editors/RichTextEditor.tsx
-import html2canvas from "html2canvas";
 import mammoth from "mammoth";
+import { useEffect, useRef, useState } from "react";
 import MarkdownIt from "markdown-it";
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef
-} from "react";
 
 // src/utils/sanitize.ts
 import DOMPurify from "dompurify";
@@ -23,129 +16,796 @@ function sanitizeHtml(html) {
 }
 
 // src/editors/RichTextEditor.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var PAGE_H = 1122;
-var RichTextEditor = forwardRef(
-  (props, ref) => {
-    const readOnly = props.mode === "view";
-    const md = useMemo(
-      () => new MarkdownIt({ html: false, linkify: true, breaks: true }),
-      []
-    );
-    const scrollerRef = useRef(null);
-    const editorRef = useRef(null);
-    const captureRef = useRef(null);
-    const initialized = useRef(false);
-    useEffect(() => {
-      if (initialized.current) return;
-      (async () => {
-        if (props.mode === "create") {
-          editorRef.current.innerHTML = "<p><br/></p>";
-          initialized.current = true;
-          return;
-        }
-        if (!props.arrayBuffer) return;
-        if (props.fileType === "docx") {
-          const res = await mammoth.convertToHtml({
+import { jsx } from "react/jsx-runtime";
+function RichTextEditor(props) {
+  const editorRef = useRef(null);
+  const [contentHtml, setContentHtml] = useState("");
+  const [loading, setLoading] = useState(false);
+  const mdParser = useRef(new MarkdownIt({ html: true, linkify: true }));
+  useEffect(() => {
+    const loadDoc = async () => {
+      if (!props.arrayBuffer) return;
+      setLoading(true);
+      try {
+        if (props.fileName.endsWith(".docx") || props.fileType === "docx") {
+          const result = await mammoth.convertToHtml({
             arrayBuffer: props.arrayBuffer
           });
-          editorRef.current.innerHTML = sanitizeHtml(
-            res.value || "<p><br/></p>"
-          );
+          setContentHtml(sanitizeHtml(result.value));
         } else {
-          const text = new TextDecoder().decode(props.arrayBuffer);
-          editorRef.current.innerHTML = props.fileType === "md" ? sanitizeHtml(md.render(text)) : `<pre>${escapeHtml(text)}</pre>`;
+          const decoder = new TextDecoder("utf-8");
+          const text = decoder.decode(props.arrayBuffer);
+          if (props.fileName.endsWith(".md") || props.fileType === "md") {
+            const html = mdParser.current.render(text);
+            setContentHtml(sanitizeHtml(html));
+          } else {
+            setContentHtml(
+              `<pre style="white-space: pre-wrap; font-family: monospace;">${text}</pre>`
+            );
+          }
         }
-        initialized.current = true;
-      })();
-    }, [props.arrayBuffer, props.fileType, props.mode, md]);
-    useEffect(() => {
-      const el = scrollerRef.current;
-      if (!el) return;
-      const recompute = () => props.onPageCount(Math.max(1, Math.ceil(el.scrollHeight / PAGE_H)));
-      recompute();
-      const ro = new ResizeObserver(recompute);
-      ro.observe(el);
-      return () => ro.disconnect();
-    }, [props.headerFooterEnabled]);
-    function exec(cmd) {
-      if (readOnly) return;
-      document.execCommand(cmd);
-      editorRef.current?.focus();
-    }
-    function onClickPage(e) {
-      if (!props.armedSignatureUrl) return;
-      const scroller = scrollerRef.current;
-      if (!scroller) return;
-      const rect = e.currentTarget.getBoundingClientRect();
-      const absY = scroller.scrollTop + (e.clientY - rect.top);
-      const page = Math.floor(absY / PAGE_H) + 1;
-      props.onPlaceSignature({
-        page,
-        x: (e.clientX - rect.left) / rect.width,
-        y: absY % PAGE_H / PAGE_H,
-        w: 0.25,
-        h: 0.1
-      });
-    }
-    async function requestThumbnail(index) {
-      const scroller = scrollerRef.current;
-      const capture = captureRef.current;
-      if (!scroller || !capture) return;
-      const old = scroller.scrollTop;
-      scroller.scrollTop = index * PAGE_H;
-      await new Promise((r) => requestAnimationFrame(r));
-      try {
-        const canvas = await html2canvas(capture, {
-          scale: 0.25,
-          useCORS: true
-        });
-        return canvas.toDataURL("image/png");
+        props.onPageCount(1);
+      } catch (err) {
+        console.error("Doc Conversion failed", err);
+        setContentHtml("<p style='color:red'>Error parsing document.</p>");
       } finally {
-        scroller.scrollTop = old;
+        setLoading(false);
       }
+    };
+    loadDoc();
+  }, [props.arrayBuffer, props.fileName, props.fileType]);
+  return /* @__PURE__ */ jsx("div", { className: "hv-view-single", children: /* @__PURE__ */ jsx("div", { className: "hv-page-container", children: loading ? /* @__PURE__ */ jsx("div", { className: "p-12 text-center text-gray-400", children: "Processing text..." }) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: editorRef,
+      className: "hv-docx-content",
+      contentEditable: props.mode === "edit" || props.mode === "create",
+      dangerouslySetInnerHTML: { __html: contentHtml },
+      suppressContentEditableWarning: true
     }
-    async function save(exportPdf) {
-      const html = editorRef.current?.innerHTML ?? "";
-      const stitched = `<!doctype html><html><body>${html}</body></html>`;
-      const b64 = btoa(unescape(encodeURIComponent(stitched)));
-      props.onSave(b64, {
-        fileName: props.fileName,
-        fileType: props.fileType,
-        exportedAsPdf: exportPdf,
-        annotations: { signaturePlacements: props.signaturePlacements }
+  ) }) });
+}
+
+// src/editors/SpreadsheetEditor.tsx
+import {
+  forwardRef,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useState as useState2
+} from "react";
+import * as XLSX from "xlsx";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var SpreadsheetEditor = forwardRef(function SpreadsheetEditor2(props, ref) {
+  const readonly = props.mode === "view";
+  const [data, setData] = useState2([]);
+  const [cols, setCols] = useState2([]);
+  useEffect2(() => {
+    if (!props.arrayBuffer) return;
+    try {
+      const wb = XLSX.read(props.arrayBuffer, { type: "array" });
+      const wsName = wb.SheetNames[0];
+      const ws = wb.Sheets[wsName];
+      const jsonData = XLSX.utils.sheet_to_json(ws, {
+        header: 1,
+        defval: ""
+      });
+      const minRows = 40;
+      const minCols = 15;
+      const rows = Math.max(minRows, jsonData.length);
+      const colCount = Math.max(minCols, jsonData[0]?.length || 0);
+      const normalized = Array.from({ length: rows }, (_, r) => {
+        const row = jsonData[r] || [];
+        return Array.from(
+          { length: colCount },
+          (_2, c) => row[c] !== void 0 && row[c] !== null ? String(row[c]) : ""
+        );
+      });
+      setData(normalized);
+      const headers = Array.from({ length: colCount }, (_, i) => {
+        let letter = "";
+        let temp = i;
+        while (temp >= 0) {
+          letter = String.fromCharCode(temp % 26 + 65) + letter;
+          temp = Math.floor(temp / 26) - 1;
+        }
+        return letter;
       });
+      setCols(headers);
+    } catch (e) {
+      console.error("Spreadsheet load error:", e);
+    }
+  }, [props.arrayBuffer]);
+  async function save(exportPdf) {
+    if (!props.onSave) return;
+    const ws = XLSX.utils.aoa_to_sheet(data);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
+    const out = XLSX.write(wb, { type: "array", bookType: "xlsx" });
+    const bytes = new Uint8Array(out);
+    let binary = "";
+    for (let i = 0; i < bytes.byteLength; i++) {
+      binary += String.fromCharCode(bytes[i]);
     }
-    useImperativeHandle(ref, () => ({
-      save,
-      requestThumbnail
-    }));
-    return /* @__PURE__ */ jsxs("div", { className: "hv-root", children: [
-      /* @__PURE__ */ jsxs("div", { className: "hv-toolbar", children: [
-        /* @__PURE__ */ jsx("button", { onClick: () => exec("bold"), disabled: readOnly, children: "B" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => exec("italic"), disabled: readOnly, children: "I" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => exec("underline"), disabled: readOnly, children: "U" }),
-        props.armedSignatureUrl && /* @__PURE__ */ jsx("span", { className: "hv-hint", children: "Click page to place signature" })
+    props.onSave(btoa(binary), {
+      fileName: props.fileName,
+      fileType: "xlsx",
+      exportedAsPdf: !!exportPdf
+    });
+  }
+  useImperativeHandle(ref, () => ({ save }));
+  return /* @__PURE__ */ jsx2("div", { className: "hv-view-single", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "hv-page-container",
+      style: {
+        width: "auto",
+        maxWidth: "95vw",
+        minWidth: "800px",
+        padding: 0,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              background: "#f8f9fa",
+              borderBottom: "1px solid #e2e8f0",
+              padding: "8px 16px",
+              fontSize: "12px",
+              color: "#64748b",
+              display: "flex",
+              gap: "12px",
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsx2("span", { children: "fx" }),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    background: "white",
+                    border: "1px solid #cbd5e1",
+                    flex: 1,
+                    height: "18px",
+                    borderRadius: "2px"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              overflow: "auto",
+              // FIX: Dynamic height ensures bottom isn't cut off on small screens
+              maxHeight: "calc(100vh - 140px)",
+              minHeight: "400px",
+              position: "relative",
+              // FIX: Padding prevents border clipping (first row/col edges)
+              padding: "1px"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "table",
+              {
+                style: {
+                  borderCollapse: "collapse",
+                  minWidth: "100%",
+                  tableLayout: "fixed"
+                },
+                children: [
+                  /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx2(
+                      "th",
+                      {
+                        style: {
+                          width: "40px",
+                          background: "#f1f5f9",
+                          border: "1px solid #cbd5e1",
+                          position: "sticky",
+                          top: 0,
+                          left: 0,
+                          zIndex: 30
+                          // Increased zIndex
+                        }
+                      }
+                    ),
+                    cols.map((col, i) => /* @__PURE__ */ jsx2(
+                      "th",
+                      {
+                        style: {
+                          minWidth: "100px",
+                          background: "#f1f5f9",
+                          border: "1px solid #cbd5e1",
+                          color: "#475569",
+                          fontSize: "11px",
+                          fontWeight: 600,
+                          padding: "4px",
+                          position: "sticky",
+                          top: 0,
+                          zIndex: 20
+                          // Increased zIndex
+                        },
+                        children: col
+                      },
+                      i
+                    ))
+                  ] }) }),
+                  /* @__PURE__ */ jsx2("tbody", { children: data.map((row, r) => /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx2(
+                      "td",
+                      {
+                        style: {
+                          background: "#f1f5f9",
+                          border: "1px solid #cbd5e1",
+                          textAlign: "center",
+                          fontSize: "11px",
+                          color: "#64748b",
+                          position: "sticky",
+                          left: 0,
+                          zIndex: 20
+                          // Increased zIndex to stay above cells
+                        },
+                        children: r + 1
+                      }
+                    ),
+                    row.map((cell, c) => /* @__PURE__ */ jsx2(
+                      "td",
+                      {
+                        contentEditable: !readonly,
+                        suppressContentEditableWarning: true,
+                        onBlur: (e) => {
+                          const val = e.currentTarget.innerText;
+                          setData((prev) => {
+                            const next = [...prev];
+                            next[r] = [...next[r]];
+                            next[r][c] = val;
+                            return next;
+                          });
+                        },
+                        style: {
+                          border: "1px solid #e2e8f0",
+                          padding: "4px 8px",
+                          fontSize: "13px",
+                          color: "#1e293b",
+                          minWidth: "100px",
+                          whiteSpace: "nowrap",
+                          overflow: "hidden",
+                          outline: "none",
+                          zIndex: 1
+                        },
+                        children: cell
+                      },
+                      c
+                    ))
+                  ] }, r)) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) });
+});
+
+// src/renderers/ImageRenderer.tsx
+import { useEffect as useEffect3, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ImageRenderer({
+  arrayBuffer,
+  fileType,
+  fileName
+}) {
+  const [zoom, setZoom] = useState3(1);
+  const url = useMemo2(() => {
+    if (!arrayBuffer) {
+      return void 0;
+    }
+    const mime = fileType === "svg" ? "image/svg+xml" : fileType === "png" ? "image/png" : "image/jpeg";
+    return URL.createObjectURL(new Blob([arrayBuffer], { type: mime }));
+  }, [arrayBuffer, fileType]);
+  useEffect3(() => {
+    return () => {
+      if (url) {
+        URL.revokeObjectURL(url);
+      }
+    };
+  }, [url]);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col h-full bg-gray-50", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between px-6 py-4 bg-white border-b border-gray-200", children: [
+      /* @__PURE__ */ jsx3("h2", { className: "text-sm font-medium text-gray-700 truncate max-w-md", children: fileName }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 bg-gray-100 rounded-lg p-1", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)),
+            className: "w-9 h-9 flex items-center justify-center rounded-md bg-white hover:bg-gray-50 text-gray-700 transition-all shadow-sm hover:shadow",
+            "aria-label": "Zoom out",
+            children: /* @__PURE__ */ jsx3(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx3(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M20 12H4"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { className: "text-sm font-semibold text-gray-700 min-w-[3.5rem] text-center px-2", children: [
+          Math.round(zoom * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: () => setZoom((z) => Math.min(4, z + 0.25)),
+            className: "w-9 h-9 flex items-center justify-center rounded-md bg-white hover:bg-gray-50 text-gray-700 transition-all shadow-sm hover:shadow",
+            "aria-label": "Zoom in",
+            children: /* @__PURE__ */ jsx3(
+              "svg",
+              {
+                className: "w-4 h-4",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                children: /* @__PURE__ */ jsx3(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M12 4v16m8-8H4"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto flex items-center justify-center p-8", children: [
+      !arrayBuffer && /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-gray-200 flex items-center justify-center", children: /* @__PURE__ */ jsx3(
+          "svg",
+          {
+            className: "w-8 h-8 text-gray-400",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-500", children: "No image data provided" })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "hv-scroll", ref: scrollerRef, onClick: onClickPage, children: /* @__PURE__ */ jsx("div", { className: "hv-pageStage", ref: captureRef, children: /* @__PURE__ */ jsx(
+      arrayBuffer && !url && /* @__PURE__ */ jsxs2("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx3("div", { className: "w-16 h-16 mx-auto mb-3 rounded-full bg-red-100 flex items-center justify-center", children: /* @__PURE__ */ jsx3(
+          "svg",
+          {
+            className: "w-8 h-8 text-red-500",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx3(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx3("p", { className: "text-sm text-gray-600", children: "Failed to load image" })
+      ] }),
+      url && /* @__PURE__ */ jsx3(
         "div",
         {
-          ref: editorRef,
-          className: `hv-editor ${readOnly ? "ro" : ""}`,
-          contentEditable: !readOnly,
-          suppressContentEditableWarning: true
+          style: { transform: `scale(${zoom})` },
+          className: "transition-transform duration-200 origin-center",
+          children: /* @__PURE__ */ jsx3(
+            "img",
+            {
+              src: url,
+              alt: fileName,
+              style: { transform: `scale(${zoom})` },
+              className: "max-w-full h-auto rounded-lg shadow-lg transition-transform duration-200"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/renderers/PdfRenderer.tsx
+import {
+  getDocument,
+  GlobalWorkerOptions
+} from "pdfjs-dist";
+import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var PDF_WORKER_URL = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.10.38/pdf.worker.min.mjs";
+function PdfRenderer(props) {
+  const { url, arrayBuffer, layout, currentPage } = props;
+  const [doc, setDoc] = useState4(null);
+  const [error, setError] = useState4(null);
+  useEffect4(() => {
+    if (!GlobalWorkerOptions.workerSrc) {
+      GlobalWorkerOptions.workerSrc = PDF_WORKER_URL;
+    }
+    let active = true;
+    const loadPdf = async () => {
+      if (!url && !arrayBuffer) return;
+      setError(null);
+      try {
+        const dataSource = arrayBuffer ? { data: arrayBuffer.slice(0) } : { url };
+        const loadingTask = getDocument(dataSource);
+        const pdf = await loadingTask.promise;
+        if (active) {
+          setDoc(pdf);
+          props.onPageCount(pdf.numPages);
+          generateThumbnails(pdf);
+        }
+      } catch (err) {
+        console.error("PDF Load Error:", err);
+        if (active) setError(err.message || "Failed to load PDF");
+      }
+    };
+    loadPdf();
+    return () => {
+      active = false;
+    };
+  }, [url, arrayBuffer]);
+  const generateThumbnails = async (pdf) => {
+    try {
+      const thumbs = [];
+      const num = Math.min(pdf.numPages, 5);
+      for (let i = 1; i <= num; i++) {
+        const page = await pdf.getPage(i);
+        const viewport = page.getViewport({ scale: 0.2 });
+        const canvas = document.createElement("canvas");
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        const ctx = canvas.getContext("2d");
+        if (ctx) {
+          await page.render({ canvasContext: ctx, viewport }).promise;
+          thumbs.push(canvas.toDataURL());
         }
-      ) }) })
-    ] });
+      }
+      props.onThumbs(thumbs);
+    } catch (e) {
+    }
+  };
+  const pagesToRender = useMemo3(() => {
+    if (!doc) return [];
+    const p = Math.max(1, Math.min(currentPage, doc.numPages));
+    if (layout === "side-by-side" && doc.numPages > 1) {
+      if (p === 1) return [1];
+      const left = p % 2 === 0 ? p : p - 1;
+      return left + 1 <= doc.numPages ? [left, left + 1] : [left];
+    }
+    return [p];
+  }, [doc, currentPage, layout]);
+  if (error) {
+    return /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "hv-page-container",
+        style: { padding: "32px", textAlign: "center", color: "#dc2626" },
+        children: [
+          /* @__PURE__ */ jsx4("strong", { children: "Error loading PDF" }),
+          /* @__PURE__ */ jsx4("p", { className: "text-sm mt-2", children: error })
+        ]
+      }
+    );
   }
-);
-function escapeHtml(s) {
-  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;");
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: `hv-doc-scroll ${layout === "side-by-side" ? "hv-view-double" : "hv-view-single"}`,
+      children: pagesToRender.map((page) => /* @__PURE__ */ jsx4(PdfPage, { doc, pageNum: page }, page))
+    }
+  );
+}
+function PdfPage({
+  doc,
+  pageNum
+}) {
+  const canvasRef = useRef2(null);
+  useEffect4(() => {
+    if (!doc || !canvasRef.current) return;
+    let active = true;
+    const render = async () => {
+      try {
+        const page = await doc.getPage(pageNum);
+        if (!active) return;
+        const scale = 1.5;
+        const viewport = page.getViewport({ scale });
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        canvas.width = viewport.width;
+        canvas.height = viewport.height;
+        canvas.style.width = `${viewport.width / scale}px`;
+        canvas.style.height = `${viewport.height / scale}px`;
+        await page.render({ canvasContext: ctx, viewport }).promise;
+      } catch (e) {
+        console.error("Page render error:", e);
+      }
+    };
+    render();
+    return () => {
+      active = false;
+    };
+  }, [doc, pageNum]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "hv-page-container",
+      style: {
+        minHeight: "600px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: /* @__PURE__ */ jsx4("canvas", { ref: canvasRef, className: "hv-pdf-canvas" })
+    }
+  );
 }
 
-// src/editors/SpreadsheetEditor.tsx
-import { forwardRef as forwardRef2, useEffect as useEffect2, useImperativeHandle as useImperativeHandle2, useMemo as useMemo2, useState as useState2 } from "react";
-import * as XLSX from "xlsx";
+// src/renderers/PptxRenderer.tsx
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
+import JSZip from "jszip";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var NS_P = "http://schemas.openxmlformats.org/presentationml/2006/main";
+var NS_A = "http://schemas.openxmlformats.org/drawingml/2006/main";
+function parseColor(solidFill) {
+  if (!solidFill) return void 0;
+  const srgbClr = solidFill.getElementsByTagNameNS(NS_A, "srgbClr")[0];
+  if (srgbClr) {
+    const val = srgbClr.getAttribute("val");
+    return val ? `#${val}` : void 0;
+  }
+  const schemeClr = solidFill.getElementsByTagNameNS(NS_A, "schemeClr")[0];
+  if (schemeClr) {
+    const val = schemeClr.getAttribute("val");
+    const colorMap = {
+      tx1: "#000000",
+      bg1: "#FFFFFF",
+      tx2: "#1F1F1F",
+      accent1: "#4472C4",
+      accent2: "#ED7D31",
+      accent3: "#A5A5A5",
+      accent4: "#FFC000",
+      accent5: "#5B9BD5",
+      accent6: "#70AD47"
+    };
+    return colorMap[val || ""] || "#000000";
+  }
+  return void 0;
+}
+function parseSlideXml(xml) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(xml, "application/xml");
+  let title;
+  let titleColor;
+  let bgColor;
+  const body = [];
+  const bgElements = doc.getElementsByTagNameNS(NS_P, "bg");
+  if (bgElements.length > 0) {
+    const bgPr = bgElements[0].getElementsByTagNameNS(NS_P, "bgPr")[0];
+    if (bgPr) {
+      const solidFill = bgPr.getElementsByTagNameNS(NS_A, "solidFill")[0];
+      bgColor = parseColor(solidFill);
+    }
+  }
+  const shapes = Array.from(doc.getElementsByTagNameNS(NS_P, "sp"));
+  shapes.forEach((shape) => {
+    const nvSpPr = shape.getElementsByTagNameNS(NS_P, "nvSpPr")[0];
+    const cNvPr = nvSpPr?.getElementsByTagNameNS(NS_P, "cNvPr")[0];
+    const name = cNvPr?.getAttribute("name")?.toLowerCase() || "";
+    const isTitle = name.includes("title") || name.includes("header");
+    const txBody = shape.getElementsByTagNameNS(NS_P, "txBody")[0];
+    if (!txBody) return;
+    const paragraphs = Array.from(txBody.getElementsByTagNameNS(NS_A, "p"));
+    paragraphs.forEach((p) => {
+      const runs = Array.from(p.getElementsByTagNameNS(NS_A, "r"));
+      runs.forEach((run) => {
+        const textEl = run.getElementsByTagNameNS(NS_A, "t")[0];
+        const text = textEl?.textContent?.trim() || "";
+        if (!text) return;
+        const rPr = run.getElementsByTagNameNS(NS_A, "rPr")[0];
+        let color;
+        let isBold = false;
+        let isItalic = false;
+        if (rPr) {
+          isBold = rPr.getAttribute("b") === "1";
+          isItalic = rPr.getAttribute("i") === "1";
+          color = parseColor(rPr.getElementsByTagNameNS(NS_A, "solidFill")[0]);
+        }
+        if (isTitle && !title) {
+          title = text;
+          titleColor = color;
+        } else {
+          body.push({ text, color, isBold, isItalic });
+        }
+      });
+    });
+  });
+  return { title, titleColor, body, bgColor };
+}
+function PptxRenderer(props) {
+  const [slides, setSlides] = useState5([]);
+  const [error, setError] = useState5(null);
+  useEffect5(() => {
+    if (!props.arrayBuffer) return;
+    const loadPptx = async () => {
+      try {
+        const zip = await JSZip.loadAsync(props.arrayBuffer);
+        const slidePaths = Object.keys(zip.files).filter((p) => /^ppt\/slides\/slide\d+\.xml$/.test(p)).sort((a, b) => {
+          const numA = parseInt(a.match(/\d+/)[0]);
+          const numB = parseInt(b.match(/\d+/)[0]);
+          return numA - numB;
+        });
+        const parsedSlides = [];
+        for (const path of slidePaths) {
+          const xml = await zip.files[path].async("string");
+          parsedSlides.push(parseSlideXml(xml));
+        }
+        setSlides(parsedSlides);
+        props.onPageCount(parsedSlides.length);
+        const thumbs = parsedSlides.map(
+          (_, i) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(
+            `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="56"><rect width="100%" height="100%" fill="#4f46e5"/><text x="50%" y="50%" fill="white" font-size="20" text-anchor="middle" dy=".3em">${i + 1}</text></svg>`
+          )}`
+        );
+        props.onThumbs(thumbs);
+      } catch (err) {
+        setError(err.message || "Failed to parse PPTX");
+      }
+    };
+    loadPptx();
+  }, [props.arrayBuffer]);
+  const pagesToShow = useMemo4(() => {
+    if (slides.length === 0) return [];
+    const validPage = Math.max(1, Math.min(props.currentPage, slides.length));
+    if (props.layout === "side-by-side" && slides.length > 1) {
+      if (validPage === 1) return [1];
+      const left = validPage % 2 === 0 ? validPage : validPage - 1;
+      return [left, left + 1].filter((p) => p <= slides.length);
+    }
+    return [validPage];
+  }, [slides.length, props.currentPage, props.layout]);
+  if (error) return /* @__PURE__ */ jsx5("div", { className: "text-red-500 p-8 text-center", children: error });
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
+      children: pagesToShow.map((p) => {
+        const slide = slides[p - 1];
+        if (!slide) return null;
+        return /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "hv-page-container",
+            style: {
+              width: "960px",
+              // Standard HD slide width
+              aspectRatio: "16/9",
+              padding: "48px",
+              backgroundColor: slide.bgColor || "#ffffff",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              position: "relative"
+              // For absolute positioning if we added it later
+            },
+            children: [
+              slide.title && /* @__PURE__ */ jsx5(
+                "h1",
+                {
+                  style: {
+                    fontSize: "42px",
+                    marginBottom: "32px",
+                    fontWeight: "bold",
+                    color: slide.titleColor || "#1a202c",
+                    lineHeight: 1.2
+                  },
+                  children: slide.title
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: { display: "flex", flexDirection: "column", gap: "16px" },
+                  children: slide.body.map((item, i) => /* @__PURE__ */ jsxs4(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "flex-start",
+                        gap: "12px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx5(
+                          "div",
+                          {
+                            style: {
+                              width: "8px",
+                              height: "8px",
+                              background: item.color || "#cbd5e1",
+                              borderRadius: "50%",
+                              marginTop: "12px",
+                              flexShrink: 0
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx5(
+                          "p",
+                          {
+                            style: {
+                              fontSize: "24px",
+                              color: item.color || "#4a5568",
+                              fontWeight: item.isBold ? "bold" : "normal",
+                              fontStyle: item.isItalic ? "italic" : "normal",
+                              margin: 0
+                            },
+                            children: item.text
+                          }
+                        )
+                      ]
+                    },
+                    i
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsx5(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    bottom: "20px",
+                    right: "30px",
+                    color: "#cbd5e1",
+                    fontWeight: "bold"
+                  },
+                  children: p
+                }
+              )
+            ]
+          },
+          p
+        );
+      })
+    }
+  );
+}
 
 // src/utils/fileSource.ts
 function guessFileType(name, explicit) {
@@ -166,15 +826,6 @@ function guessFileType(name, explicit) {
   ];
   return allowed.includes(ext) ? ext : "txt";
 }
-function arrayBufferToBase64(buf) {
-  const bytes = new Uint8Array(buf);
-  let binary = "";
-  const chunk = 32768;
-  for (let i = 0; i < bytes.length; i += chunk) {
-    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
-  }
-  return btoa(binary);
-}
 async function base64ToArrayBuffer(b64) {
   const bin = atob(b64);
   const len = bin.length;
@@ -232,965 +883,672 @@ async function resolveSource(args) {
   return { fileType, fileName, arrayBuffer: out.buffer, url: args.fileUrl };
 }
 
-// src/editors/SpreadsheetEditor.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var SpreadsheetEditor = forwardRef2(function SpreadsheetEditor2(props, ref) {
-  const readonly = props.mode === "view";
-  const [grid, setGrid] = useState2(() => Array.from({ length: 30 }, () => Array.from({ length: 12 }, () => "")));
-  useEffect2(() => {
-    if (!props.arrayBuffer) {
-      return;
-    }
-    try {
-      const wb = XLSX.read(props.arrayBuffer, { type: "array" });
-      const name = wb.SheetNames[0];
-      const ws = wb.Sheets[name];
-      const aoa = XLSX.utils.sheet_to_json(ws, { header: 1, raw: true });
-      const rows = Math.max(30, aoa.length);
-      const cols2 = Math.max(12, Math.max(...aoa.map((r) => r?.length ?? 0), 0));
-      const next = Array.from({ length: rows }, (_, r) => Array.from({ length: cols2 }, (_2, c) => {
-        const v = aoa[r]?.[c];
-        return v == null ? "" : String(v);
-      }));
-      setGrid(next);
-    } catch {
+// src/components/ThumbnailsSidebar.tsx
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ThumbnailsSidebar(props) {
+  const { isOpen, thumbnails, currentPage, onSelectPage } = props;
+  const activeRef = useRef3(null);
+  useEffect6(() => {
+    if (activeRef.current) {
+      activeRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest"
+      });
     }
-  }, [props.arrayBuffer]);
-  async function save(exportPdf) {
-    const ws = XLSX.utils.aoa_to_sheet(grid);
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
-    const out = XLSX.write(wb, { type: "array", bookType: "xlsx" });
-    const b64 = arrayBufferToBase64(out);
-    props.onSave(b64, { fileName: ensureExt(props.fileName, "xlsx"), fileType: "xlsx", exportedAsPdf: !!exportPdf });
-  }
-  useImperativeHandle2(ref, () => ({
-    save,
-    requestThumbnails: async () => void 0
-  }));
-  const cols = useMemo2(() => Array.from({ length: grid[0]?.length ?? 0 }, (_, i) => String.fromCharCode(65 + i % 26)), [grid]);
-  return /* @__PURE__ */ jsxs2("div", { className: "hv-sheet", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "hv-sheetbar", children: [
-      /* @__PURE__ */ jsx2("div", { className: "hv-sheetbar-title", children: props.fileName }),
-      !readonly ? /* @__PURE__ */ jsx2("button", { className: "hv-btn", type: "button", onClick: () => void save(false), children: props.locale["toolbar.save"] ?? "Save" }) : null
-    ] }),
-    /* @__PURE__ */ jsxs2("div", { className: "hv-sheetgrid", role: "table", "aria-label": "Spreadsheet", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "hv-sheetrow hv-sheetrow--header", role: "row", children: [
-        /* @__PURE__ */ jsx2("div", { className: "hv-sheetcell hv-sheetcell--corner", role: "columnheader" }),
-        cols.map((c, i) => /* @__PURE__ */ jsx2("div", { className: "hv-sheetcell hv-sheetcell--header", role: "columnheader", children: c }, i))
-      ] }),
-      grid.map((row, r) => /* @__PURE__ */ jsxs2("div", { className: "hv-sheetrow", role: "row", children: [
-        /* @__PURE__ */ jsx2("div", { className: "hv-sheetcell hv-sheetcell--header", role: "rowheader", children: r + 1 }),
-        row.map((val, c) => /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: "hv-sheetcell",
-            role: "cell",
-            contentEditable: !readonly,
-            suppressContentEditableWarning: true,
-            onInput: (e) => {
-              const text = e.currentTarget.textContent ?? "";
-              setGrid((prev) => {
-                const next = prev.map((rr) => rr.slice());
-                next[r][c] = text;
-                return next;
-              });
-            },
-            children: val
-          },
-          c
-        ))
-      ] }, r))
-    ] })
-  ] });
-});
-function ensureExt(name, ext) {
-  const base = name.includes(".") ? name.slice(0, name.lastIndexOf(".")) : name;
-  return `${base}.${ext}`;
+  }, [currentPage, isOpen]);
+  return /* @__PURE__ */ jsx6("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ jsxs5("div", { className: "hv-thumb-list", children: [
+    thumbnails.map((src, index) => {
+      const pageNum = index + 1;
+      const isActive = pageNum === currentPage;
+      return /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          ref: isActive ? activeRef : null,
+          className: `hv-thumb-item ${isActive ? "active" : ""}`,
+          onClick: () => onSelectPage(pageNum),
+          children: [
+            /* @__PURE__ */ jsx6("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ jsx6(
+              "img",
+              {
+                src,
+                alt: `Page ${pageNum}`,
+                className: "hv-thumb-img"
+              }
+            ) : (
+              // Skeleton loader state for thumbnail
+              /* @__PURE__ */ jsx6("div", { className: "w-full h-full bg-gray-100 animate-pulse flex items-center justify-center", children: /* @__PURE__ */ jsx6("span", { className: "text-xs text-gray-300", children: "..." }) })
+            ) }),
+            /* @__PURE__ */ jsxs5("span", { className: "hv-thumb-label", children: [
+              "Page ",
+              pageNum
+            ] })
+          ]
+        },
+        pageNum
+      );
+    }),
+    thumbnails.length === 0 && /* @__PURE__ */ jsx6("div", { className: "text-center p-4 text-xs text-gray-400", children: "No previews available" })
+  ] }) });
 }
 
-// src/renderers/ImageRenderer.tsx
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ImageRenderer({
-  arrayBuffer,
-  fileType,
-  fileName
-}) {
-  const [zoom, setZoom] = useState3(1);
-  const url = useMemo3(() => {
-    if (!arrayBuffer) {
-      return void 0;
+// src/components/Toolbar.tsx
+import {
+  ChevronLeft,
+  ChevronRight,
+  Grid2X2,
+  LayoutTemplate,
+  PanelLeftClose,
+  PanelLeftOpen,
+  PenLine
+} from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Toolbar(props) {
+  const {
+    fileName,
+    pageCount,
+    currentPage,
+    onPageChange,
+    layout,
+    onLayoutChange
+  } = props;
+  const handlePrev = () => {
+    if (currentPage > 1) onPageChange(currentPage - 1);
+  };
+  const handleNext = () => {
+    if (currentPage < pageCount) onPageChange(currentPage + 1);
+  };
+  const handleInput = (e) => {
+    const val = parseInt(e.target.value);
+    if (!isNaN(val) && val >= 1 && val <= pageCount) {
+      onPageChange(val);
     }
-    const mime = fileType === "svg" ? "image/svg+xml" : fileType === "png" ? "image/png" : "image/jpeg";
-    return URL.createObjectURL(new Blob([arrayBuffer], { type: mime }));
-  }, [arrayBuffer, fileType]);
-  useEffect3(() => {
-    return () => {
-      if (url) {
-        URL.revokeObjectURL(url);
-      }
-    };
-  }, [url]);
-  return /* @__PURE__ */ jsxs3("div", { className: "hv-doc", children: [
-    /* @__PURE__ */ jsxs3("div", { className: "hv-mini-toolbar", children: [
-      /* @__PURE__ */ jsx3("div", { className: "hv-title", children: fileName }),
-      /* @__PURE__ */ jsx3("div", { className: "hv-spacer" }),
-      /* @__PURE__ */ jsx3(
+  };
+  return /* @__PURE__ */ jsxs6("div", { className: "hv-toolbar", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: `hv-btn ${props.showThumbnails ? "hv-btn-active" : ""}`,
+          onClick: props.onToggleThumbnails,
+          title: "Toggle Thumbnails",
+          children: props.showThumbnails ? /* @__PURE__ */ jsx7(PanelLeftClose, { size: 20 }) : /* @__PURE__ */ jsx7(PanelLeftOpen, { size: 20 })
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: "hv-sep",
+          style: {
+            width: 1,
+            height: 24,
+            background: "var(--hv-border)",
+            margin: "0 8px"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "span",
+        {
+          style: {
+            fontWeight: 600,
+            fontSize: "14px",
+            maxWidth: 200,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          children: fileName || "Document"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ jsx7(
         "button",
         {
-          type: "button",
           className: "hv-btn",
-          onClick: () => setZoom((z) => Math.max(0.25, z - 0.25)),
-          children: "-"
+          disabled: currentPage <= 1,
+          onClick: handlePrev,
+          children: /* @__PURE__ */ jsx7(ChevronLeft, { size: 20 })
         }
       ),
-      /* @__PURE__ */ jsxs3("div", { className: "hv-zoom", children: [
-        Math.round(zoom * 100),
-        "%"
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 text-sm font-medium text-gray-600", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "number",
+            className: "w-12 text-center border rounded py-1 bg-gray-50 focus:bg-white focus:ring-2 focus:ring-indigo-500 outline-none transition-all",
+            value: currentPage,
+            onChange: handleInput,
+            min: 1,
+            max: pageCount
+          }
+        ),
+        /* @__PURE__ */ jsx7("span", { className: "text-gray-400", children: "/" }),
+        /* @__PURE__ */ jsx7("span", { children: pageCount })
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx7(
         "button",
         {
-          type: "button",
           className: "hv-btn",
-          onClick: () => setZoom((z) => Math.min(4, z + 0.25)),
-          children: "+"
+          disabled: currentPage >= pageCount,
+          onClick: handleNext,
+          children: /* @__PURE__ */ jsx7(ChevronRight, { size: 20 })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3("div", { className: "hv-center", children: [
-      !arrayBuffer && /* @__PURE__ */ jsx3("div", { className: "hv-error", children: "No image data provided." }),
-      arrayBuffer && !url && /* @__PURE__ */ jsx3("div", { className: "hv-error", children: "Failed to load image." }),
-      url && /* @__PURE__ */ jsx3(
-        "img",
+    /* @__PURE__ */ jsxs6("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ jsx7(
+        "button",
         {
-          src: url,
-          alt: fileName,
-          style: { transform: `scale(${zoom})` },
-          className: "hv-image"
+          className: `hv-btn ${layout === "single" ? "hv-btn-active text-indigo-600 bg-indigo-50" : ""}`,
+          onClick: () => onLayoutChange("single"),
+          title: "Single Page View",
+          children: /* @__PURE__ */ jsx7(LayoutTemplate, { size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          className: `hv-btn ${layout === "side-by-side" ? "hv-btn-active text-indigo-600 bg-indigo-50" : ""}`,
+          onClick: () => onLayoutChange("side-by-side"),
+          title: "Two Page View",
+          children: /* @__PURE__ */ jsx7(Grid2X2, { size: 18 })
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "div",
+        {
+          className: "hv-sep",
+          style: {
+            width: 1,
+            height: 24,
+            background: "var(--hv-border)",
+            margin: "0 8px"
+          }
+        }
+      ),
+      !props.disableSigning && /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          className: `hv-btn hv-btn-primary ${props.showSignatures ? "ring-2 ring-indigo-300" : ""}`,
+          onClick: props.onToggleSignatures,
+          title: "Sign Document",
+          children: [
+            /* @__PURE__ */ jsx7(PenLine, { size: 18, className: "mr-2" }),
+            /* @__PURE__ */ jsx7("span", { className: "hidden sm:inline", children: "Sign" })
+          ]
         }
       )
     ] })
   ] });
 }
 
-// src/renderers/PdfRenderer.tsx
-import {
-  getDocument,
-  GlobalWorkerOptions
-} from "pdfjs-dist";
-import { useEffect as useEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-function PdfRenderer(props) {
-  const { url, arrayBuffer } = props;
-  const [doc, setDoc] = useState4(null);
-  const [pageCount, setPageCount] = useState4(0);
-  const [rendered, setRendered] = useState4(
-    /* @__PURE__ */ new Map()
-  );
-  const [thumbs, setThumbs] = useState4([]);
-  const [size, setSize] = useState4({ w: 840, h: 1188 });
-  const [error, setError] = useState4(null);
-  const [loading, setLoading] = useState4(false);
-  const containerRef = useRef2(null);
-  useEffect4(() => {
-    try {
-      GlobalWorkerOptions.workerSrc = new URL(
-        "pdfjs-dist/build/pdf.worker.min.mjs",
-        import.meta.url
-      ).toString();
-    } catch {
-    }
-  }, []);
-  useEffect4(() => {
-    let cancel = false;
-    setError(null);
-    setLoading(true);
-    (async () => {
-      setDoc(null);
-      setRendered(/* @__PURE__ */ new Map());
-      setThumbs([]);
-      if (!url && !arrayBuffer) {
-        setError("No PDF source provided.");
-        setLoading(false);
-        return;
-      }
+// src/components/SignaturePanel.tsx
+import { Plus, Trash2, X } from "lucide-react";
+import { useState as useState6, useRef as useRef4 } from "react";
+import { Fragment, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function SignaturePanel(props) {
+  const {
+    isOpen,
+    onClose,
+    onSelectSignature,
+    externalSignatures = [],
+    onSignRequest
+  } = props;
+  const [localSignatures, setLocalSignatures] = useState6([]);
+  const [showModal, setShowModal] = useState6(false);
+  const signatures = [...externalSignatures, ...localSignatures];
+  const canvasRef = useRef4(null);
+  const [isDrawing, setIsDrawing] = useState6(false);
+  const handleCreateClick = async () => {
+    if (onSignRequest) {
       try {
-        const task = getDocument(
-          url ? { url, rangeChunkSize: 512 * 1024 } : { data: arrayBuffer }
-        );
-        const pdf = await task.promise;
-        if (cancel) {
-          return;
+        const newSig = await onSignRequest();
+        if (newSig) {
+          setLocalSignatures((prev) => [...prev, newSig]);
+          onSelectSignature(newSig);
         }
-        setDoc(pdf);
-        setPageCount(pdf.numPages);
-        props.onPageCount(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) });
-        const thumbWidth = 56;
-        const thumbsArr = [];
-        for (let i = 1; i <= pdf.numPages; i++) {
-          const page = await pdf.getPage(i);
-          const pageBase = page.getViewport({ scale: 1 });
-          const thumbScale = thumbWidth / pageBase.width;
-          const thumbVp = page.getViewport({ scale: thumbScale });
-          const thumbCanvas = document.createElement("canvas");
-          thumbCanvas.width = Math.round(thumbVp.width);
-          thumbCanvas.height = Math.round(thumbVp.height);
-          const thumbCtx = thumbCanvas.getContext("2d", { alpha: false });
-          if (thumbCtx) {
-            await page.render({ canvasContext: thumbCtx, viewport: thumbVp }).promise;
-            thumbsArr.push(thumbCanvas.toDataURL("image/png"));
-          } else {
-            thumbsArr.push(void 0);
-          }
-        }
-        setThumbs(thumbsArr);
-      } catch (e) {
-        setError(
-          "Failed to load PDF. " + (e instanceof Error ? e.message : "")
-        );
-      } finally {
-        setLoading(false);
+      } catch (err) {
+        console.error("Custom sign request failed", err);
       }
-    })();
-    return () => {
-      cancel = true;
-    };
-  }, [url, arrayBuffer]);
-  useEffect4(() => {
-    props.onThumbs(thumbs);
-  }, [thumbs]);
-  const pagesToShow = useMemo4(() => {
-    if (props.layout === "side-by-side" && pageCount > 1) {
-      const left = Math.max(1, Math.min(props.currentPage, pageCount));
-      const right = Math.max(1, Math.min(left + 1, pageCount));
-      return left === right ? [left] : [left, right];
+    } else {
+      openCreateModal();
     }
-    return [Math.max(1, Math.min(props.currentPage, pageCount))];
-  }, [props.currentPage, props.layout, pageCount]);
-  useEffect4(() => {
-    if (!doc) {
-      return;
-    }
-    let cancel = false;
-    (async () => {
-      for (const p of pagesToShow) {
-        if (rendered.has(p)) {
-          continue;
-        }
-        try {
-          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;
-          });
-        } catch {
-        }
+  };
+  const openCreateModal = () => {
+    setShowModal(true);
+    setTimeout(() => {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        const ctx = canvas.getContext("2d");
+        ctx?.clearRect(0, 0, canvas.width, canvas.height);
       }
-    })();
-    return () => {
-      cancel = true;
+    }, 100);
+  };
+  const saveSignature = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const newSig = {
+      id: Date.now().toString(),
+      signatureImageUrl: canvas.toDataURL("image/png"),
+      signedBy: "Me",
+      dateSigned: (/* @__PURE__ */ new Date()).toISOString()
     };
-  }, [doc, pagesToShow, size.w, rendered]);
-  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)
-    );
-    props.onCurrentPageChange(next);
-  }
-  function clickPlace(e, page) {
-    const stamp = props.signatureStamp;
-    if (!stamp?.armed) {
-      return;
-    }
-    const rect = e.currentTarget.getBoundingClientRect();
-    const x = (e.clientX - rect.left) / rect.width;
-    const y = (e.clientY - rect.top) / rect.height;
-    stamp.onPlaced({ page, x, y, w: 0.22, h: 0.08 });
-  }
-  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(
+    setLocalSignatures([...localSignatures, newSig]);
+    setShowModal(false);
+    onSelectSignature(newSig);
+  };
+  const startDraw = (e) => {
+    setIsDrawing(true);
+    draw(e);
+  };
+  const stopDraw = () => setIsDrawing(false);
+  const draw = (e) => {
+    if (!isDrawing || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
+    const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
+    const x = clientX - rect.left;
+    const y = clientY - rect.top;
+    ctx.lineWidth = 2;
+    ctx.lineCap = "round";
+    ctx.lineTo(x, y);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+  };
+  return /* @__PURE__ */ jsxs7(Fragment, { children: [
+    /* @__PURE__ */ jsxs7(
       "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(
+        className: `hv-sidebar hv-sidebar-right ${!isOpen ? "collapsed" : ""}`,
+        style: { width: isOpen ? "280px" : "0" },
+        children: [
+          /* @__PURE__ */ jsxs7(
             "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);
-                    }
+              className: "hv-sidebar-header",
+              style: { justifyContent: "space-between", padding: "12px 16px" },
+              children: [
+                /* @__PURE__ */ jsx8("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: "Signatures" }),
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "hv-btn",
+                    style: { padding: "4px", border: "none" },
+                    children: /* @__PURE__ */ jsx8(X, { size: 18 })
                   }
-                }
-              ) : /* @__PURE__ */ jsx4("div", { className: "hv-loading", children: "Rendering\u2026" })
-            },
-            p
-          );
-        })
-      }
-    ) : null
-  ] });
-}
-
-// src/renderers/PptxRenderer.tsx
-import { useEffect as useEffect5, useMemo as useMemo5, useState as useState5 } from "react";
-import JSZip from "jszip";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function decodeXml(s) {
-  return s.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'");
-}
-function extractText(xml) {
-  return [...xml.matchAll(/<a:t>(.*?)<\/a:t>/g)].map((m) => decodeXml(m[1] || "")).join(" ").trim();
-}
-function PptxRenderer(props) {
-  const [slides, setSlides] = useState5([]);
-  const [thumbs, setThumbs] = useState5([]);
-  const [error, setError] = useState5(null);
-  const [loading, setLoading] = useState5(false);
-  useEffect5(() => {
-    let cancel = false;
-    setError(null);
-    setLoading(true);
-    (async () => {
-      setSlides([]);
-      setThumbs([]);
-      if (!props.arrayBuffer) {
-        setError("No PPTX source provided.");
-        setLoading(false);
-        return;
-      }
-      try {
-        const zip = await JSZip.loadAsync(props.arrayBuffer);
-        const slidePaths = Object.keys(zip.files).filter((p) => /^ppt\/slides\/slide\d+\.xml$/.test(p)).sort();
-        const slidesOut = [];
-        for (let i = 0; i < slidePaths.length; i++) {
-          const xml = await zip.files[slidePaths[i]].async("string");
-          slidesOut.push({ index: i + 1, text: extractText(xml) });
-        }
-        if (cancel) return;
-        setSlides(
-          slidesOut.length ? slidesOut : [{ index: 1, text: "(empty)" }]
-        );
-        props.onSlideCount(slidesOut.length || 1);
-        const thumbWidth = 56;
-        const thumbsArr = [];
-        for (let i = 0; i < (slidesOut.length || 1); i++) {
-          thumbsArr.push(
-            `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgThumb(i + 1))}`
-          );
-        }
-        setThumbs(thumbsArr);
-      } catch (e) {
-        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);
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs7("div", { className: "hv-thumb-list", children: [
+            /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                onClick: handleCreateClick,
+                className: "hv-btn",
+                style: {
+                  width: "100%",
+                  justifyContent: "center",
+                  border: "2px dashed var(--hv-border)",
+                  marginBottom: "16px",
+                  color: "var(--hv-primary)"
+                },
+                children: [
+                  /* @__PURE__ */ jsx8(Plus, { size: 18, style: { marginRight: "8px" } }),
+                  "New Signature"
+                ]
+              }
+            ),
+            signatures.map((sig, idx) => {
+              const isLocal = localSignatures.some((s) => s.id === sig.id);
+              const showDelete = isLocal;
+              return /* @__PURE__ */ jsxs7(
+                "div",
+                {
+                  className: "hv-thumb-item",
+                  style: {
+                    position: "relative",
+                    padding: "12px",
+                    background: "var(--hv-bg)",
+                    borderRadius: "8px",
+                    border: "1px solid var(--hv-border)"
+                  },
+                  onClick: () => onSelectSignature(sig),
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "img",
+                      {
+                        src: sig.signatureImageUrl,
+                        alt: "Signature",
+                        style: { height: "40px", objectFit: "contain" }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "11px",
+                          color: "var(--hv-muted)",
+                          marginTop: "4px",
+                          textAlign: "center"
+                        },
+                        children: [
+                          sig.signedBy || "User",
+                          " \u2022",
+                          " ",
+                          new Date(sig.dateSigned).toLocaleDateString(),
+                          sig.comment && /* @__PURE__ */ jsx8("div", { className: "text-xs text-gray-500 mt-1 italic", children: sig.comment })
+                        ]
+                      }
+                    ),
+                    showDelete && /* @__PURE__ */ jsx8(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setLocalSignatures(
+                            localSignatures.filter((s) => s.id !== sig.id)
+                          );
+                        },
+                        className: "hv-btn",
+                        style: {
+                          position: "absolute",
+                          top: "4px",
+                          right: "4px",
+                          padding: "4px",
+                          color: "#ef4444",
+                          border: "none",
+                          background: "white"
+                        },
+                        children: /* @__PURE__ */ jsx8(Trash2, { size: 12 })
+                      }
+                    )
+                  ]
+                },
+                sig.id || idx
+              );
+            })
+          ] })
+        ]
       }
-    })();
-    return () => {
-      cancel = true;
-    };
-  }, [props.arrayBuffer]);
-  useEffect5(() => {
-    props.onThumbs(thumbs);
-  }, [thumbs]);
-  const pagesToShow = useMemo5(() => {
-    const total = slides.length;
-    if (props.layout === "side-by-side" && total > 1) {
-      const left = Math.max(1, Math.min(props.currentPage, total));
-      const right = Math.max(1, Math.min(left + 1, total));
-      return left === right ? [left] : [left, right];
-    }
-    return [Math.max(1, Math.min(props.currentPage, total))];
-  }, [props.currentPage, props.layout, slides.length]);
-  return /* @__PURE__ */ jsxs5("div", { className: "hv-doc", children: [
-    loading && /* @__PURE__ */ jsx5("div", { className: "hv-loading", children: "Loading PPTX\u2026" }),
-    error && /* @__PURE__ */ jsx5("div", { className: "hv-error", children: error }),
-    !loading && !error && (!slides || slides.length === 0) && /* @__PURE__ */ jsx5("div", { className: "hv-error", children: "No slides to display." }),
-    !error && slides && slides.length > 0 && /* @__PURE__ */ jsx5(
+    ),
+    showModal && /* @__PURE__ */ jsx8("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ jsxs7(
       "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__ */ jsxs5(
+        className: "hv-modal",
+        style: { width: "450px", maxWidth: "90vw" },
+        children: [
+          /* @__PURE__ */ jsxs7(
             "div",
             {
-              className: "hv-slide",
-              tabIndex: 0,
-              onFocus: () => props.onCurrentPageChange(p),
+              style: {
+                padding: "16px 24px",
+                borderBottom: "1px solid var(--hv-border)",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
               children: [
-                /* @__PURE__ */ jsxs5("div", { className: "hv-slide-title", children: [
-                  "Slide ",
-                  p
-                ] }),
-                /* @__PURE__ */ jsx5("div", { className: "hv-slide-text", children: s?.text || "" })
+                /* @__PURE__ */ jsx8("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: "Draw Signature" }),
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    onClick: () => setShowModal(false),
+                    className: "hv-btn",
+                    style: { border: "none" },
+                    children: /* @__PURE__ */ jsx8(X, { size: 20 })
+                  }
+                )
               ]
-            },
-            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>`;
-}
-
-// src/utils/locale.ts
-var defaultLocale = {
-  "loading": "Loading\u2026",
-  "error.title": "Error",
-  "toolbar.layout.single": "Single page",
-  "toolbar.layout.two": "Side-by-side",
-  "toolbar.thumbs": "Thumbnails",
-  "toolbar.signatures": "Signatures",
-  "toolbar.sign": "Sign Document",
-  "toolbar.save": "Save",
-  "toolbar.exportPdf": "Export as PDF",
-  "thumbnails.title": "Thumbnails",
-  "thumbnails.page": "Page",
-  "signatures.title": "Signatures",
-  "signatures.empty": "No signatures",
-  "signatures.placeHint": "Click on the document to place the signature.",
-  "a11y.viewer": "Document viewer",
-  "a11y.ribbon": "Ribbon",
-  "a11y.editor": "Document editor"
-};
-
-// src/components/SignaturePanel.tsx
-import React6 from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-function SignaturePanel(props) {
-  const title = props.locale["signatures.title"] ?? "Signatures";
-  const deduped = React6.useMemo(() => {
-    const seen = /* @__PURE__ */ new Set();
-    return props.signatures.filter((s) => {
-      const key = `${s.signedBy}|${s.dateSigned}|${s.signatureImageUrl}`;
-      if (seen.has(key)) return false;
-      seen.add(key);
-      return true;
-    });
-  }, [props.signatures]);
-  return /* @__PURE__ */ jsxs6(
-    "aside",
-    {
-      className: props.collapsed ? "hv-side hv-side--collapsed" : "hv-side",
-      "aria-label": title,
-      children: [
-        /* @__PURE__ */ jsxs6("div", { className: "hv-sidebar-header", children: [
-          /* @__PURE__ */ jsx6(
-            "button",
-            {
-              type: "button",
-              className: "hv-icon",
-              onClick: props.onToggle,
-              "aria-label": props.locale["toolbar.signatures"] ?? "Signatures",
-              children: /* @__PURE__ */ jsx6("span", { "aria-hidden": true, children: "\u270D" })
             }
           ),
-          /* @__PURE__ */ jsx6("div", { className: "hv-sidebar-title", children: title })
-        ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "hv-sidebar-body", children: [
-          deduped.length === 0 && /* @__PURE__ */ jsx6("div", { className: "hv-signature-empty", "aria-live": "polite", children: props.locale["signatures.empty"] ?? "No signatures yet." }),
-          deduped.map((s, idx) => /* @__PURE__ */ jsxs6(
+          /* @__PURE__ */ jsxs7(
             "div",
             {
-              className: "hv-signature-card",
-              tabIndex: 0,
-              "aria-label": `Signature by ${s.signedBy}`,
+              style: {
+                padding: "24px",
+                background: "#f9fafb",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center"
+              },
               children: [
-                /* @__PURE__ */ jsx6(
-                  "img",
+                /* @__PURE__ */ jsx8(
+                  "div",
                   {
-                    src: s.signatureImageUrl,
-                    alt: props.locale["signatures.imgAlt"] ? props.locale["signatures.imgAlt"].replace(
-                      "{name}",
-                      s.signedBy
-                    ) : `Signature by ${s.signedBy}`,
-                    className: "hv-signature-img"
+                    style: {
+                      background: "white",
+                      border: "1px solid #e5e7eb",
+                      borderRadius: "8px",
+                      overflow: "hidden",
+                      boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
+                    },
+                    children: /* @__PURE__ */ jsx8(
+                      "canvas",
+                      {
+                        ref: canvasRef,
+                        width: 400,
+                        height: 200,
+                        style: {
+                          display: "block",
+                          cursor: "crosshair",
+                          touchAction: "none"
+                        },
+                        onMouseDown: startDraw,
+                        onMouseUp: stopDraw,
+                        onMouseMove: draw,
+                        onTouchStart: startDraw,
+                        onTouchEnd: stopDraw,
+                        onTouchMove: draw
+                      }
+                    )
                   }
                 ),
-                /* @__PURE__ */ jsxs6("div", { className: "hv-signature-meta", children: [
-                  /* @__PURE__ */ jsx6("div", { className: "hv-signature-name", children: s.signedBy }),
-                  /* @__PURE__ */ jsx6("div", { className: "hv-signature-date", children: new Date(s.dateSigned).toLocaleString() }),
-                  s.comment ? /* @__PURE__ */ jsx6("div", { className: "hv-signature-comment", children: s.comment }) : null
-                ] })
+                /* @__PURE__ */ jsx8(
+                  "p",
+                  {
+                    style: {
+                      fontSize: "12px",
+                      color: "var(--hv-muted)",
+                      marginTop: "8px"
+                    },
+                    children: "Sign above using your mouse or finger"
+                  }
+                )
               ]
-            },
-            `${s.signedBy}-${s.dateSigned}-${s.signatureImageUrl}`
-          ))
-        ] })
-      ]
-    }
-  );
-}
-
-// src/components/ThumbnailsSidebar.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-function ThumbnailsSidebar(props) {
-  const t = props.locale["thumbnails.title"] ?? "Thumbnails";
-  return /* @__PURE__ */ jsxs7(
-    "aside",
-    {
-      className: props.collapsed ? "hv-thumbs hv-thumbs--collapsed" : "hv-thumbs",
-      "aria-label": t,
-      children: [
-        /* @__PURE__ */ jsxs7("div", { className: "hv-thumbs-header", children: [
-          /* @__PURE__ */ jsx7(
-            "button",
-            {
-              type: "button",
-              className: "hv-thumbs-toggle",
-              onClick: props.onToggle,
-              "aria-label": props.collapsed ? props.locale["thumbnails.open"] ?? "Open thumbnails" : props.locale["thumbnails.close"] ?? "Close thumbnails",
-              children: /* @__PURE__ */ jsx7("span", { className: "hv-thumbs-toggle-icon", children: props.collapsed ? "\u25B8" : "\u25BE" })
             }
           ),
-          !props.collapsed && /* @__PURE__ */ jsx7("div", { className: "hv-thumbs-title", children: t })
-        ] }),
-        !props.collapsed && /* @__PURE__ */ jsx7("div", { className: "hv-thumbs-list", role: "list", children: props.thumbnails.map((th, idx) => {
-          const p = idx + 1;
-          const active = p === props.currentPage;
-          return /* @__PURE__ */ jsxs7(
-            "button",
+          /* @__PURE__ */ jsxs7(
+            "div",
             {
-              type: "button",
-              role: "listitem",
-              className: active ? "hv-thumb hv-thumb--active" : "hv-thumb",
-              onClick: () => props.onSelectPage(p),
-              "aria-current": active ? "page" : void 0,
-              tabIndex: 0,
+              style: {
+                padding: "16px 24px",
+                borderTop: "1px solid var(--hv-border)",
+                display: "flex",
+                justifyContent: "flex-end",
+                gap: "12px"
+              },
               children: [
-                /* @__PURE__ */ jsx7("div", { className: "hv-thumb-img", "aria-hidden": true, children: th.dataUrl ? /* @__PURE__ */ jsx7("img", { src: th.dataUrl, alt: "" }) : /* @__PURE__ */ jsx7("div", { className: "hv-thumb-placeholder" }) }),
-                /* @__PURE__ */ jsx7("div", { className: "hv-thumb-label", children: th.label })
+                /* @__PURE__ */ jsx8(
+                  "button",
+                  {
+                    onClick: () => {
+                      const ctx = canvasRef.current?.getContext("2d");
+                      ctx?.clearRect(0, 0, 400, 200);
+                    },
+                    className: "hv-btn",
+                    children: "Clear"
+                  }
+                ),
+                /* @__PURE__ */ jsx8("button", { onClick: saveSignature, className: "hv-btn hv-btn-primary", children: "Create & Use" })
               ]
-            },
-            th.id
-          );
-        }) })
-      ]
-    }
-  );
-}
-
-// src/components/Toolbar.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-function Toolbar(props) {
-  const t = (k, fallback) => props.locale[k] ?? fallback;
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: "hv-toolbar",
-      role: "toolbar",
-      "aria-label": t("a11y.toolbar", "Document toolbar"),
-      children: [
-        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__group", children: [
-          /* @__PURE__ */ jsx8(
-            "button",
-            {
-              className: `hv-btn ${props.showThumbnails ? "hv-btn--active" : ""}`,
-              onClick: props.onToggleThumbnails,
-              "aria-pressed": props.showThumbnails,
-              children: "Thumbnails"
-            }
-          ),
-          props.mode !== "create" && /* @__PURE__ */ jsx8(
-            "button",
-            {
-              className: `hv-btn ${props.showSignatures ? "hv-btn--active" : ""}`,
-              onClick: props.onToggleSignatures,
-              "aria-pressed": props.showSignatures,
-              children: "Signatures"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__group hv-segment", children: [
-          /* @__PURE__ */ jsx8(
-            "button",
-            {
-              className: `hv-btn ${props.layout === "single" ? "hv-btn--active" : ""}`,
-              onClick: () => props.onChangeLayout("single"),
-              children: "Single page"
-            }
-          ),
-          /* @__PURE__ */ jsx8(
-            "button",
-            {
-              className: `hv-btn ${props.layout === "side-by-side" ? "hv-btn--active" : ""}`,
-              onClick: () => props.onChangeLayout("side-by-side"),
-              children: "Side-by-side"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs8("div", { className: "hv-toolbar__group hv-toolbar__actions", children: [
-          props.showHeaderFooterToggle && /* @__PURE__ */ jsxs8("label", { className: "hv-switch", children: [
-            /* @__PURE__ */ jsx8(
-              "input",
-              {
-                type: "checkbox",
-                checked: props.headerFooterEnabled,
-                onChange: props.onToggleHeaderFooter
-              }
-            ),
-            /* @__PURE__ */ jsx8("span", { className: "hv-switch__slider" }),
-            /* @__PURE__ */ jsx8("span", { className: "hv-switch__label", children: t("toolbar.letterhead", "Letterhead") })
-          ] }),
-          props.allowSigning && /* @__PURE__ */ jsx8(
-            "button",
-            {
-              className: "hv-btn hv-btn--primary",
-              onClick: props.onSign,
-              disabled: props.signingDisabled,
-              children: "Sign document"
-            }
-          ),
-          props.canExportPdf && /* @__PURE__ */ jsx8("button", { className: "hv-btn", onClick: props.onExportPdf, children: "Export PDF" }),
-          props.canSave && /* @__PURE__ */ jsx8("button", { className: "hv-btn hv-btn--primary", onClick: props.onSave, children: "Save" })
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    ) })
+  ] });
 }
 
 // src/components/DocumentViewer.tsx
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function DocumentViewer(props) {
   const mode = props.mode ?? "view";
   const theme = props.theme ?? "light";
-  const locale = useMemo6(
-    () => ({ ...defaultLocale, ...props.locale ?? {} }),
-    [props.locale]
-  );
-  const [layout, setLayout] = useState6(
+  const [layout, setLayout] = useState7(
     props.defaultLayout ?? "single"
   );
-  const [showThumbnails, setShowThumbnails] = useState6(true);
-  const [showSignatures, setShowSignatures] = useState6(true);
-  const [headerFooterEnabled, setHeaderFooterEnabled] = useState6(true);
-  const allowSigning = props.allowSigning ?? false;
-  const [signingBusy, setSigningBusy] = useState6(false);
-  const [resolved, setResolved] = useState6(null);
-  const [error, setError] = useState6("");
-  const [pageCount, setPageCount] = useState6(1);
-  const [currentPage, setCurrentPage] = useState6(1);
-  const [thumbs, setThumbs] = useState6([]);
-  const [localSignatures, setLocalSignatures] = useState6(
-    props.signatures ?? []
+  const [showThumbnails, setShowThumbnails] = useState7(
+    props.defaultShowThumbnails ?? true
   );
-  useEffect6(
-    () => setLocalSignatures(props.signatures ?? []),
-    [props.signatures]
-  );
-  const [sigPlacements, setSigPlacements] = useState6([]);
-  const [armedSignatureUrl, setArmedSignatureUrl] = useState6(
-    null
-  );
-  const editorRef = useRef3(null);
-  useEffect6(() => {
-    let cancelled = false;
-    (async () => {
+  const [showSignatures, setShowSignatures] = useState7(false);
+  const [resolved, setResolved] = useState7(null);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7("");
+  const [pageCount, setPageCount] = useState7(1);
+  const [currentPage, setCurrentPage] = useState7(1);
+  const [thumbnails, setThumbnails] = useState7([]);
+  useEffect7(() => {
+    let active = true;
+    const loadFile = async () => {
+      setLoading(true);
       setError("");
       setResolved(null);
-      setThumbs([]);
-      setPageCount(1);
-      setCurrentPage(1);
-      setSigPlacements([]);
-      setArmedSignatureUrl(null);
-      if (mode === "create") {
-        const ft = props.fileType ?? "docx";
-        setResolved({
-          fileType: ft,
-          fileName: props.fileName ?? `Untitled.${ft}`
-        });
-        return;
-      }
       try {
-        const res = await resolveSource({
-          fileUrl: props.fileUrl,
-          base64: props.base64,
-          blob: props.blob,
-          fileName: props.fileName,
-          fileType: props.fileType
-        });
-        if (cancelled) {
-          return;
-        }
-        setResolved({
-          fileType: res.fileType,
-          fileName: res.fileName,
-          url: res.url,
-          arrayBuffer: res.arrayBuffer
-        });
-      } catch (e) {
-        if (cancelled) {
-          return;
+        if (mode === "create") {
+          setResolved({
+            fileType: props.fileType ?? "docx",
+            fileName: props.fileName ?? "Untitled"
+          });
+        } else {
+          const res = await resolveSource({
+            fileUrl: props.fileUrl,
+            base64: props.base64,
+            blob: props.blob,
+            fileName: props.fileName,
+            fileType: props.fileType
+          });
+          if (active) setResolved(res);
         }
-        setError(e instanceof Error ? e.message : String(e));
+      } catch (err) {
+        if (active) setError(err.message || "Failed to load document");
+      } finally {
+        if (active) setLoading(false);
       }
-    })();
+    };
+    loadFile();
     return () => {
-      cancelled = true;
+      active = false;
     };
-  }, [
-    mode,
-    props.fileUrl,
-    props.base64,
-    props.blob,
-    props.fileName,
-    props.fileType
-  ]);
-  const thumbnails = useMemo6(() => {
-    const n = Math.max(1, pageCount);
-    return Array.from({ length: n }, (_, i) => ({
-      id: `p-${i + 1}`,
-      label: `${locale["thumbnails.page"] ?? "Page"} ${i + 1}`,
-      dataUrl: thumbs[i]
-    }));
-  }, [pageCount, thumbs, locale]);
-  async function handleSignRequest() {
-    if (!allowSigning || signingBusy || !props.onSignRequest) {
-      return;
+  }, [props.fileUrl, props.base64, props.blob, mode]);
+  const handleSignatureSelect = (sig) => {
+    if (props.onSign) {
+      props.onSign(sig);
     }
-    setSigningBusy(true);
-    try {
-      const sig = await props.onSignRequest();
-      setLocalSignatures((prev) => [...prev, sig]);
-      setArmedSignatureUrl(sig.signatureImageUrl);
-    } finally {
-      setSigningBusy(false);
+    console.log("Signature selected:", sig);
+  };
+  const renderContent = () => {
+    if (error) {
+      return /* @__PURE__ */ jsxs8("div", { className: "hv-error-banner", children: [
+        /* @__PURE__ */ jsx9("strong", { children: "Error loading document" }),
+        /* @__PURE__ */ jsx9("p", { children: error })
+      ] });
     }
-  }
-  function placeSignature(p) {
-    if (!armedSignatureUrl) {
-      return;
-    }
-    setSigPlacements((prev) => [
-      ...prev,
-      { ...p, signatureImageUrl: armedSignatureUrl }
-    ]);
-    setArmedSignatureUrl(null);
-  }
-  async function handleSave(exportPdf) {
-    if (editorRef.current) {
-      await editorRef.current.save(!!exportPdf);
-      return;
-    }
-    if (!resolved?.arrayBuffer) {
-      return;
+    if (loading || !resolved) {
+      return /* @__PURE__ */ jsxs8("div", { className: "hv-loader", children: [
+        /* @__PURE__ */ jsx9("div", { className: "hv-spinner" }),
+        /* @__PURE__ */ jsx9("span", { children: "Loading Document..." })
+      ] });
     }
-    const b64 = arrayBufferToBase642(resolved.arrayBuffer);
-    props.onSave?.(b64, {
+    const commonProps = {
+      arrayBuffer: resolved.arrayBuffer,
       fileName: resolved.fileName,
       fileType: resolved.fileType,
-      annotations: { sigPlacements }
-    });
-  }
-  const canSave = mode === "edit" || mode === "create";
-  const canExportPdf = (mode === "edit" || mode === "create") && (resolved?.fileType === "docx" || resolved?.fileType === "md" || resolved?.fileType === "txt" || resolved?.fileType === "xlsx");
-  return /* @__PURE__ */ jsxs9("div", { className: `hv-root`, "data-hv-theme": theme, children: [
+      layout,
+      currentPage,
+      onPageCount: setPageCount,
+      onCurrentPageChange: setCurrentPage,
+      onThumbs: setThumbnails
+    };
+    switch (resolved.fileType) {
+      case "pdf":
+        return /* @__PURE__ */ jsx9(PdfRenderer, { url: resolved.url, ...commonProps });
+      case "docx":
+      case "doc":
+      case "rtf":
+      case "txt":
+      case "md":
+        return /* @__PURE__ */ jsx9(RichTextEditor, { mode, ...commonProps });
+      case "xlsx":
+      case "csv":
+      case "xls":
+        return /* @__PURE__ */ jsx9(SpreadsheetEditor, { mode, ...commonProps });
+      case "pptx":
+      case "ppt":
+        return /* @__PURE__ */ jsx9(PptxRenderer, { ...commonProps });
+      case "jpg":
+      case "jpeg":
+      case "png":
+      case "gif":
+      case "bmp":
+      case "svg":
+        return /* @__PURE__ */ jsx9(ImageRenderer, { ...commonProps, fileType: resolved.fileType });
+      default:
+        return /* @__PURE__ */ jsxs8("div", { className: "hv-error-banner", children: [
+          "Unsupported file type: ",
+          resolved.fileType
+        ] });
+    }
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "hv-root", "data-hv-theme": theme, children: [
     /* @__PURE__ */ jsx9(
       Toolbar,
       {
-        locale,
-        mode,
-        fileType: resolved?.fileType,
+        fileName: resolved?.fileName,
+        pageCount,
+        currentPage,
+        onPageChange: setCurrentPage,
         layout,
-        onChangeLayout: setLayout,
+        onLayoutChange: setLayout,
         showThumbnails,
-        onToggleThumbnails: () => setShowThumbnails((v) => !v),
+        onToggleThumbnails: () => setShowThumbnails(!showThumbnails),
         showSignatures,
-        onToggleSignatures: () => setShowSignatures((v) => !v),
-        onSign: () => void handleSignRequest(),
-        allowSigning,
-        signingDisabled: signingBusy || !props.onSignRequest,
-        canSave,
-        onSave: () => void handleSave(false),
-        canExportPdf,
-        onExportPdf: () => void handleSave(true),
-        headerFooterEnabled,
-        showHeaderFooterToggle: (props.enableHeaderFooterToggle ?? true) && mode === "create",
-        onToggleHeaderFooter: () => setHeaderFooterEnabled((v) => !v)
+        onToggleSignatures: () => setShowSignatures(!showSignatures),
+        disableSigning: props.disableSigning
       }
     ),
-    error ? /* @__PURE__ */ jsxs9("div", { className: "hv-error", role: "alert", children: [
-      /* @__PURE__ */ jsx9("div", { className: "hv-error-title", children: locale["error.title"] ?? "Error" }),
-      /* @__PURE__ */ jsx9("div", { className: "hv-error-body", children: error })
-    ] }) : null,
-    !resolved && !error ? /* @__PURE__ */ jsx9("div", { className: "hv-loading", "aria-busy": "true", children: locale.loading ?? "Loading\u2026" }) : null,
-    resolved ? /* @__PURE__ */ jsxs9("div", { className: "hv-shell", children: [
-      mode !== "create" ? /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs8("div", { className: "hv-shell", children: [
+      /* @__PURE__ */ jsx9(
         ThumbnailsSidebar,
         {
-          locale,
+          isOpen: showThumbnails,
           thumbnails,
           currentPage,
-          collapsed: !showThumbnails,
-          onToggle: () => setShowThumbnails((v) => !v),
           onSelectPage: setCurrentPage
         }
-      ) : null,
-      /* @__PURE__ */ jsxs9("main", { className: "hv-main", children: [
-        resolved.fileType === "pdf" ? /* @__PURE__ */ jsx9(
-          PdfRenderer,
-          {
-            url: resolved.url,
-            arrayBuffer: resolved.arrayBuffer,
-            layout,
-            currentPage,
-            onCurrentPageChange: setCurrentPage,
-            onPageCount: (n) => {
-              setPageCount(n);
-              setThumbs(
-                (prev) => prev.length === n ? prev : Array.from({ length: n }, (_, i) => prev[i])
-              );
-            },
-            onThumbs: (t) => setThumbs(t),
-            signatureStamp: armedSignatureUrl ? {
-              imageUrl: armedSignatureUrl,
-              armed: true,
-              onPlaced: placeSignature
-            } : void 0
-          }
-        ) : null,
-        resolved.fileType === "docx" || resolved.fileType === "md" || resolved.fileType === "txt" ? /* @__PURE__ */ jsx9(
-          RichTextEditor,
-          {
-            ref: editorRef,
-            mode,
-            fileType: resolved.fileType,
-            fileName: resolved.fileName,
-            arrayBuffer: resolved.arrayBuffer,
-            headerComponent: props.headerComponent,
-            footerComponent: props.footerComponent,
-            headerFooterEnabled,
-            locale,
-            signatures: localSignatures,
-            signaturePlacements: sigPlacements,
-            onPageCount: (n) => {
-              setPageCount(n);
-              setThumbs(
-                (prev) => prev.length === n ? prev : Array.from({ length: n }, (_, i) => prev[i])
-              );
-            },
-            onSave: (b64, meta) => props.onSave?.(b64, meta),
-            armedSignatureUrl,
-            onPlaceSignature: placeSignature
-          }
-        ) : null,
-        resolved.fileType === "xlsx" ? /* @__PURE__ */ jsx9(
-          SpreadsheetEditor,
-          {
-            ref: editorRef,
-            mode,
-            fileName: resolved.fileName,
-            arrayBuffer: resolved.arrayBuffer,
-            locale,
-            onSave: (b64, meta) => props.onSave?.(b64, meta)
-          }
-        ) : null,
-        resolved.fileType === "pptx" ? /* @__PURE__ */ jsx9(
-          PptxRenderer,
-          {
-            arrayBuffer: resolved.arrayBuffer,
-            layout,
-            currentPage,
-            onCurrentPageChange: setCurrentPage,
-            onSlideCount: (n) => {
-              setPageCount(n);
-              setThumbs(
-                (prev) => prev.length === n ? prev : Array.from({ length: n }, (_, i) => prev[i])
-              );
-            },
-            onThumbs: (t) => setThumbs(t)
-          }
-        ) : null,
-        resolved.fileType === "png" || resolved.fileType === "jpg" || resolved.fileType === "svg" ? /* @__PURE__ */ jsx9(
-          ImageRenderer,
-          {
-            arrayBuffer: resolved.arrayBuffer,
-            fileType: resolved.fileType,
-            fileName: resolved.fileName
-          }
-        ) : null
-      ] }),
-      mode !== "create" && localSignatures.length ? /* @__PURE__ */ jsx9(
+      ),
+      /* @__PURE__ */ jsx9("main", { className: "hv-main", children: renderContent() }),
+      /* @__PURE__ */ jsx9(
         SignaturePanel,
         {
-          locale,
-          signatures: localSignatures,
-          collapsed: !showSignatures,
-          onToggle: () => setShowSignatures((v) => !v)
+          isOpen: showSignatures,
+          onClose: () => setShowSignatures(false),
+          onSelectSignature: handleSignatureSelect,
+          externalSignatures: props.signatures,
+          onSignRequest: props.onSignRequest
         }
-      ) : null
-    ] }) : null
+      )
+    ] })
   ] });
 }
-function arrayBufferToBase642(ab) {
-  const bytes = new Uint8Array(ab);
-  let binary = "";
-  const chunk = 32768;
-  for (let i = 0; i < bytes.length; i += chunk) {
-    binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
-  }
-  return btoa(binary);
-}
 export {
   DocumentViewer
 };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.mjs.map