viewdoc 0.1.0

package/dist/index.cjs

@@ -0,0 +1,994 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DocViewer: () => DocViewer,
+  DocxViewer: () => DocxViewer,
+  ImageViewer: () => ImageViewer,
+  PdfViewer: () => PdfViewer,
+  Toolbar: () => Toolbar,
+  ViewerShell: () => ViewerShell,
+  XlsxViewer: () => XlsxViewer,
+  detectFileType: () => detectFileType,
+  getUrlExtension: () => getUrlExtension,
+  useDraggable: () => useDraggable,
+  useZoomPan: () => useZoomPan
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/core/ViewerShell.tsx
+var import_react2 = require("react");
+
+// src/core/useDraggable.ts
+var import_react = require("react");
+function useDraggable(options = {}) {
+  const { defaultPosition = { x: 80, y: 80 }, draggable = true } = options;
+  const [position, setPosition] = (0, import_react.useState)(defaultPosition);
+  const onDragHandlePointerDown = (0, import_react.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
+var import_jsx_runtime = require("react/jsx-runtime");
+function Svg(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+  ] });
+}
+function ZoomInIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+  ] });
+}
+function DownloadIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 3v12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 10l5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 21h14" })
+  ] });
+}
+function FullscreenEnterIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 21 3 21 3 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+  ] });
+}
+function ResetIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 3-6.7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "3 3 3 8 8 8" })
+  ] });
+}
+function GripIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "5 9 2 12 5 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 5 12 2 15 5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 19 12 22 9 19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "19 9 22 12 19 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "2", x2: "12", y2: "22" })
+  ] });
+}
+function FullscreenExitIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Svg, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 3 9 9 3 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 21 15 15 21 15" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", y1: "9", x2: "3", y2: "3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "15", y1: "15", x2: "21", y2: "21" })
+  ] });
+}
+
+// src/core/Toolbar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Toolbar({
+  scale,
+  onZoomIn,
+  onZoomOut,
+  onReset,
+  onFullscreen,
+  onDownload,
+  isFullscreen = false,
+  showZoomControls = true,
+  dragHandle,
+  onDragHandlePointerDown,
+  extra
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "vd-toolbar", role: "toolbar", "aria-label": "Document viewer controls", children: [
+    dragHandle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "span",
+      {
+        className: "vd-toolbar-drag-handle",
+        onPointerDown: onDragHandlePointerDown,
+        title: "Drag to move",
+        "aria-label": "Drag to move",
+        children: dragHandle
+      }
+    ),
+    showZoomControls && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "vd-toolbar-btn",
+          onClick: onZoomOut,
+          "aria-label": "Zoom out",
+          title: "Zoom out",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoomOutIcon, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "vd-toolbar-scale", "aria-live": "polite", children: [
+        Math.round(scale * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { type: "button", className: "vd-toolbar-btn", onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ZoomInIcon, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "vd-toolbar-btn",
+          onClick: onReset,
+          "aria-label": "Reset zoom to 100%",
+          title: "Reset zoom to 100%",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ResetIcon, {})
+        }
+      )
+    ] }),
+    extra,
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vd-toolbar-spacer" }),
+    onDownload && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "vd-toolbar-btn",
+        onClick: onDownload,
+        "aria-label": "Download file",
+        title: "Download file",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DownloadIcon, {})
+      }
+    ),
+    onFullscreen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsx)(FullscreenExitIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(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
+var import_jsx_runtime3 = require("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 = (0, import_react2.useRef)(null);
+  const [isFullscreen, setIsFullscreen] = (0, import_react2.useState)(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
+  });
+  (0, import_react2.useEffect)(() => {
+    const onChange = () => setIsFullscreen(document.fullscreenElement === rootRef.current);
+    document.addEventListener("fullscreenchange", onChange);
+    return () => document.removeEventListener("fullscreenchange", onChange);
+  }, []);
+  const onFullscreen = (0, import_react2.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: `vd-shell${floating ? " vd-shell--floating" : ""}`,
+      ref: rootRef,
+      style: { ...themeToStyle(theme), ...sizeStyle, ...floatingStyle },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          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__ */ (0, import_jsx_runtime3.jsx)(GripIcon, {}) : void 0,
+            onDragHandlePointerDown: floating && draggable ? onDragHandlePointerDown : void 0,
+            extra: toolbarExtra
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "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__ */ (0, import_jsx_runtime3.jsx)(
+              "div",
+              {
+                className: "vd-canvas-content",
+                style: {
+                  transform: `translate(${zoomPan.translateX}px, ${zoomPan.translateY}px) scale(${zoomPan.scale})`,
+                  transformOrigin
+                },
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/core/useZoomPan.ts
+var import_react3 = require("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] = (0, import_react3.useState)({ scale: 1, translateX: 0, translateY: 0 });
+  const containerRef = (0, import_react3.useRef)(null);
+  const dragState = (0, import_react3.useRef)({
+    dragging: false,
+    startX: 0,
+    startY: 0,
+    originX: 0,
+    originY: 0
+  });
+  const scrollDragState = (0, import_react3.useRef)(
+    { dragging: false, startX: 0, startY: 0, originLeft: 0, originTop: 0 }
+  );
+  const clamp = (0, import_react3.useCallback)(
+    (value) => Math.min(maxScale, Math.max(minScale, value)),
+    [minScale, maxScale]
+  );
+  const setScale = (0, import_react3.useCallback)(
+    (scale) => setState((prev) => ({ ...prev, scale: clamp(scale) })),
+    [clamp]
+  );
+  const zoomIn = (0, import_react3.useCallback)(() => setScale(state.scale + zoomStep), [setScale, state.scale, zoomStep]);
+  const zoomOut = (0, import_react3.useCallback)(() => setScale(state.scale - zoomStep), [setScale, state.scale, zoomStep]);
+  const resetZoom = (0, import_react3.useCallback)(() => setState({ scale: 1, translateX: 0, translateY: 0 }), []);
+  const onWheel = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(
+    (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 = (0, import_react3.useCallback)(
+    (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/viewers/ImageViewer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function defaultDownload(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 ImageViewer({
+  uri,
+  fileName,
+  className,
+  style,
+  width,
+  height,
+  minScale,
+  maxScale,
+  zoomStep,
+  enableZoomControls = true,
+  enableWheelZoom = true,
+  enablePan = true,
+  enableFullscreen = true,
+  enableDownload = true,
+  onDownload,
+  theme,
+  floating = true,
+  windowDraggable = true,
+  defaultPosition
+}) {
+  const zoomPan = useZoomPan({ minScale, maxScale, zoomStep, enablePan, enableWheelZoom });
+  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__ */ (0, import_jsx_runtime4.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { className: "vd-image", src: uri, alt: fileName ?? "document image", draggable: false })
+    }
+  ) });
+}
+
+// src/viewers/PdfPage.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function PdfPage({ doc, pageNumber, renderScale = 1.5 }) {
+  const canvasRef = (0, import_react4.useRef)(null);
+  const renderTaskRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime5.jsx)("canvas", { ref: canvasRef, className: "vd-pdf-page", "data-page-number": pageNumber });
+}
+
+// src/viewers/usePdfDocument.ts
+var import_react5 = require("react");
+var pdfjsLib = __toESM(require("pdfjs-dist"), 1);
+var import_meta = {};
+pdfjsLib.GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/build/pdf.worker.min.mjs", import_meta.url).toString();
+function usePdfDocument(uri) {
+  const [doc, setDoc] = (0, import_react5.useState)(null);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react5.useState)(true);
+  (0, import_react5.useEffect)(() => {
+    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
+var import_react6 = require("react");
+function useVisiblePage(containerRef, numPages) {
+  const [currentPage, setCurrentPage] = (0, import_react6.useState)(1);
+  (0, import_react6.useEffect)(() => {
+    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);
+        }
+      },
+      { 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
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top center",
+      toolbarExtra: numPages > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vd-pdf-page-indicator", children: [
+        "Page ",
+        currentPage,
+        " / ",
+        numPages
+      ] }) : void 0,
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vd-pdf-page-indicator", children: "Loading PDF\u2026" }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "vd-pdf-page-indicator", children: [
+          "Failed to load PDF: ",
+          error.message
+        ] }),
+        doc && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "vd-pdf-pages", children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PdfPage, { doc, pageNumber: i + 1, renderScale }, i + 1)) })
+      ]
+    }
+  ) });
+}
+
+// src/viewers/useDocxHtml.ts
+var import_react7 = require("react");
+var import_mammoth = __toESM(require("mammoth"), 1);
+function useDocxHtml(uri) {
+  const [html, setHtml] = (0, import_react7.useState)(null);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [loading, setLoading] = (0, import_react7.useState)(true);
+  (0, import_react7.useEffect)(() => {
+    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) => import_mammoth.default.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
+var import_jsx_runtime7 = require("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__ */ (0, import_jsx_runtime7.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top center",
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "vd-doc-status", children: "Loading document\u2026" }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "vd-doc-status", children: [
+          "Failed to load document: ",
+          error.message
+        ] }),
+        html && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "vd-docx-page", dangerouslySetInnerHTML: { __html: html } })
+      ]
+    }
+  ) });
+}
+
+// src/viewers/XlsxViewer.tsx
+var import_react9 = require("react");
+var XLSX2 = __toESM(require("xlsx"), 1);
+
+// src/viewers/useXlsxWorkbook.ts
+var import_react8 = require("react");
+var XLSX = __toESM(require("xlsx"), 1);
+function useXlsxWorkbook(uri) {
+  const [workbook, setWorkbook] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(null);
+  const [loading, setLoading] = (0, import_react8.useState)(true);
+  (0, import_react8.useEffect)(() => {
+    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
+var import_jsx_runtime8 = require("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] = (0, import_react9.useState)(0);
+  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload4(uri, fileName)) : void 0;
+  const tableHtml = (0, import_react9.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__ */ (0, import_jsx_runtime8.jsx)("div", { className, style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top left",
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "vd-doc-status", children: "Loading spreadsheet\u2026" }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "vd-doc-status", children: [
+          "Failed to load spreadsheet: ",
+          error.message
+        ] }),
+        workbook && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vd-xlsx", children: [
+          workbook.SheetNames.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vd-xlsx-tabs", children: workbook.SheetNames.map((name, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              className: `vd-xlsx-tab${i === activeSheet ? " vd-xlsx-tab--active" : ""}`,
+              onClick: () => setActiveSheet(i),
+              children: name
+            },
+            name
+          )) }),
+          tableHtml && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "vd-xlsx-table", dangerouslySetInnerHTML: { __html: tableHtml } })
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/detectFileType.ts
+var EXTENSION_MAP = {
+  png: "image",
+  jpg: "image",
+  jpeg: "image",
+  gif: "image",
+  webp: "image",
+  svg: "image",
+  bmp: "image",
+  ico: "image",
+  avif: "image",
+  pdf: "pdf",
+  docx: "docx",
+  xlsx: "xlsx",
+  xls: "xlsx",
+  xlsm: "xlsx",
+  csv: "xlsx"
+};
+function getUrlExtension(uri) {
+  let pathname;
+  try {
+    pathname = new URL(uri, typeof window !== "undefined" ? window.location.href : "http://localhost").pathname;
+  } catch {
+    pathname = uri.split("?")[0].split("#")[0];
+  }
+  const match = pathname.match(/\.([a-zA-Z0-9]+)$/);
+  return match ? match[1].toLowerCase() : null;
+}
+function detectFileType(uri, hint) {
+  if (hint) {
+    const normalizedHint = hint.toLowerCase().replace(/^\./, "");
+    if (normalizedHint in EXTENSION_MAP) return EXTENSION_MAP[normalizedHint];
+    if (normalizedHint.startsWith("image/")) return "image";
+    if (normalizedHint === "application/pdf") return "pdf";
+  }
+  const extension = getUrlExtension(uri);
+  if (extension && extension in EXTENSION_MAP) return EXTENSION_MAP[extension];
+  return null;
+}
+
+// src/DocViewer.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function DocViewer({ uri, fileName, type, fallback, ...rest }) {
+  const detected = detectFileType(uri, type ?? fileName?.split(".").pop());
+  switch (detected) {
+    case "image":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ImageViewer, { uri, fileName, ...rest });
+    case "pdf":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PdfViewer, { uri, fileName, ...rest });
+    case "docx":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocxViewer, { uri, fileName, ...rest });
+    case "xlsx":
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(XlsxViewer, { uri, fileName, ...rest });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "vd-doc-status", children: [
+        'Unable to detect file type for "',
+        fileName ?? uri,
+        '".'
+      ] }) });
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DocViewer,
+  DocxViewer,
+  ImageViewer,
+  PdfViewer,
+  Toolbar,
+  ViewerShell,
+  XlsxViewer,
+  detectFileType,
+  getUrlExtension,
+  useDraggable,
+  useZoomPan
+});
+//# sourceMappingURL=index.cjs.map