viewdoc 0.1.1 → 0.2.1

package/dist/index.js

@@ -1,430 +1,16 @@
-// src/core/ViewerShell.tsx
-import { useCallback as useCallback2, useEffect, useRef, useState as useState2 } from "react";
-
-// src/core/useDraggable.ts
-import { useCallback, useState } from "react";
-function useDraggable(options = {}) {
-  const { defaultPosition = { x: 80, y: 80 }, draggable = true } = options;
-  const [position, setPosition] = useState(defaultPosition);
-  const onDragHandlePointerDown = useCallback(
-    (e) => {
-      if (!draggable) return;
-      e.preventDefault();
-      const startX = e.clientX;
-      const startY = e.clientY;
-      setPosition((current) => {
-        const originX = current.x;
-        const originY = current.y;
-        const onMove = (ev) => {
-          setPosition({ x: originX + (ev.clientX - startX), y: originY + (ev.clientY - startY) });
-        };
-        const onUp = () => {
-          window.removeEventListener("pointermove", onMove);
-          window.removeEventListener("pointerup", onUp);
-        };
-        window.addEventListener("pointermove", onMove);
-        window.addEventListener("pointerup", onUp);
-        return current;
-      });
-    },
-    [draggable]
-  );
-  return { position, onDragHandlePointerDown };
-}
-
-// src/core/icons.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function Svg(props) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props
-    }
-  );
-}
-function ZoomOutIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
-    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-    /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
-  ] });
-}
-function ZoomInIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "7" }),
-    /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-    /* @__PURE__ */ jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
-    /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
-  ] });
-}
-function DownloadIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M12 3v12" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 10l5 5 5-5" }),
-    /* @__PURE__ */ jsx("path", { d: "M5 21h14" })
-  ] });
-}
-function FullscreenEnterIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
-    /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
-    /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
-    /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
-  ] });
-}
-function ResetIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 3-6.7" }),
-    /* @__PURE__ */ jsx("polyline", { points: "3 3 3 8 8 8" })
-  ] });
-}
-function GripIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("polyline", { points: "5 9 2 12 5 15" }),
-    /* @__PURE__ */ jsx("polyline", { points: "9 5 12 2 15 5" }),
-    /* @__PURE__ */ jsx("polyline", { points: "15 19 12 22 9 19" }),
-    /* @__PURE__ */ jsx("polyline", { points: "19 9 22 12 19 15" }),
-    /* @__PURE__ */ jsx("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-    /* @__PURE__ */ jsx("line", { x1: "12", y1: "2", x2: "12", y2: "22" })
-  ] });
-}
-function FullscreenExitIcon() {
-  return /* @__PURE__ */ jsxs(Svg, { children: [
-    /* @__PURE__ */ jsx("polyline", { points: "9 3 9 9 3 9" }),
-    /* @__PURE__ */ jsx("polyline", { points: "15 21 15 15 21 15" }),
-    /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "3", y2: "3" }),
-    /* @__PURE__ */ jsx("line", { x1: "15", y1: "15", x2: "21", y2: "21" })
-  ] });
-}
-
-// src/core/Toolbar.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function Toolbar({
-  scale,
-  onZoomIn,
-  onZoomOut,
-  onReset,
-  onFullscreen,
-  onDownload,
-  isFullscreen = false,
-  showZoomControls = true,
-  dragHandle,
-  onDragHandlePointerDown,
-  extra
-}) {
-  return /* @__PURE__ */ jsxs2("div", { className: "vd-toolbar", role: "toolbar", "aria-label": "Document viewer controls", children: [
-    dragHandle && /* @__PURE__ */ jsx2(
-      "span",
-      {
-        className: "vd-toolbar-drag-handle",
-        onPointerDown: onDragHandlePointerDown,
-        title: "Drag to move",
-        "aria-label": "Drag to move",
-        children: dragHandle
-      }
-    ),
-    showZoomControls && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          className: "vd-toolbar-btn",
-          onClick: onZoomOut,
-          "aria-label": "Zoom out",
-          title: "Zoom out",
-          children: /* @__PURE__ */ jsx2(ZoomOutIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsxs2("span", { className: "vd-toolbar-scale", "aria-live": "polite", children: [
-        Math.round(scale * 100),
-        "%"
-      ] }),
-      /* @__PURE__ */ jsx2("button", { type: "button", className: "vd-toolbar-btn", onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in", children: /* @__PURE__ */ jsx2(ZoomInIcon, {}) }),
-      /* @__PURE__ */ jsx2(
-        "button",
-        {
-          type: "button",
-          className: "vd-toolbar-btn",
-          onClick: onReset,
-          "aria-label": "Reset zoom to 100%",
-          title: "Reset zoom to 100%",
-          children: /* @__PURE__ */ jsx2(ResetIcon, {})
-        }
-      )
-    ] }),
-    extra,
-    /* @__PURE__ */ jsx2("span", { className: "vd-toolbar-spacer" }),
-    onDownload && /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "vd-toolbar-btn",
-        onClick: onDownload,
-        "aria-label": "Download file",
-        title: "Download file",
-        children: /* @__PURE__ */ jsx2(DownloadIcon, {})
-      }
-    ),
-    onFullscreen && /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        className: "vd-toolbar-btn",
-        onClick: onFullscreen,
-        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-        title: isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-        children: isFullscreen ? /* @__PURE__ */ jsx2(FullscreenExitIcon, {}) : /* @__PURE__ */ jsx2(FullscreenEnterIcon, {})
-      }
-    )
-  ] });
-}
-
-// src/core/theme.ts
-var THEME_VAR_MAP = {
-  background: "--vd-bg",
-  toolbarBackground: "--vd-toolbar-bg",
-  toolbarBorderColor: "--vd-toolbar-border-color",
-  toolbarButtonHoverBackground: "--vd-toolbar-btn-hover-bg",
-  textColor: "--vd-text-color",
-  borderRadius: "--vd-border-radius",
-  toolbarButtonRadius: "--vd-toolbar-btn-radius"
-};
-function themeToStyle(theme) {
-  if (!theme) return void 0;
-  const style = {};
-  for (const key of Object.keys(theme)) {
-    const value = theme[key];
-    if (value) style[THEME_VAR_MAP[key]] = value;
-  }
-  return style;
-}
-
-// src/core/ViewerShell.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function ViewerShell({
-  zoomPan,
-  onDownload,
-  toolbarExtra,
-  children,
-  enableZoomControls = true,
-  enableFullscreen = true,
-  enablePan = true,
-  theme,
-  width,
-  height,
-  floating = true,
-  draggable = true,
-  defaultPosition,
-  transformOrigin
-}) {
-  const rootRef = useRef(null);
-  const [isFullscreen, setIsFullscreen] = useState2(false);
-  const effectiveWidth = typeof width === "number" ? width : 1200;
-  const effectiveHeight = typeof height === "number" ? height : 700;
-  const resolvedDefaultPosition = defaultPosition ?? (typeof window !== "undefined" ? {
-    x: Math.max(0, (window.innerWidth - effectiveWidth) / 2),
-    y: Math.max(0, (window.innerHeight - effectiveHeight) / 2)
-  } : { x: 80, y: 80 });
-  const { position, onDragHandlePointerDown } = useDraggable({
-    defaultPosition: resolvedDefaultPosition,
-    draggable
-  });
-  useEffect(() => {
-    const onChange = () => setIsFullscreen(document.fullscreenElement === rootRef.current);
-    document.addEventListener("fullscreenchange", onChange);
-    return () => document.removeEventListener("fullscreenchange", onChange);
-  }, []);
-  const onFullscreen = useCallback2(() => {
-    const el = rootRef.current;
-    if (!el) return;
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-    } else {
-      el.requestFullscreen();
-    }
-  }, []);
-  const sizeStyle = {
-    width: width ?? 1200,
-    height: height ?? 700
-  };
-  const floatingStyle = floating ? { position: "fixed", left: position.x, top: position.y } : void 0;
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: `vd-shell${floating ? " vd-shell--floating" : ""}`,
-      ref: rootRef,
-      style: { ...themeToStyle(theme), ...sizeStyle, ...floatingStyle },
-      children: [
-        /* @__PURE__ */ jsx3(
-          Toolbar,
-          {
-            scale: zoomPan.scale,
-            onZoomIn: zoomPan.zoomIn,
-            onZoomOut: zoomPan.zoomOut,
-            onReset: zoomPan.resetZoom,
-            onFullscreen: enableFullscreen ? onFullscreen : void 0,
-            onDownload,
-            isFullscreen,
-            showZoomControls: enableZoomControls,
-            dragHandle: floating && draggable ? /* @__PURE__ */ jsx3(GripIcon, {}) : void 0,
-            onDragHandlePointerDown: floating && draggable ? onDragHandlePointerDown : void 0,
-            extra: toolbarExtra
-          }
-        ),
-        /* @__PURE__ */ jsx3(
-          "div",
-          {
-            className: `vd-canvas${enablePan ? "" : " vd-canvas--no-pan"}`,
-            ref: zoomPan.containerRef,
-            onWheel: zoomPan.handlers.onWheel,
-            onPointerDown: zoomPan.handlers.onPointerDown,
-            onPointerMove: zoomPan.handlers.onPointerMove,
-            onPointerUp: zoomPan.handlers.onPointerUp,
-            children: /* @__PURE__ */ jsx3(
-              "div",
-              {
-                className: "vd-canvas-content",
-                style: {
-                  transform: `translate(${zoomPan.translateX}px, ${zoomPan.translateY}px) scale(${zoomPan.scale})`,
-                  transformOrigin
-                },
-                children
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
+import {
+  Toolbar,
+  ViewerShell,
+  useDraggable,
+  useZoomPan
+} from "./chunk-OA35SYM6.js";
 
-// src/core/useZoomPan.ts
-import { useCallback as useCallback3, useRef as useRef2, useState as useState3 } from "react";
-var DEFAULT_MIN = 0.1;
-var DEFAULT_MAX = 8;
-var DEFAULT_STEP = 0.25;
-function useZoomPan(options = {}) {
-  const {
-    minScale = DEFAULT_MIN,
-    maxScale = DEFAULT_MAX,
-    zoomStep = DEFAULT_STEP,
-    enablePan = true,
-    enableWheelZoom = true,
-    enableDragScroll = false
-  } = options;
-  const [state, setState] = useState3({ scale: 1, translateX: 0, translateY: 0 });
-  const containerRef = useRef2(null);
-  const dragState = useRef2({
-    dragging: false,
-    startX: 0,
-    startY: 0,
-    originX: 0,
-    originY: 0
-  });
-  const scrollDragState = useRef2(
-    { dragging: false, startX: 0, startY: 0, originLeft: 0, originTop: 0 }
-  );
-  const clamp = useCallback3(
-    (value) => Math.min(maxScale, Math.max(minScale, value)),
-    [minScale, maxScale]
-  );
-  const setScale = useCallback3(
-    (scale) => setState((prev) => ({ ...prev, scale: clamp(scale) })),
-    [clamp]
-  );
-  const zoomIn = useCallback3(() => setScale(state.scale + zoomStep), [setScale, state.scale, zoomStep]);
-  const zoomOut = useCallback3(() => setScale(state.scale - zoomStep), [setScale, state.scale, zoomStep]);
-  const resetZoom = useCallback3(() => setState({ scale: 1, translateX: 0, translateY: 0 }), []);
-  const onWheel = useCallback3(
-    (e) => {
-      if (!enableWheelZoom) return;
-      if (!e.ctrlKey && !e.metaKey) return;
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -zoomStep : zoomStep;
-      setScale(state.scale + delta);
-    },
-    [enableWheelZoom, setScale, state.scale, zoomStep]
-  );
-  const onPointerDown = useCallback3(
-    (e) => {
-      if (enablePan) {
-        dragState.current = {
-          dragging: true,
-          startX: e.clientX,
-          startY: e.clientY,
-          originX: state.translateX,
-          originY: state.translateY
-        };
-        e.target.setPointerCapture(e.pointerId);
-      } else if (enableDragScroll && containerRef.current) {
-        scrollDragState.current = {
-          dragging: true,
-          startX: e.clientX,
-          startY: e.clientY,
-          originLeft: containerRef.current.scrollLeft,
-          originTop: containerRef.current.scrollTop
-        };
-        e.target.setPointerCapture(e.pointerId);
-      }
-    },
-    [enablePan, enableDragScroll, state.translateX, state.translateY]
-  );
-  const onPointerMove = useCallback3(
-    (e) => {
-      if (enablePan) {
-        if (!dragState.current.dragging) return;
-        const dx = e.clientX - dragState.current.startX;
-        const dy = e.clientY - dragState.current.startY;
-        setState((prev) => ({
-          ...prev,
-          translateX: dragState.current.originX + dx,
-          translateY: dragState.current.originY + dy
-        }));
-      } else if (enableDragScroll) {
-        if (!scrollDragState.current.dragging || !containerRef.current) return;
-        const dx = e.clientX - scrollDragState.current.startX;
-        const dy = e.clientY - scrollDragState.current.startY;
-        containerRef.current.scrollLeft = scrollDragState.current.originLeft - dx;
-        containerRef.current.scrollTop = scrollDragState.current.originTop - dy;
-      }
-    },
-    [enablePan, enableDragScroll]
-  );
-  const onPointerUp = useCallback3(
-    (e) => {
-      if (enablePan) {
-        dragState.current.dragging = false;
-        e.target.releasePointerCapture(e.pointerId);
-      } else if (enableDragScroll) {
-        scrollDragState.current.dragging = false;
-        e.target.releasePointerCapture(e.pointerId);
-      }
-    },
-    [enablePan, enableDragScroll]
-  );
-  return {
-    ...state,
-    containerRef,
-    zoomIn,
-    zoomOut,
-    resetZoom,
-    setScale,
-    handlers: { onWheel, onPointerDown, onPointerMove, onPointerUp }
-  };
-}
+// src/DocViewer.tsx
+import { lazy, Suspense } from "react";
 
 // src/viewers/ImageViewer.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 function defaultDownload(uri, fileName) {
   const link = document.createElement("a");
   link.href = uri;
@@ -456,9 +42,11 @@ function ImageViewer({
   defaultPosition
 }) {
   const zoomPan = useZoomPan({ minScale, maxScale, zoomStep, enablePan, enableWheelZoom });
+  const [failed, setFailed] = useState(false);
+  useEffect(() => setFailed(false), [uri]);
   const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : void 0;
   const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
-  return /* @__PURE__ */ jsx4("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsx(
     ViewerShell,
     {
       zoomPan,
@@ -472,399 +60,20 @@ function ImageViewer({
       floating,
       draggable: windowDraggable,
       defaultPosition,
-      children: /* @__PURE__ */ jsx4("img", { className: "vd-image", src: uri, alt: fileName ?? "document image", draggable: false })
-    }
-  ) });
-}
-
-// src/viewers/PdfPage.tsx
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function PdfPage({ doc, pageNumber, renderScale = 1.5 }) {
-  const canvasRef = useRef3(null);
-  const renderTaskRef = useRef3(null);
-  useEffect2(() => {
-    let cancelled = false;
-    doc.getPage(pageNumber).then((page) => {
-      if (cancelled) return;
-      const viewport = page.getViewport({ scale: renderScale });
-      const canvas = canvasRef.current;
-      if (!canvas) return;
-      const context = canvas.getContext("2d");
-      if (!context) return;
-      canvas.width = viewport.width;
-      canvas.height = viewport.height;
-      canvas.style.width = `${viewport.width / renderScale}px`;
-      canvas.style.height = `${viewport.height / renderScale}px`;
-      const renderTask = page.render({ canvasContext: context, viewport, canvas });
-      renderTaskRef.current = renderTask;
-      renderTask.promise.catch(() => {
-      });
-    });
-    return () => {
-      cancelled = true;
-      renderTaskRef.current?.cancel();
-    };
-  }, [doc, pageNumber, renderScale]);
-  return /* @__PURE__ */ jsx5("canvas", { ref: canvasRef, className: "vd-pdf-page", "data-page-number": pageNumber });
-}
-
-// src/viewers/usePdfDocument.ts
-import { useEffect as useEffect3, useState as useState4 } from "react";
-import * as pdfjsLib from "pdfjs-dist";
-pdfjsLib.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url).toString();
-function usePdfDocument(uri) {
-  const [doc, setDoc] = useState4(null);
-  const [error, setError] = useState4(null);
-  const [loading, setLoading] = useState4(true);
-  useEffect3(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setDoc(null);
-    const loadingTask = pdfjsLib.getDocument({ url: uri });
-    loadingTask.promise.then((pdf) => {
-      if (cancelled) return;
-      setDoc(pdf);
-      setLoading(false);
-    }).catch((err) => {
-      if (!cancelled) {
-        setError(err);
-        setLoading(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-      loadingTask.destroy();
-    };
-  }, [uri]);
-  return { doc, numPages: doc?.numPages ?? 0, error, loading };
-}
-
-// src/viewers/useVisiblePage.ts
-import { useEffect as useEffect4, useState as useState5 } from "react";
-function useVisiblePage(containerRef, numPages) {
-  const [currentPage, setCurrentPage] = useState5(1);
-  useEffect4(() => {
-    const root = containerRef.current;
-    if (!root || numPages === 0) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const mostVisible = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
-        if (mostVisible) {
-          const page = Number(mostVisible.target.dataset.pageNumber);
-          if (page) setCurrentPage(page);
+      children: failed ? /* @__PURE__ */ jsxs("span", { className: "vd-doc-status", children: [
+        'Failed to load image "',
+        fileName ?? uri,
+        '".'
+      ] }) : /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "vd-image",
+          src: uri,
+          alt: fileName ?? "document image",
+          draggable: false,
+          onError: () => setFailed(true)
         }
-      },
-      { root, threshold: [0.25, 0.5, 0.75] }
-    );
-    const pages = root.querySelectorAll("[data-page-number]");
-    pages.forEach((el) => observer.observe(el));
-    return () => observer.disconnect();
-  }, [containerRef, numPages]);
-  return currentPage;
-}
-
-// src/viewers/PdfViewer.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-function defaultDownload2(uri, fileName) {
-  const link = document.createElement("a");
-  link.href = uri;
-  link.download = fileName ?? "";
-  link.rel = "noopener";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-function PdfViewer({
-  uri,
-  fileName,
-  className,
-  style,
-  width,
-  height,
-  minScale = 0.25,
-  maxScale = 5,
-  zoomStep,
-  renderScale,
-  enableZoomControls = true,
-  enableWheelZoom = true,
-  enableFullscreen = true,
-  enableDownload = true,
-  onDownload,
-  theme,
-  floating = true,
-  windowDraggable = true,
-  defaultPosition
-}) {
-  const zoomPan = useZoomPan({
-    minScale,
-    maxScale,
-    zoomStep,
-    enablePan: false,
-    enableDragScroll: true,
-    enableWheelZoom
-  });
-  const { doc, numPages, error, loading } = usePdfDocument(uri);
-  const currentPage = useVisiblePage(zoomPan.containerRef, numPages);
-  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload2(uri, fileName)) : void 0;
-  const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
-  return /* @__PURE__ */ jsx6("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxs4(
-    ViewerShell,
-    {
-      zoomPan,
-      onDownload: handleDownload,
-      enableZoomControls,
-      enableFullscreen,
-      enablePan: false,
-      theme,
-      width,
-      height,
-      floating,
-      draggable: windowDraggable,
-      defaultPosition,
-      transformOrigin: "top center",
-      toolbarExtra: numPages > 0 ? /* @__PURE__ */ jsxs4("span", { className: "vd-pdf-page-indicator", children: [
-        "Page ",
-        currentPage,
-        " / ",
-        numPages
-      ] }) : void 0,
-      children: [
-        loading && /* @__PURE__ */ jsx6("span", { className: "vd-pdf-page-indicator", children: "Loading PDF\u2026" }),
-        error && /* @__PURE__ */ jsxs4("span", { className: "vd-pdf-page-indicator", children: [
-          "Failed to load PDF: ",
-          error.message
-        ] }),
-        doc && /* @__PURE__ */ jsx6("div", { className: "vd-pdf-pages", children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ jsx6(PdfPage, { doc, pageNumber: i + 1, renderScale }, i + 1)) })
-      ]
-    }
-  ) });
-}
-
-// src/viewers/useDocxHtml.ts
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import mammoth from "mammoth";
-function useDocxHtml(uri) {
-  const [html, setHtml] = useState6(null);
-  const [error, setError] = useState6(null);
-  const [loading, setLoading] = useState6(true);
-  useEffect5(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setHtml(null);
-    fetch(uri).then((res) => {
-      if (!res.ok) throw new Error(`Failed to fetch document: ${res.status} ${res.statusText}`);
-      return res.arrayBuffer();
-    }).then((arrayBuffer) => mammoth.convertToHtml({ arrayBuffer })).then((result) => {
-      if (cancelled) return;
-      setHtml(result.value);
-      setLoading(false);
-    }).catch((err) => {
-      if (!cancelled) {
-        setError(err);
-        setLoading(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [uri]);
-  return { html, error, loading };
-}
-
-// src/viewers/DocxViewer.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-function defaultDownload3(uri, fileName) {
-  const link = document.createElement("a");
-  link.href = uri;
-  link.download = fileName ?? "";
-  link.rel = "noopener";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-function DocxViewer({
-  uri,
-  fileName,
-  className,
-  style,
-  width,
-  height,
-  minScale = 0.5,
-  maxScale = 3,
-  zoomStep,
-  enableZoomControls = true,
-  enableWheelZoom = true,
-  enableFullscreen = true,
-  enableDownload = true,
-  onDownload,
-  theme,
-  floating = true,
-  windowDraggable = true,
-  defaultPosition
-}) {
-  const zoomPan = useZoomPan({
-    minScale,
-    maxScale,
-    zoomStep,
-    enablePan: false,
-    enableDragScroll: true,
-    enableWheelZoom
-  });
-  const { html, error, loading } = useDocxHtml(uri);
-  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload3(uri, fileName)) : void 0;
-  const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
-  return /* @__PURE__ */ jsx7("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxs5(
-    ViewerShell,
-    {
-      zoomPan,
-      onDownload: handleDownload,
-      enableZoomControls,
-      enableFullscreen,
-      enablePan: false,
-      theme,
-      width,
-      height,
-      floating,
-      draggable: windowDraggable,
-      defaultPosition,
-      transformOrigin: "top center",
-      children: [
-        loading && /* @__PURE__ */ jsx7("span", { className: "vd-doc-status", children: "Loading document\u2026" }),
-        error && /* @__PURE__ */ jsxs5("span", { className: "vd-doc-status", children: [
-          "Failed to load document: ",
-          error.message
-        ] }),
-        html && /* @__PURE__ */ jsx7("div", { className: "vd-docx-page", dangerouslySetInnerHTML: { __html: html } })
-      ]
-    }
-  ) });
-}
-
-// src/viewers/XlsxViewer.tsx
-import { useMemo, useState as useState8 } from "react";
-import * as XLSX2 from "xlsx";
-
-// src/viewers/useXlsxWorkbook.ts
-import { useEffect as useEffect6, useState as useState7 } from "react";
-import * as XLSX from "xlsx";
-function useXlsxWorkbook(uri) {
-  const [workbook, setWorkbook] = useState7(null);
-  const [error, setError] = useState7(null);
-  const [loading, setLoading] = useState7(true);
-  useEffect6(() => {
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setWorkbook(null);
-    fetch(uri).then((res) => {
-      if (!res.ok) throw new Error(`Failed to fetch spreadsheet: ${res.status} ${res.statusText}`);
-      return res.arrayBuffer();
-    }).then((arrayBuffer) => {
-      if (cancelled) return;
-      const wb = XLSX.read(arrayBuffer, { type: "array" });
-      setWorkbook(wb);
-      setLoading(false);
-    }).catch((err) => {
-      if (!cancelled) {
-        setError(err);
-        setLoading(false);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [uri]);
-  return { workbook, error, loading };
-}
-
-// src/viewers/XlsxViewer.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function defaultDownload4(uri, fileName) {
-  const link = document.createElement("a");
-  link.href = uri;
-  link.download = fileName ?? "";
-  link.rel = "noopener";
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-}
-function XlsxViewer({
-  uri,
-  fileName,
-  className,
-  style,
-  width,
-  height,
-  minScale = 0.5,
-  maxScale = 3,
-  zoomStep,
-  enableZoomControls = true,
-  enableWheelZoom = true,
-  enableFullscreen = true,
-  enableDownload = true,
-  onDownload,
-  theme,
-  floating = true,
-  windowDraggable = true,
-  defaultPosition
-}) {
-  const zoomPan = useZoomPan({
-    minScale,
-    maxScale,
-    zoomStep,
-    enablePan: false,
-    enableDragScroll: true,
-    enableWheelZoom
-  });
-  const { workbook, error, loading } = useXlsxWorkbook(uri);
-  const [activeSheet, setActiveSheet] = useState8(0);
-  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload4(uri, fileName)) : void 0;
-  const tableHtml = useMemo(() => {
-    if (!workbook) return null;
-    const sheetName = workbook.SheetNames[activeSheet];
-    const sheet = workbook.Sheets[sheetName];
-    if (!sheet) return null;
-    return XLSX2.utils.sheet_to_html(sheet, { editable: false });
-  }, [workbook, activeSheet]);
-  const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
-  return /* @__PURE__ */ jsx8("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxs6(
-    ViewerShell,
-    {
-      zoomPan,
-      onDownload: handleDownload,
-      enableZoomControls,
-      enableFullscreen,
-      enablePan: false,
-      theme,
-      width,
-      height,
-      floating,
-      draggable: windowDraggable,
-      defaultPosition,
-      transformOrigin: "top left",
-      children: [
-        loading && /* @__PURE__ */ jsx8("span", { className: "vd-doc-status", children: "Loading spreadsheet\u2026" }),
-        error && /* @__PURE__ */ jsxs6("span", { className: "vd-doc-status", children: [
-          "Failed to load spreadsheet: ",
-          error.message
-        ] }),
-        workbook && /* @__PURE__ */ jsxs6("div", { className: "vd-xlsx", children: [
-          workbook.SheetNames.length > 1 && /* @__PURE__ */ jsx8("div", { className: "vd-xlsx-tabs", children: workbook.SheetNames.map((name, i) => /* @__PURE__ */ jsx8(
-            "button",
-            {
-              type: "button",
-              className: `vd-xlsx-tab${i === activeSheet ? " vd-xlsx-tab--active" : ""}`,
-              onClick: () => setActiveSheet(i),
-              children: name
-            },
-            name
-          )) }),
-          tableHtml && /* @__PURE__ */ jsx8("div", { className: "vd-xlsx-table", dangerouslySetInnerHTML: { __html: tableHtml } })
-        ] })
-      ]
+      )
     }
   ) });
 }
