viewdoc 0.1.1 → 0.2.0

package/README.md

@@ -14,7 +14,7 @@ import 'viewdoc/styles.css'
 <DocViewer uri="https://example.com/report.pdf" />
 ```
 
-That's it — `DocViewer` detects the file type from the URL and renders the right viewer.
+That's it — `DocViewer` detects the file type from the URL and renders the right viewer. It loads whichever parser it needs (PDF/DOCX/XLSX) lazily at runtime — importing `viewdoc` for image-only use costs ~70KB gzipped, not the full bundle.
 
 ## Install
 
@@ -67,10 +67,13 @@ If detection fails and no `type` is given, `DocViewer` renders a `fallback` node
 
 ### Individual viewers
 
-Use these directly if you already know the file type, or want a smaller bundle (each one is independently tree-shakeable):
+`ImageViewer` is cheap (no extra dependencies) and lives on the main entry. `PdfViewer`, `DocxViewer` and `XlsxViewer` each pull in a sizeable parser (`pdfjs-dist`, `mammoth`, `xlsx` respectively), so they live on their own subpaths — this keeps `viewdoc`'s main entry small for apps that only need images, and `DocViewer` loads whichever one it needs lazily at runtime instead of bundling all three upfront.
 
 ```tsx
-import { ImageViewer, PdfViewer, DocxViewer, XlsxViewer } from 'viewdoc'
+import { ImageViewer } from 'viewdoc'
+import { PdfViewer } from 'viewdoc/pdf'
+import { DocxViewer } from 'viewdoc/docx'
+import { XlsxViewer } from 'viewdoc/xlsx'
 
 <ImageViewer uri="https://example.com/photo.jpg" />
 <PdfViewer uri="https://example.com/report.pdf" />

package/dist/DocxViewer-VQN3BESX.js

@@ -0,0 +1,8 @@
+import {
+  DocxViewer
+} from "./chunk-4VVVAGYE.js";
+import "./chunk-OA35SYM6.js";
+export {
+  DocxViewer
+};
+//# sourceMappingURL=DocxViewer-VQN3BESX.js.map

package/dist/DocxViewer-VQN3BESX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/PdfViewer-NVAQBI2Y.js

@@ -0,0 +1,8 @@
+import {
+  PdfViewer
+} from "./chunk-KRN2POC4.js";
+import "./chunk-OA35SYM6.js";
+export {
+  PdfViewer
+};
+//# sourceMappingURL=PdfViewer-NVAQBI2Y.js.map

package/dist/PdfViewer-NVAQBI2Y.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/XlsxViewer-SQMAF5UA.js

@@ -0,0 +1,8 @@
+import {
+  XlsxViewer
+} from "./chunk-LE4YTMPN.js";
+import "./chunk-OA35SYM6.js";
+export {
+  XlsxViewer
+};
+//# sourceMappingURL=XlsxViewer-SQMAF5UA.js.map

package/dist/XlsxViewer-SQMAF5UA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-4VVVAGYE.js

@@ -0,0 +1,110 @@
+import {
+  ViewerShell,
+  useZoomPan
+} from "./chunk-OA35SYM6.js";
+
+// src/viewers/useDocxHtml.ts
+import { useEffect, useState } from "react";
+import mammoth from "mammoth";
+function useDocxHtml(uri) {
+  const [html, setHtml] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  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) => 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, jsxs } from "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 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 ?? (() => defaultDownload(uri, fileName)) : void 0;
+  const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
+  return /* @__PURE__ */ jsx("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxs(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top center",
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "vd-doc-status", children: "Loading document\u2026" }),
+        error && /* @__PURE__ */ jsxs("span", { className: "vd-doc-status", children: [
+          "Failed to load document: ",
+          error.message
+        ] }),
+        html && /* @__PURE__ */ jsx("div", { className: "vd-docx-page", dangerouslySetInnerHTML: { __html: html } })
+      ]
+    }
+  ) });
+}
+
+export {
+  DocxViewer
+};
+//# sourceMappingURL=chunk-4VVVAGYE.js.map

