@arbidocs/react 0.3.135 → 0.3.137

package/dist/viewers/index.cjs

@@ -0,0 +1,610 @@
+'use strict';
+
+var react = require('react');
+var reactPdf = require('react-pdf');
+require('react-pdf/dist/Page/AnnotationLayer.css');
+require('react-pdf/dist/Page/TextLayer.css');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/viewers/PdfViewer.tsx
+var PAGE_UPDATE_DEBOUNCE_MS = 10;
+var MIN_VISIBILITY_THRESHOLD = 0.15;
+var INTERSECTION_THRESHOLDS = [0, 0.25, 0.5, 0.75, 1];
+function usePageIntersectionObserver({
+  containerRef,
+  scrollCompleteRef,
+  isEnabled,
+  getPageElements,
+  getPageNumber,
+  onPageChange,
+  onVisibilityUpdate
+}) {
+  react.useEffect(() => {
+    if (!isEnabled || !containerRef.current) return;
+    const container = containerRef.current;
+    const visibilityMap = /* @__PURE__ */ new Map();
+    let lastReportedPage = null;
+    let updateTimeout = null;
+    const updatePageNumber = () => {
+      let mostVisiblePage = 1;
+      let maxVisibility = 0;
+      visibilityMap.forEach((ratio, pageNum) => {
+        if (ratio > maxVisibility) {
+          maxVisibility = ratio;
+          mostVisiblePage = pageNum;
+        }
+      });
+      if (scrollCompleteRef.current && mostVisiblePage !== lastReportedPage && maxVisibility > MIN_VISIBILITY_THRESHOLD) {
+        lastReportedPage = mostVisiblePage;
+        onPageChange(mostVisiblePage);
+      }
+      if (onVisibilityUpdate) {
+        onVisibilityUpdate(new Map(visibilityMap));
+      }
+    };
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const pageNum = getPageNumber(entry.target);
+          if (pageNum > 0) {
+            visibilityMap.set(pageNum, entry.intersectionRatio);
+          }
+        });
+        if (updateTimeout) {
+          clearTimeout(updateTimeout);
+        }
+        updateTimeout = setTimeout(updatePageNumber, PAGE_UPDATE_DEBOUNCE_MS);
+      },
+      {
+        root: container,
+        threshold: INTERSECTION_THRESHOLDS
+      }
+    );
+    const elements = getPageElements();
+    elements.forEach((element) => observer.observe(element));
+    return () => {
+      observer.disconnect();
+      if (updateTimeout) {
+        clearTimeout(updateTimeout);
+      }
+    };
+  }, [
+    containerRef,
+    scrollCompleteRef,
+    isEnabled,
+    getPageElements,
+    getPageNumber,
+    onPageChange,
+    onVisibilityUpdate
+  ]);
+}
+
+// src/viewers/pdf-viewer-constants.ts
+var LAZY_LOAD_BUFFER_BEFORE = 2;
+var LAZY_LOAD_BUFFER_AFTER = 5;
+var INITIAL_LAZY_LOAD_BUFFER = { before: 0, after: 1 };
+var DEFAULT_ASSETS = {
+  workerSrc: "/pdf.worker.min.mjs",
+  cMapUrl: "/cmaps/",
+  standardFontDataUrl: "/standard_fonts/"
+};
+function ensurePdfWorker(workerSrc) {
+  if (reactPdf.pdfjs.GlobalWorkerOptions.workerSrc !== workerSrc) {
+    reactPdf.pdfjs.GlobalWorkerOptions.workerSrc = workerSrc;
+  }
+}
+var CONTAINER_PADDING_PX = 32;
+var PAGE_ASPECT_RATIO = 1.414;
+var TEXT_LAYER_BUFFER = 1;
+function PdfViewer({
+  file,
+  currentPage,
+  onLoadSuccess,
+  scrollTrigger,
+  onPageChange,
+  disableFontFace = false,
+  assets
+}) {
+  const workerSrc = assets?.workerSrc ?? DEFAULT_ASSETS.workerSrc;
+  const cMapUrl = assets?.cMapUrl ?? DEFAULT_ASSETS.cMapUrl;
+  const standardFontDataUrl = assets?.standardFontDataUrl ?? DEFAULT_ASSETS.standardFontDataUrl;
+  ensurePdfWorker(workerSrc);
+  const [numPages, setNumPages] = react.useState(0);
+  const [containerWidth, setContainerWidth] = react.useState(0);
+  const [loadError, setLoadError] = react.useState(null);
+  const [documentKey, setDocumentKey] = react.useState(() => `pdf-${Date.now()}`);
+  const initialPage = currentPage || 1;
+  const [renderedPages, setRenderedPages] = react.useState(
+    /* @__PURE__ */ new Set([
+      Math.max(1, initialPage - INITIAL_LAZY_LOAD_BUFFER.before),
+      initialPage,
+      initialPage + INITIAL_LAZY_LOAD_BUFFER.after
+    ])
+  );
+  const [visiblePages, setVisiblePages] = react.useState(/* @__PURE__ */ new Set([initialPage]));
+  react.useEffect(() => {
+    setDocumentKey(`pdf-${Date.now()}`);
+    setNumPages(0);
+    setLoadError(null);
+  }, [file]);
+  const containerRef = react.useRef(null);
+  const pageRefs = react.useRef(/* @__PURE__ */ new Map());
+  const onDocumentLoadSuccess = react.useCallback(
+    ({ numPages: n }) => {
+      setNumPages(n);
+      setLoadError(null);
+      const expand = () => {
+        setRenderedPages((prev) => {
+          if (prev.size === 0) return prev;
+          const newSet = new Set(prev);
+          const anchor = currentPage || 1;
+          for (let i = Math.max(1, anchor - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(n, anchor + LAZY_LOAD_BUFFER_AFTER); i++) {
+            newSet.add(i);
+          }
+          return newSet;
+        });
+      };
+      if (typeof requestIdleCallback !== "undefined") {
+        requestIdleCallback(expand, { timeout: 500 });
+      } else {
+        setTimeout(expand, 500);
+      }
+      try {
+        onLoadSuccess?.(n);
+      } catch (error) {
+        console.error("Error in onLoadSuccess callback:", error);
+      }
+    },
+    [onLoadSuccess, currentPage]
+  );
+  const onDocumentLoadError = react.useCallback((error) => {
+    console.error("PDF loading error:", error);
+    setLoadError(error);
+    setNumPages(0);
+  }, []);
+  const onPassword = react.useCallback((updatePassword, reason) => {
+    const message = reason === 2 ? "Incorrect password. Enter the password to unlock this PDF:" : "This PDF is password-protected. Enter the password to view it:";
+    const password = window.prompt(message);
+    if (password === null) {
+      setLoadError(new Error("Password required to open this PDF"));
+      setNumPages(0);
+      return;
+    }
+    updatePassword(password);
+  }, []);
+  react.useEffect(() => {
+    if (!containerRef.current) return;
+    const updateWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.offsetWidth - CONTAINER_PADDING_PX);
+      }
+    };
+    updateWidth();
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(containerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  const scrollCompleteRef = react.useRef(false);
+  react.useEffect(() => {
+    if (numPages === 0) return;
+    if (scrollCompleteRef.current) return;
+    if (currentPage) {
+      setRenderedPages((prev) => {
+        const newSet = new Set(prev);
+        for (let i = Math.max(1, currentPage - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(numPages, currentPage + LAZY_LOAD_BUFFER_AFTER); i++) {
+          newSet.add(i);
+        }
+        return newSet;
+      });
+      requestAnimationFrame(() => {
+        const pageElement = pageRefs.current.get(currentPage);
+        if (pageElement) {
+          pageElement.scrollIntoView({ behavior: "auto", block: "start" });
+        }
+        setTimeout(() => {
+          scrollCompleteRef.current = true;
+        }, 100);
+      });
+    }
+  }, [numPages]);
+  react.useEffect(() => {
+    if (!scrollTrigger || numPages === 0 || !currentPage) return;
+    scrollCompleteRef.current = false;
+    setRenderedPages((prev) => {
+      const newSet = new Set(prev);
+      for (let i = Math.max(1, currentPage - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(numPages, currentPage + LAZY_LOAD_BUFFER_AFTER); i++) {
+        newSet.add(i);
+      }
+      return newSet;
+    });
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const pageElement = pageRefs.current.get(currentPage);
+        if (pageElement) {
+          pageElement.scrollIntoView({ behavior: "instant", block: "start" });
+        }
+        scrollCompleteRef.current = true;
+      });
+    });
+  }, [scrollTrigger, currentPage, numPages]);
+  const handleVisibilityUpdate = react.useCallback(
+    (visibilityMap) => {
+      const visiblePageNums = Array.from(visibilityMap.entries()).filter(([, ratio]) => ratio > 0).map(([pageNum]) => pageNum);
+      if (visiblePageNums.length > 0) {
+        const minVisible = Math.min(...visiblePageNums);
+        const maxVisible = Math.max(...visiblePageNums);
+        const pagesToRender = /* @__PURE__ */ new Set();
+        for (let i = Math.max(1, minVisible - LAZY_LOAD_BUFFER_BEFORE); i <= Math.min(numPages, maxVisible + LAZY_LOAD_BUFFER_AFTER); i++) {
+          pagesToRender.add(i);
+        }
+        setRenderedPages(pagesToRender);
+        const nearViewport = /* @__PURE__ */ new Set();
+        for (let i = Math.max(1, minVisible - TEXT_LAYER_BUFFER); i <= Math.min(numPages, maxVisible + TEXT_LAYER_BUFFER); i++) {
+          nearViewport.add(i);
+        }
+        setVisiblePages(nearViewport);
+      }
+    },
+    [numPages]
+  );
+  const documentOptions = react.useMemo(
+    () => ({
+      standardFontDataUrl,
+      cMapUrl,
+      cMapPacked: true,
+      ...disableFontFace && { disableFontFace: true }
+    }),
+    [standardFontDataUrl, cMapUrl, disableFontFace]
+  );
+  const handlePageChange = react.useCallback(
+    (pageNumber) => onPageChange?.(pageNumber),
+    [onPageChange]
+  );
+  usePageIntersectionObserver({
+    containerRef,
+    scrollCompleteRef,
+    isEnabled: numPages > 0,
+    getPageElements: () => Array.from(pageRefs.current.values()),
+    getPageNumber: (element) => parseInt(element.getAttribute("data-page-number") ?? "0"),
+    onPageChange: handlePageChange,
+    onVisibilityUpdate: handleVisibilityUpdate
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "w-full h-full overflow-y-auto overflow-x-hidden bg-muted flex flex-col items-center p-4",
+      role: "region",
+      "aria-label": "PDF document viewer",
+      "data-testid": "pdf-viewer",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactPdf.Document,
+        {
+          file,
+          onLoadSuccess: onDocumentLoadSuccess,
+          onLoadError: onDocumentLoadError,
+          onPassword,
+          options: documentOptions,
+          loading: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading PDF..." }) }),
+          error: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full gap-4 p-8", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive text-center", children: loadError?.message === "Cannot read properties of null (reading 'sendWithPromise')" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold mb-2", children: "PDF viewer initialization failed" }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Please refresh the page to retry" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold mb-2", children: "Failed to load PDF" }),
+            loadError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: loadError.message })
+          ] }) }) }),
+          children: containerWidth > 0 && Array.from(new Array(numPages), (_, index) => {
+            const pageNumber = index + 1;
+            const shouldRender = renderedPages.has(pageNumber);
+            const pageHeight = containerWidth * PAGE_ASPECT_RATIO;
+            const shouldRenderTextLayer = visiblePages.has(pageNumber);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: (el) => {
+                  if (el) {
+                    pageRefs.current.set(pageNumber, el);
+                  } else {
+                    pageRefs.current.delete(pageNumber);
+                  }
+                },
+                "data-page-number": pageNumber,
+                className: "mb-6 shadow-xl bg-white border border-border",
+                style: !shouldRender ? { minHeight: pageHeight } : void 0,
+                role: "article",
+                "aria-label": `Page ${pageNumber} of ${numPages}`,
+                children: shouldRender ? /* @__PURE__ */ jsxRuntime.jsx(
+                  reactPdf.Page,
+                  {
+                    pageNumber,
+                    width: containerWidth,
+                    renderTextLayer: shouldRenderTextLayer,
+                    renderAnnotationLayer: false,
+                    devicePixelRatio: Math.min(window.devicePixelRatio || 1, 2),
+                    loading: /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        className: "flex items-center justify-center bg-muted",
+                        style: { width: containerWidth, height: pageHeight },
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
+                          "Loading page ",
+                          pageNumber,
+                          "..."
+                        ] })
+                      }
+                    )
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "flex items-center justify-center bg-muted",
+                    style: { width: containerWidth, height: pageHeight },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-muted-foreground", children: [
+                      "Page ",
+                      pageNumber
+                    ] })
+                  }
+                )
+              },
+              `page_${pageNumber}`
+            );
+          })
+        },
+        documentKey
+      )
+    }
+  );
+}
+function measureContentWidth(container) {
+  let pageWidth = 0;
+  container.querySelectorAll("section.docx").forEach((section) => {
+    pageWidth = Math.max(pageWidth, section.offsetWidth);
+  });
+  if (pageWidth === 0) return 0;
+  const wrapper = container.querySelector(".docx-wrapper");
+  if (wrapper) {
+    const style = window.getComputedStyle(wrapper);
+    pageWidth += (parseFloat(style.paddingLeft) || 0) + (parseFloat(style.paddingRight) || 0);
+  }
+  return pageWidth;
+}
+function DocxViewer({ blob }) {
+  const outerRef = react.useRef(null);
+  const containerRef = react.useRef(null);
+  const [error, setError] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [containerWidth, setContainerWidth] = react.useState(0);
+  const [contentWidth, setContentWidth] = react.useState(0);
+  react.useEffect(() => {
+    const outer = outerRef.current;
+    if (!outer) return;
+    const updateWidth = () => setContainerWidth(outer.clientWidth);
+    updateWidth();
+    const resizeObserver = new ResizeObserver(updateWidth);
+    resizeObserver.observe(outer);
+    return () => resizeObserver.disconnect();
+  }, []);
+  react.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    setContentWidth(0);
+    container.innerHTML = "";
+    import('docx-preview').then(({ renderAsync }) => {
+      if (cancelled) return;
+      return renderAsync(blob, container, void 0, {
+        ignoreLastRenderedPageBreak: false
+      });
+    }).then(() => {
+      if (!cancelled) setIsLoading(false);
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("DocxViewer render error:", err);
+        setError("Failed to render document");
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blob]);
+  react.useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (isLoading || error || !container) return;
+    setContentWidth(measureContentWidth(container));
+  }, [isLoading, error]);
+  const scale = containerWidth > 0 && contentWidth > 0 ? Math.min(1, containerWidth / contentWidth) : 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: outerRef, className: "w-full h-full overflow-auto bg-muted", "data-testid": "docx-viewer", children: [
+    isLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading document..." }) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive", children: error }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        "data-testid": "docx-viewer-body",
+        className: `docx-viewer-body${isLoading || error ? " hidden" : ""}`,
+        style: { zoom: scale }
+      }
+    )
+  ] });
+}
+function XlsxViewer({ blob }) {
+  const [sheets, setSheets] = react.useState([]);
+  const [activeSheet, setActiveSheet] = react.useState("");
+  const [rows, setRows] = react.useState([]);
+  const [error, setError] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const workbookRef = react.useRef(null);
+  const renderSheet = async (sheetName, wb) => {
+    const XLSX = await import('xlsx');
+    const sheet = wb.Sheets[sheetName];
+    const data = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: "" });
+    setRows(data);
+    setActiveSheet(sheetName);
+  };
+  react.useEffect(() => {
+    let cancelled = false;
+    blob.arrayBuffer().then(async (buffer) => {
+      if (cancelled) return;
+      const XLSX = await import('xlsx');
+      const wb = XLSX.read(buffer, { type: "array" });
+      workbookRef.current = wb;
+      const sheetNames = wb.SheetNames;
+      setSheets(sheetNames);
+      const data = XLSX.utils.sheet_to_json(wb.Sheets[sheetNames[0]], {
+        header: 1,
+        defval: ""
+      });
+      if (!cancelled) {
+        setRows(data);
+        setActiveSheet(sheetNames[0]);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        console.error("XlsxViewer error:", err);
+        setError("Failed to render spreadsheet");
+        setIsLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [blob]);
+  const handleSheetChange = (sheetName) => {
+    if (workbookRef.current) {
+      renderSheet(sheetName, workbookRef.current);
+    }
+  };
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "Loading spreadsheet..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-destructive", children: error }) });
+  }
+  const colCount = rows.reduce((max, row) => Math.max(max, row.length), 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "w-full h-full flex flex-col overflow-hidden bg-background",
+      "data-testid": "xlsx-viewer",
+      children: [
+        sheets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center gap-0.5 px-2 pt-1 border-b bg-muted overflow-x-auto", children: sheets.map((sheet) => /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleSheetChange(sheet),
+            className: `px-3 py-1 text-sm font-medium whitespace-nowrap rounded-t transition-colors border-x border-t ${sheet === activeSheet ? "bg-background text-primary border-border" : "bg-muted text-muted-foreground border-transparent hover:bg-muted hover:text-foreground"}`,
+            children: sheet
+          },
+          sheet
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("table", { className: "text-sm border-collapse min-w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "tr",
+            {
+              className: rowIdx === 0 ? "bg-muted font-semibold sticky top-0" : "hover:bg-accent",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("td", { className: "border border-border px-1 text-center text-muted-foreground bg-muted select-none w-8 min-w-[2rem]", children: rowIdx + 1 }),
+                Array.from({ length: colCount }).map((_, colIdx) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    className: "border border-border px-2 py-0.5 whitespace-nowrap max-w-[200px] overflow-hidden text-ellipsis",
+                    title: String(row[colIdx] ?? ""),
+                    children: String(row[colIdx] ?? "")
+                  },
+                  colIdx
+                ))
+              ]
+            },
+            rowIdx
+          )) }) }),
+          rows.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center p-8 text-sm text-muted-foreground", children: "Empty sheet" })
+        ] })
+      ]
+    }
+  );
+}
+function ImageViewer({ blob, alt }) {
+  const [objectUrl, setObjectUrl] = react.useState("");
+  react.useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setObjectUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [blob]);
+  if (!objectUrl) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "h-full w-full overflow-auto flex items-center justify-center p-4 bg-muted/30",
+      "data-testid": "image-viewer",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: objectUrl,
+          alt,
+          className: "max-w-full max-h-full object-contain rounded shadow-sm",
+          "data-testid": "image-viewer-img"
+        }
+      )
+    }
+  );
+}
+function AudioViewer({ blob, title }) {
+  const [objectUrl, setObjectUrl] = react.useState("");
+  react.useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setObjectUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [blob]);
+  if (!objectUrl) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "h-full w-full flex items-center justify-center p-4 bg-muted/30",
+      "data-testid": "audio-viewer",
+      children: /* @__PURE__ */ jsxRuntime.jsx("audio", { src: objectUrl, controls: true, title, className: "w-full max-w-lg" })
+    }
+  );
+}
+function VideoViewer({ blob, title }) {
+  const [objectUrl, setObjectUrl] = react.useState("");
+  react.useEffect(() => {
+    const url = URL.createObjectURL(blob);
+    setObjectUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [blob]);
+  if (!objectUrl) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "h-full w-full overflow-auto flex items-center justify-center p-4 bg-muted/30",
+      "data-testid": "video-viewer",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          src: objectUrl,
+          controls: true,
+          title,
+          className: "max-w-full max-h-full rounded shadow-sm"
+        }
+      )
+    }
+  );
+}
+
+exports.AudioViewer = AudioViewer;
+exports.DocxViewer = DocxViewer;
+exports.INITIAL_LAZY_LOAD_BUFFER = INITIAL_LAZY_LOAD_BUFFER;
+exports.ImageViewer = ImageViewer;
+exports.LAZY_LOAD_BUFFER_AFTER = LAZY_LOAD_BUFFER_AFTER;
+exports.LAZY_LOAD_BUFFER_BEFORE = LAZY_LOAD_BUFFER_BEFORE;
+exports.PdfViewer = PdfViewer;
+exports.VideoViewer = VideoViewer;
+exports.XlsxViewer = XlsxViewer;
+exports.usePageIntersectionObserver = usePageIntersectionObserver;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map