@@ -910,20 +119,23 @@ function detectFileType(uri, hint) {
 }
 
 // src/DocViewer.tsx
-import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function DocViewer({ uri, fileName, type, fallback, ...rest }) {
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PdfViewer = lazy(() => import("./PdfViewer-YJOHTAPL.js").then((m) => ({ default: m.PdfViewer })));
+var DocxViewer = lazy(() => import("./DocxViewer-HQFSWXQW.js").then((m) => ({ default: m.DocxViewer })));
+var XlsxViewer = lazy(() => import("./XlsxViewer-SQMAF5UA.js").then((m) => ({ default: m.XlsxViewer })));
+function DocViewer({ uri, fileName, type, fallback, loadingFallback, ...rest }) {
   const detected = detectFileType(uri, type ?? fileName?.split(".").pop());
   switch (detected) {
     case "image":
-      return /* @__PURE__ */ jsx9(ImageViewer, { uri, fileName, ...rest });
+      return /* @__PURE__ */ jsx2(ImageViewer, { uri, fileName, ...rest });
     case "pdf":
-      return /* @__PURE__ */ jsx9(PdfViewer, { uri, fileName, ...rest });
+      return /* @__PURE__ */ jsx2(Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ jsx2(PdfViewer, { uri, fileName, ...rest }) });
     case "docx":
-      return /* @__PURE__ */ jsx9(DocxViewer, { uri, fileName, ...rest });
+      return /* @__PURE__ */ jsx2(Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ jsx2(DocxViewer, { uri, fileName, ...rest }) });
     case "xlsx":
-      return /* @__PURE__ */ jsx9(XlsxViewer, { uri, fileName, ...rest });
+      return /* @__PURE__ */ jsx2(Suspense, { fallback: loadingFallback ?? null, children: /* @__PURE__ */ jsx2(XlsxViewer, { uri, fileName, ...rest }) });
     default:
-      return /* @__PURE__ */ jsx9(Fragment2, { children: fallback ?? /* @__PURE__ */ jsxs7("div", { className: "vd-doc-status", children: [
+      return /* @__PURE__ */ jsx2(Fragment, { children: fallback ?? /* @__PURE__ */ jsxs2("div", { className: "vd-doc-status", children: [
         'Unable to detect file type for "',
         fileName ?? uri,
         '".'
@@ -932,12 +144,9 @@ function DocViewer({ uri, fileName, type, fallback, ...rest }) {
 }
 export {
   DocViewer,
-  DocxViewer,
   ImageViewer,
-  PdfViewer,
   Toolbar,
   ViewerShell,
-  XlsxViewer,
   detectFileType,
   getUrlExtension,
   useDraggable,