package/dist/chunk-4VVVAGYE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/viewers/useDocxHtml.ts","../src/viewers/DocxViewer.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\nimport mammoth from 'mammoth'\n\nexport interface UseDocxHtmlResult {\n  html: string | null\n  error: Error | null\n  loading: boolean\n}\n\nexport function useDocxHtml(uri: string): UseDocxHtmlResult {\n  const [html, setHtml] = useState<string | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    let cancelled = false\n    setLoading(true)\n    setError(null)\n    setHtml(null)\n\n    fetch(uri)\n      .then((res) => {\n        if (!res.ok) throw new Error(`Failed to fetch document: ${res.status} ${res.statusText}`)\n        return res.arrayBuffer()\n      })\n      .then((arrayBuffer) => mammoth.convertToHtml({ arrayBuffer }))\n      .then((result) => {\n        if (cancelled) return\n        setHtml(result.value)\n        setLoading(false)\n      })\n      .catch((err: Error) => {\n        if (!cancelled) {\n          setError(err)\n          setLoading(false)\n        }\n      })\n\n    return () => {\n      cancelled = true\n    }\n  }, [uri])\n\n  return { html, error, loading }\n}\n","import type { CSSProperties } from 'react'\nimport { ViewerShell } from '../core/ViewerShell'\nimport type { ViewerTheme } from '../core/theme'\nimport type { Position } from '../core/useDraggable'\nimport { useZoomPan } from '../core/useZoomPan'\nimport { useDocxHtml } from './useDocxHtml'\n\nexport interface DocxViewerProps {\n  /** URL of the .docx file to display. */\n  uri: string\n  /** Used as the suggested filename on download. */\n  fileName?: string\n  className?: string\n  style?: CSSProperties\n\n  /** Width of the viewer. Accepts any CSS size (e.g. 1200, '1200px', '100%'). Default: 1200. */\n  width?: number | string\n  /** Height of the viewer. Accepts any CSS size (e.g. 700, '700px', '100vh'). Default: 700. */\n  height?: number | string\n\n  /** Minimum zoom scale. Default: 0.5 */\n  minScale?: number\n  /** Maximum zoom scale. Default: 3 */\n  maxScale?: number\n  /** Zoom increment per step (buttons / Ctrl+scroll). Default: 0.25 */\n  zoomStep?: number\n\n  /** Show zoom in/out and reset-to-100% controls. Default: true. */\n  enableZoomControls?: boolean\n  /** Allow Ctrl/Cmd + scroll wheel to zoom. Default: true. */\n  enableWheelZoom?: boolean\n  /** Show the fullscreen toggle button. Default: true. */\n  enableFullscreen?: boolean\n  /** Show the download button. Default: true. */\n  enableDownload?: boolean\n  /** Called when the download button is clicked. If omitted, downloads `uri` directly. */\n  onDownload?: () => void\n  /** Colors/radii to override the default look (toolbar background, text color, etc). */\n  theme?: ViewerTheme\n\n  /** Render as a floating window (position: fixed) that can be dragged, instead of filling the parent. Default: true. */\n  floating?: boolean\n  /** When floating, allow dragging the window by its toolbar. Default: true. */\n  windowDraggable?: boolean\n  /** Initial position when floating. Default: centered in the viewport. */\n  defaultPosition?: Position\n}\n\nfunction defaultDownload(uri: string, fileName?: string) {\n  const link = document.createElement('a')\n  link.href = uri\n  link.download = fileName ?? ''\n  link.rel = 'noopener'\n  document.body.appendChild(link)\n  link.click()\n  document.body.removeChild(link)\n}\n\nexport function DocxViewer({\n  uri,\n  fileName,\n  className,\n  style,\n  width,\n  height,\n  minScale = 0.5,\n  maxScale = 3,\n  zoomStep,\n  enableZoomControls = true,\n  enableWheelZoom = true,\n  enableFullscreen = true,\n  enableDownload = true,\n  onDownload,\n  theme,\n  floating = true,\n  windowDraggable = true,\n  defaultPosition,\n}: DocxViewerProps) {\n  const zoomPan = useZoomPan({\n    minScale,\n    maxScale,\n    zoomStep,\n    enablePan: false,\n    enableDragScroll: true,\n    enableWheelZoom,\n  })\n  const { html, error, loading } = useDocxHtml(uri)\n\n  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : undefined\n\n  const wrapperStyle: CSSProperties = floating\n    ? { ...style }\n    : { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', ...style }\n\n  return (\n    <div className={className} style={wrapperStyle}>\n      <ViewerShell\n        zoomPan={zoomPan}\n        onDownload={handleDownload}\n        enableZoomControls={enableZoomControls}\n        enableFullscreen={enableFullscreen}\n        enablePan={false}\n        theme={theme}\n        width={width}\n        height={height}\n        floating={floating}\n        draggable={windowDraggable}\n        defaultPosition={defaultPosition}\n        transformOrigin=\"top center\"\n      >\n        {loading && <span className=\"vd-doc-status\">Loading document…</span>}\n        {error && <span className=\"vd-doc-status\">Failed to load document: {error.message}</span>}\n        {html && <div className=\"vd-docx-page\" dangerouslySetInnerHTML={{ __html: html }} />}\n      </ViewerShell>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAAA,SAAS,WAAW,gBAAgB;AACpC,OAAO,aAAa;AAQb,SAAS,YAAY,KAAgC;AAC1D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,YAAU,MAAM;AACd,QAAI,YAAY;AAChB,eAAW,IAAI;AACf,aAAS,IAAI;AACb,YAAQ,IAAI;AAEZ,UAAM,GAAG,EACN,KAAK,CAAC,QAAQ;AACb,UAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,6BAA6B,IAAI,MAAM,IAAI,IAAI,UAAU,EAAE;AACxF,aAAO,IAAI,YAAY;AAAA,IACzB,CAAC,EACA,KAAK,CAAC,gBAAgB,QAAQ,cAAc,EAAE,YAAY,CAAC,CAAC,EAC5D,KAAK,CAAC,WAAW;AAChB,UAAI,UAAW;AACf,cAAQ,OAAO,KAAK;AACpB,iBAAW,KAAK;AAAA,IAClB,CAAC,EACA,MAAM,CAAC,QAAe;AACrB,UAAI,CAAC,WAAW;AACd,iBAAS,GAAG;AACZ,mBAAW,KAAK;AAAA,MAClB;AAAA,IACF,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,SAAO,EAAE,MAAM,OAAO,QAAQ;AAChC;;;ACkEoB,cACF,YADE;AA9DpB,SAAS,gBAAgB,KAAa,UAAmB;AACvD,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,OAAK,OAAO;AACZ,OAAK,WAAW,YAAY;AAC5B,OAAK,MAAM;AACX,WAAS,KAAK,YAAY,IAAI;AAC9B,OAAK,MAAM;AACX,WAAS,KAAK,YAAY,IAAI;AAChC;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX;AAAA,EACA,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,kBAAkB;AAAA,EAClB;AACF,GAAoB;AAClB,QAAM,UAAU,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,kBAAkB;AAAA,IAClB;AAAA,EACF,CAAC;AACD,QAAM,EAAE,MAAM,OAAO,QAAQ,IAAI,YAAY,GAAG;AAEhD,QAAM,iBAAiB,iBAAiB,eAAe,MAAM,gBAAgB,KAAK,QAAQ,KAAK;AAE/F,QAAM,eAA8B,WAChC,EAAE,GAAG,MAAM,IACX,EAAE,SAAS,QAAQ,YAAY,UAAU,gBAAgB,UAAU,OAAO,QAAQ,QAAQ,QAAQ,GAAG,MAAM;AAE/G,SACE,oBAAC,SAAI,WAAsB,OAAO,cAChC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,iBAAgB;AAAA,MAEf;AAAA,mBAAW,oBAAC,UAAK,WAAU,iBAAgB,oCAAiB;AAAA,QAC5D,SAAS,qBAAC,UAAK,WAAU,iBAAgB;AAAA;AAAA,UAA0B,MAAM;AAAA,WAAQ;AAAA,QACjF,QAAQ,oBAAC,SAAI,WAAU,gBAAe,yBAAyB,EAAE,QAAQ,KAAK,GAAG;AAAA;AAAA;AAAA,EACpF,GACF;AAEJ;","names":[]}

package/dist/chunk-KRN2POC4.js

@@ -0,0 +1,174 @@
+import {
+  ViewerShell,
+  useZoomPan
+} from "./chunk-OA35SYM6.js";
+
+// src/viewers/PdfPage.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+function PdfPage({ doc, pageNumber, renderScale = 1.5 }) {
+  const canvasRef = useRef(null);
+  const renderTaskRef = useRef(null);
+  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__ */ jsx("canvas", { ref: canvasRef, className: "vd-pdf-page", "data-page-number": pageNumber });
+}
+
+// src/viewers/usePdfDocument.ts
+import { useEffect as useEffect2, useState } 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] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  useEffect2(() => {
+    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 useEffect3, useState as useState2 } from "react";
+function useVisiblePage(containerRef, numPages) {
+  const [currentPage, setCurrentPage] = useState2(1);
+  useEffect3(() => {
+    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
+import { jsx as jsx2, jsxs } from "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 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 ?? (() => defaultDownload(uri, fileName)) : void 0;
+  const wrapperStyle = floating ? { ...style } : { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "100%", ...style };
+  return /* @__PURE__ */ jsx2("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxs(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top center",
+      toolbarExtra: numPages > 0 ? /* @__PURE__ */ jsxs("span", { className: "vd-pdf-page-indicator", children: [
+        "Page ",
+        currentPage,
+        " / ",
+        numPages
+      ] }) : void 0,
+      children: [
+        loading && /* @__PURE__ */ jsx2("span", { className: "vd-pdf-page-indicator", children: "Loading PDF\u2026" }),
+        error && /* @__PURE__ */ jsxs("span", { className: "vd-pdf-page-indicator", children: [
+          "Failed to load PDF: ",
+          error.message
+        ] }),
+        doc && /* @__PURE__ */ jsx2("div", { className: "vd-pdf-pages", children: Array.from({ length: numPages }, (_, i) => /* @__PURE__ */ jsx2(PdfPage, { doc, pageNumber: i + 1, renderScale }, i + 1)) })
+      ]
+    }
+  ) });
+}
+
+export {
+  PdfViewer
+};
+//# sourceMappingURL=chunk-KRN2POC4.js.map

