viewdoc 0.1.1 → 0.2.1

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" />
@@ -148,6 +151,7 @@ In non-floating mode, the viewer still renders at its `width`/`height` (default
 
 - Old binary `.doc`/legacy Word formats before 2007 aren't supported (only `.docx`)
 - The Excel table view is read-only — no cell editing or selection
+- `XlsxViewer` falls back to CSV parsing for unrecognized content (this is intentional — SheetJS supports `.csv`), so pointing it at a non-spreadsheet file won't always error; it may render the raw text as a single cell instead
 - `DocxViewer` and `XlsxViewer` render content via `dangerouslySetInnerHTML` using HTML generated from the file itself (by `mammoth`/`xlsx`) — treat untrusted files with the same caution you'd apply to any HTML you didn't author
 - PDF rendering resolves its worker script via `import.meta.url`, which requires an ESM-aware bundler (Vite, Webpack 5+, esbuild). CommonJS (`require`) consumers may need extra worker configuration
 

package/dist/DocxViewer-HQFSWXQW.js

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

package/dist/DocxViewer-HQFSWXQW.js.map

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

package/dist/PdfViewer-YJOHTAPL.js

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

package/dist/PdfViewer-YJOHTAPL.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-EQCFZMLL.js

@@ -0,0 +1,114 @@
+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 }).catch(() => {
+        throw new Error("This file could not be read as a Word document (.docx).");
+      })
+    ).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-EQCFZMLL.js.map

package/dist/chunk-EQCFZMLL.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) =>\n        mammoth\n          .convertToHtml({ arrayBuffer })\n          .catch(() => {\n            throw new Error('This file could not be read as a Word document (.docx).')\n          })\n      )\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":"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","names":[]}

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"]}