package/dist/chunk-KRN2POC4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/viewers/PdfPage.tsx","../src/viewers/usePdfDocument.ts","../src/viewers/useVisiblePage.ts","../src/viewers/PdfViewer.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { PDFDocumentProxy } from 'pdfjs-dist'\n\nexport interface PdfPageProps {\n  doc: PDFDocumentProxy\n  pageNumber: number\n  /** Render resolution multiplier. Higher = crisper at deep zoom, more memory. Default: 1.5 */\n  renderScale?: number\n}\n\nexport function PdfPage({ doc, pageNumber, renderScale = 1.5 }: PdfPageProps) {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const renderTaskRef = useRef<{ cancel: () => void } | null>(null)\n\n  useEffect(() => {\n    let cancelled = false\n\n    doc.getPage(pageNumber).then((page) => {\n      if (cancelled) return\n      const viewport = page.getViewport({ scale: renderScale })\n      const canvas = canvasRef.current\n      if (!canvas) return\n      const context = canvas.getContext('2d')\n      if (!context) return\n\n      canvas.width = viewport.width\n      canvas.height = viewport.height\n      canvas.style.width = `${viewport.width / renderScale}px`\n      canvas.style.height = `${viewport.height / renderScale}px`\n\n      const renderTask = page.render({ canvasContext: context, viewport, canvas })\n      renderTaskRef.current = renderTask\n      renderTask.promise.catch(() => {\n        // ignore cancellation errors from rapid re-renders\n      })\n    })\n\n    return () => {\n      cancelled = true\n      renderTaskRef.current?.cancel()\n    }\n  }, [doc, pageNumber, renderScale])\n\n  return <canvas ref={canvasRef} className=\"vd-pdf-page\" data-page-number={pageNumber} />\n}\n","import { useEffect, useState } from 'react'\nimport * as pdfjsLib from 'pdfjs-dist'\nimport type { PDFDocumentLoadingTask, PDFDocumentProxy } from 'pdfjs-dist'\n\npdfjsLib.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString()\n\nexport interface UsePdfDocumentResult {\n  doc: PDFDocumentProxy | null\n  numPages: number\n  error: Error | null\n  loading: boolean\n}\n\nexport function usePdfDocument(uri: string): UsePdfDocumentResult {\n  const [doc, setDoc] = useState<PDFDocumentProxy | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    let cancelled = false\n    setLoading(true)\n    setError(null)\n    setDoc(null)\n\n    const loadingTask: PDFDocumentLoadingTask = pdfjsLib.getDocument({ url: uri })\n    loadingTask.promise\n      .then((pdf) => {\n        if (cancelled) return\n        setDoc(pdf)\n        setLoading(false)\n      })\n      .catch((err: Error) => {\n        if (!cancelled) {\n          setError(err)\n          setLoading(false)\n        }\n      })\n\n    return () => {\n      cancelled = true\n      loadingTask.destroy()\n    }\n  }, [uri])\n\n  return { doc, numPages: doc?.numPages ?? 0, error, loading }\n}\n","import { useEffect, useState } from 'react'\n\n/** Tracks which page (by data-page-number) is most visible inside the given scroll container. */\nexport function useVisiblePage(containerRef: React.RefObject<HTMLElement>, numPages: number): number {\n  const [currentPage, setCurrentPage] = useState(1)\n\n  useEffect(() => {\n    const root = containerRef.current\n    if (!root || numPages === 0) return\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const mostVisible = entries\n          .filter((e) => e.isIntersecting)\n          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0]\n        if (mostVisible) {\n          const page = Number((mostVisible.target as HTMLElement).dataset.pageNumber)\n          if (page) setCurrentPage(page)\n        }\n      },\n      { root, threshold: [0.25, 0.5, 0.75] }\n    )\n\n    const pages = root.querySelectorAll('[data-page-number]')\n    pages.forEach((el) => observer.observe(el))\n\n    return () => observer.disconnect()\n  }, [containerRef, numPages])\n\n  return currentPage\n}\n","import type { CSSProperties } from 'react'\nimport { ViewerShell } from '../core/ViewerShell'\nimport type { ViewerTheme } from '../core/theme'\nimport type { Position } from '../core/useDraggable'\nimport { useZoomPan } from '../core/useZoomPan'\nimport { PdfPage } from './PdfPage'\nimport { usePdfDocument } from './usePdfDocument'\nimport { useVisiblePage } from './useVisiblePage'\n\nexport interface PdfViewerProps {\n  /** URL or data URI of the PDF to display. */\n  uri: string\n  /** Used as the suggested filename on download. */\n  fileName?: string\n  className?: string\n  style?: CSSProperties\n\n  /** Width of the viewer. Accepts any CSS size (e.g. 1200, '1200px', '100%'). Default: 1200. */\n  width?: number | string\n  /** Height of the viewer. Accepts any CSS size (e.g. 700, '700px', '100vh'). Default: 700. */\n  height?: number | string\n\n  /** Minimum zoom scale. Default: 0.25 */\n  minScale?: number\n  /** Maximum zoom scale. Default: 5 */\n  maxScale?: number\n  /** Zoom increment per step (buttons / Ctrl+scroll). Default: 0.25 */\n  zoomStep?: number\n  /** Canvas render resolution multiplier (crispness at high zoom). Default: 1.5 */\n  renderScale?: number\n\n  /** Show zoom in/out and reset-to-100% controls. Default: true. */\n  enableZoomControls?: boolean\n  /** Allow Ctrl/Cmd + scroll wheel to zoom. Default: true. */\n  enableWheelZoom?: boolean\n  /** Show the fullscreen toggle button. Default: true. */\n  enableFullscreen?: boolean\n  /** Show the download button. Default: true. */\n  enableDownload?: boolean\n  /** Called when the download button is clicked. If omitted, downloads `uri` directly. */\n  onDownload?: () => void\n  /** Colors/radii to override the default look (toolbar background, text color, etc). */\n  theme?: ViewerTheme\n\n  /** Render as a floating window (position: fixed) that can be dragged, instead of filling the parent. Default: true. */\n  floating?: boolean\n  /** When floating, allow dragging the window by its toolbar. Default: true. */\n  windowDraggable?: boolean\n  /** Initial position when floating. Default: centered in the viewport. */\n  defaultPosition?: Position\n}\n\nfunction defaultDownload(uri: string, fileName?: string) {\n  const link = document.createElement('a')\n  link.href = uri\n  link.download = fileName ?? ''\n  link.rel = 'noopener'\n  document.body.appendChild(link)\n  link.click()\n  document.body.removeChild(link)\n}\n\nexport function PdfViewer({\n  uri,\n  fileName,\n  className,\n  style,\n  width,\n  height,\n  minScale = 0.25,\n  maxScale = 5,\n  zoomStep,\n  renderScale,\n  enableZoomControls = true,\n  enableWheelZoom = true,\n  enableFullscreen = true,\n  enableDownload = true,\n  onDownload,\n  theme,\n  floating = true,\n  windowDraggable = true,\n  defaultPosition,\n}: PdfViewerProps) {\n  const zoomPan = useZoomPan({\n    minScale,\n    maxScale,\n    zoomStep,\n    enablePan: false,\n    enableDragScroll: true,\n    enableWheelZoom,\n  })\n  const { doc, numPages, error, loading } = usePdfDocument(uri)\n  const currentPage = useVisiblePage(zoomPan.containerRef, numPages)\n\n  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : undefined\n\n  const wrapperStyle: CSSProperties = floating\n    ? { ...style }\n    : { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', ...style }\n\n  return (\n    <div className={className} style={wrapperStyle}>\n      <ViewerShell\n        zoomPan={zoomPan}\n        onDownload={handleDownload}\n        enableZoomControls={enableZoomControls}\n        enableFullscreen={enableFullscreen}\n        enablePan={false}\n        theme={theme}\n        width={width}\n        height={height}\n        floating={floating}\n        draggable={windowDraggable}\n        defaultPosition={defaultPosition}\n        transformOrigin=\"top center\"\n        toolbarExtra={\n          numPages > 0 ? (\n            <span className=\"vd-pdf-page-indicator\">\n              Page {currentPage} / {numPages}\n            </span>\n          ) : undefined\n        }\n      >\n        {loading && <span className=\"vd-pdf-page-indicator\">Loading PDF…</span>}\n        {error && <span className=\"vd-pdf-page-indicator\">Failed to load PDF: {error.message}</span>}\n        {doc && (\n          <div className=\"vd-pdf-pages\">\n            {Array.from({ length: numPages }, (_, i) => (\n              <PdfPage key={i + 1} doc={doc} pageNumber={i + 1} renderScale={renderScale} />\n            ))}\n          </div>\n        )}\n      </ViewerShell>\n    </div>\n  )\n}\n"],"mappings":"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","names":["useEffect","useEffect","useState","jsx"]}

package/dist/chunk-LE4YTMPN.js

@@ -0,0 +1,135 @@
+import {
+  ViewerShell,
+  useZoomPan
+} from "./chunk-OA35SYM6.js";
+
+// src/viewers/XlsxViewer.tsx
+import { useMemo, useState as useState2 } from "react";
+import * as XLSX2 from "xlsx";
+
+// src/viewers/useXlsxWorkbook.ts
+import { useEffect, useState } from "react";
+import * as XLSX from "xlsx";
+function useXlsxWorkbook(uri) {
+  const [workbook, setWorkbook] = useState(null);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(true);
+  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
+import { jsx, jsxs } from "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 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] = useState2(0);
+  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(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__ */ jsx("div", { className, style: wrapperStyle, children: /* @__PURE__ */ jsxs(
+    ViewerShell,
+    {
+      zoomPan,
+      onDownload: handleDownload,
+      enableZoomControls,
+      enableFullscreen,
+      enablePan: false,
+      theme,
+      width,
+      height,
+      floating,
+      draggable: windowDraggable,
+      defaultPosition,
+      transformOrigin: "top left",
+      children: [
+        loading && /* @__PURE__ */ jsx("span", { className: "vd-doc-status", children: "Loading spreadsheet\u2026" }),
+        error && /* @__PURE__ */ jsxs("span", { className: "vd-doc-status", children: [
+          "Failed to load spreadsheet: ",
+          error.message
+        ] }),
+        workbook && /* @__PURE__ */ jsxs("div", { className: "vd-xlsx", children: [
+          workbook.SheetNames.length > 1 && /* @__PURE__ */ jsx("div", { className: "vd-xlsx-tabs", children: workbook.SheetNames.map((name, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `vd-xlsx-tab${i === activeSheet ? " vd-xlsx-tab--active" : ""}`,
+              onClick: () => setActiveSheet(i),
+              children: name
+            },
+            name
+          )) }),
+          tableHtml && /* @__PURE__ */ jsx("div", { className: "vd-xlsx-table", dangerouslySetInnerHTML: { __html: tableHtml } })
+        ] })
+      ]
+    }
+  ) });
+}
+
+export {
+  XlsxViewer
+};
+//# sourceMappingURL=chunk-LE4YTMPN.js.map

package/dist/chunk-LE4YTMPN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/viewers/XlsxViewer.tsx","../src/viewers/useXlsxWorkbook.ts"],"sourcesContent":["import { useMemo, useState, type CSSProperties } from 'react'\nimport * as XLSX from 'xlsx'\nimport { ViewerShell } from '../core/ViewerShell'\nimport type { ViewerTheme } from '../core/theme'\nimport type { Position } from '../core/useDraggable'\nimport { useZoomPan } from '../core/useZoomPan'\nimport { useXlsxWorkbook } from './useXlsxWorkbook'\n\nexport interface XlsxViewerProps {\n  /** URL of the .xlsx/.xls (legacy binary supported)/.csv file to display. */\n  uri: string\n  /** Used as the suggested filename on download. */\n  fileName?: string\n  className?: string\n  style?: CSSProperties\n\n  /** Width of the viewer. Accepts any CSS size (e.g. 1200, '1200px', '100%'). Default: 1200. */\n  width?: number | string\n  /** Height of the viewer. Accepts any CSS size (e.g. 700, '700px', '100vh'). Default: 700. */\n  height?: number | string\n\n  /** Minimum zoom scale. Default: 0.5 */\n  minScale?: number\n  /** Maximum zoom scale. Default: 3 */\n  maxScale?: number\n  /** Zoom increment per step (buttons / Ctrl+scroll). Default: 0.25 */\n  zoomStep?: number\n\n  /** Show zoom in/out and reset-to-100% controls. Default: true. */\n  enableZoomControls?: boolean\n  /** Allow Ctrl/Cmd + scroll wheel to zoom. Default: true. */\n  enableWheelZoom?: boolean\n  /** Show the fullscreen toggle button. Default: true. */\n  enableFullscreen?: boolean\n  /** Show the download button. Default: true. */\n  enableDownload?: boolean\n  /** Called when the download button is clicked. If omitted, downloads `uri` directly. */\n  onDownload?: () => void\n  /** Colors/radii to override the default look (toolbar background, text color, etc). */\n  theme?: ViewerTheme\n\n  /** Render as a floating window (position: fixed) that can be dragged, instead of filling the parent. Default: true. */\n  floating?: boolean\n  /** When floating, allow dragging the window by its toolbar. Default: true. */\n  windowDraggable?: boolean\n  /** Initial position when floating. Default: centered in the viewport. */\n  defaultPosition?: Position\n}\n\nfunction defaultDownload(uri: string, fileName?: string) {\n  const link = document.createElement('a')\n  link.href = uri\n  link.download = fileName ?? ''\n  link.rel = 'noopener'\n  document.body.appendChild(link)\n  link.click()\n  document.body.removeChild(link)\n}\n\nexport function XlsxViewer({\n  uri,\n  fileName,\n  className,\n  style,\n  width,\n  height,\n  minScale = 0.5,\n  maxScale = 3,\n  zoomStep,\n  enableZoomControls = true,\n  enableWheelZoom = true,\n  enableFullscreen = true,\n  enableDownload = true,\n  onDownload,\n  theme,\n  floating = true,\n  windowDraggable = true,\n  defaultPosition,\n}: XlsxViewerProps) {\n  const zoomPan = useZoomPan({\n    minScale,\n    maxScale,\n    zoomStep,\n    enablePan: false,\n    enableDragScroll: true,\n    enableWheelZoom,\n  })\n  const { workbook, error, loading } = useXlsxWorkbook(uri)\n  const [activeSheet, setActiveSheet] = useState(0)\n\n  const handleDownload = enableDownload ? onDownload ?? (() => defaultDownload(uri, fileName)) : undefined\n\n  const tableHtml = useMemo(() => {\n    if (!workbook) return null\n    const sheetName = workbook.SheetNames[activeSheet]\n    const sheet = workbook.Sheets[sheetName]\n    if (!sheet) return null\n    return XLSX.utils.sheet_to_html(sheet, { editable: false })\n  }, [workbook, activeSheet])\n\n  const wrapperStyle: CSSProperties = floating\n    ? { ...style }\n    : { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%', ...style }\n\n  return (\n    <div className={className} style={wrapperStyle}>\n      <ViewerShell\n        zoomPan={zoomPan}\n        onDownload={handleDownload}\n        enableZoomControls={enableZoomControls}\n        enableFullscreen={enableFullscreen}\n        enablePan={false}\n        theme={theme}\n        width={width}\n        height={height}\n        floating={floating}\n        draggable={windowDraggable}\n        defaultPosition={defaultPosition}\n        transformOrigin=\"top left\"\n      >\n        {loading && <span className=\"vd-doc-status\">Loading spreadsheet…</span>}\n        {error && <span className=\"vd-doc-status\">Failed to load spreadsheet: {error.message}</span>}\n        {workbook && (\n          <div className=\"vd-xlsx\">\n            {workbook.SheetNames.length > 1 && (\n              <div className=\"vd-xlsx-tabs\">\n                {workbook.SheetNames.map((name, i) => (\n                  <button\n                    key={name}\n                    type=\"button\"\n                    className={`vd-xlsx-tab${i === activeSheet ? ' vd-xlsx-tab--active' : ''}`}\n                    onClick={() => setActiveSheet(i)}\n                  >\n                    {name}\n                  </button>\n                ))}\n              </div>\n            )}\n            {tableHtml && <div className=\"vd-xlsx-table\" dangerouslySetInnerHTML={{ __html: tableHtml }} />}\n          </div>\n        )}\n      </ViewerShell>\n    </div>\n  )\n}\n","import { useEffect, useState } from 'react'\nimport * as XLSX from 'xlsx'\n\nexport interface UseXlsxWorkbookResult {\n  workbook: XLSX.WorkBook | null\n  error: Error | null\n  loading: boolean\n}\n\nexport function useXlsxWorkbook(uri: string): UseXlsxWorkbookResult {\n  const [workbook, setWorkbook] = useState<XLSX.WorkBook | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n  const [loading, setLoading] = useState(true)\n\n  useEffect(() => {\n    let cancelled = false\n    setLoading(true)\n    setError(null)\n    setWorkbook(null)\n\n    fetch(uri)\n      .then((res) => {\n        if (!res.ok) throw new Error(`Failed to fetch spreadsheet: ${res.status} ${res.statusText}`)\n        return res.arrayBuffer()\n      })\n      .then((arrayBuffer) => {\n        if (cancelled) return\n        const wb = XLSX.read(arrayBuffer, { type: 'array' })\n        setWorkbook(wb)\n        setLoading(false)\n      })\n      .catch((err: Error) => {\n        if (!cancelled) {\n          setError(err)\n          setLoading(false)\n        }\n      })\n\n    return () => {\n      cancelled = true\n    }\n  }, [uri])\n\n  return { workbook, error, loading }\n}\n"],"mappings":"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","names":["useState","XLSX","useState"]}