@cannyminds/dms-file-viewers 0.2.0 → 0.4.0

package/dist/{chunk-7JTIG6OU.js → chunk-WP55NYFS.js}

@@ -24,7 +24,8 @@ var _react = require('react');
 
 var _material = require('@mui/material');
 var _Download = require('@mui/icons-material/Download'); var _Download2 = _interopRequireDefault(_Download);
-var _reactwindow = require('react-window');
+var _Info = require('@mui/icons-material/Info'); var _Info2 = _interopRequireDefault(_Info);
+var _Description = require('@mui/icons-material/Description'); var _Description2 = _interopRequireDefault(_Description);
 var _jsxruntime = require('react/jsx-runtime');
 var LINE_HEIGHT = 24;
 var TextViewer = ({
@@ -38,21 +39,26 @@ var TextViewer = ({
   onLoad,
   onError,
   onDownloadClick,
-  // Filter out props that shouldn't be passed to DOM
-  mimeType: _mimeType,
-  fileSize: _fileSize,
-  showPageCount: _showPageCount,
-  showPageNavigation: _showPageNavigation,
-  showZoomControls: _showZoomControls,
-  showDownload: _showDownload,
-  showPrint: _showPrint,
-  showSearch: _showSearch,
-  showMetadata: _showMetadata,
-  showProperties: _showProperties,
-  onMetadataClick: _onMetadataClick,
-  onPropertiesClick: _onPropertiesClick,
-  onPrintClick: _onPrintClick,
-  customRegistry: _customRegistry,
+  onMetadataClick,
+  onPropertiesClick,
+  showMetadata = true,
+  showProperties = true,
+  // Extract props that shouldn't be passed to DOM elements
+  mimeType,
+  fileSize,
+  showPageCount,
+  showPageNavigation,
+  showZoomControls,
+  showDownload,
+  showPrint,
+  showSearch,
+  onPrintClick,
+  customRegistry,
+  initialSearchText,
+  initialSearchPages,
+  autoOpenSearch,
+  autoExecuteSearch,
+  onSearchComplete,
   ...props
 }) => {
   const [content, setContent] = _react.useState.call(void 0, "");
@@ -103,33 +109,6 @@ var TextViewer = ({
   _react.useEffect.call(void 0, () => {
     void loadText();
   }, [loadText]);
-  const handleDownload = _react.useCallback.call(void 0, () => {
-    if (!content) return;
-    const blob = new Blob([content], { type: "text/plain" });
-    const url2 = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url2;
-    link.download = resolvedFileName || "document.txt";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url2);
-  }, [content, resolvedFileName]);
-  const Row = _react.useCallback.call(void 0, ({ index, style: rowStyle }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _material.Box,
-    {
-      style: rowStyle,
-      sx: {
-        px: 2,
-        display: "flex",
-        alignItems: "center",
-        whiteSpace: "pre",
-        fontFamily: "monospace",
-        fontSize: "0.85rem"
-      },
-      children: lines[index] || "\xA0"
-    }
-  ), [lines]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _material.Box,
     {
@@ -142,30 +121,57 @@ var TextViewer = ({
           {
             avatar: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRE4XRGSVjs.FileIcon_default, { ext: fileExtension, size: 32 }),
             title: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "subtitle1", fontWeight: 500, children: resolvedFileName }),
-            action: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Download", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _material.IconButton,
-              {
-                size: "small",
-                onClick: onDownloadClick,
-                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Download2.default, {})
-              }
-            ) }),
+            action: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Stack, { direction: "row", spacing: 1, children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Download", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.IconButton,
+                {
+                  size: "small",
+                  onClick: onDownloadClick,
+                  "aria-label": "Download text file",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Download2.default, {})
+                }
+              ) }),
+              showMetadata && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Document Metadata", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.IconButton,
+                {
+                  size: "small",
+                  onClick: onMetadataClick,
+                  "aria-label": "View document metadata",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Info2.default, {})
+                }
+              ) }),
+              showProperties && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Tooltip, { title: "Document Properties", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _material.IconButton,
+                {
+                  size: "small",
+                  onClick: onPropertiesClick,
+                  "aria-label": "View document properties",
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Description2.default, {})
+                }
+              ) })
+            ] }),
             sx: { pb: 1 }
           }
         ),
         isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.LinearProgress, { sx: { mx: 3, mb: 1 } }),
         error && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { color: "error", variant: "body2", sx: { px: 3, pb: 1 }, children: error }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Divider, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CardContent, { sx: { flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column", p: 0 }, children: content ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Stack, { sx: { flex: 1, position: "relative" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _reactwindow.FixedSizeList,
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.CardContent, { sx: { flexGrow: 1, minHeight: 0, p: 0, overflow: "auto" }, children: content ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: {
+          fontFamily: "monospace",
+          fontSize: "0.85rem",
+          p: 2,
+          whiteSpace: "pre"
+        }, children: lines.map((line, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _material.Box,
           {
-            height: typeof height === "number" ? height - 140 : 520,
-            itemCount: lines.length,
-            itemSize: LINE_HEIGHT,
-            width: "100%",
-            children: Row
-          }
-        ) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", p: 4 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "No text content available." }) }) })
+            sx: {
+              minHeight: LINE_HEIGHT,
+              lineHeight: `${LINE_HEIGHT}px`
+            },
+            children: line || "\xA0"
+          },
+          index
+        )) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { sx: { display: "flex", alignItems: "center", justifyContent: "center", p: 4, minHeight: 200 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { variant: "body2", color: "text.secondary", children: "No text content available." }) }) })
       ] })
     }
   );
@@ -174,4 +180,4 @@ var TextViewer = ({
 
 
 exports.TextViewer = TextViewer;
-//# sourceMappingURL=chunk-7JTIG6OU.js.map
+//# sourceMappingURL=chunk-WP55NYFS.js.map

package/dist/chunk-WP55NYFS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["d:\\Projects\\DMS-File-Viewers\\packages\\lib\\dist\\chunk-WP55NYFS.js"],"names":[],"mappings":"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","file":"D:\\Projects\\DMS-File-Viewers\\packages\\lib\\dist\\chunk-WP55NYFS.js","sourcesContent":[null]}

package/dist/{chunk-NOLXOOIP.mjs → chunk-YHMHDPLQ.mjs}

@@ -14,24 +14,28 @@ import {
 } from "react";
 import {
   Box,
-  Button,
-  ButtonGroup,
   Card,
-  CardActions,
   CardContent,
   CardHeader,
   Divider,
   LinearProgress,
-  MenuItem,
-  Select,
   Stack,
   Typography,
-  IconButton,
-  Tooltip
+  IconButton
 } from "@mui/material";
 import DownloadIcon from "@mui/icons-material/Download";
+import FirstPageIcon from "@mui/icons-material/FirstPage";
+import LastPageIcon from "@mui/icons-material/LastPage";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import FitScreenIcon from "@mui/icons-material/FitScreen";
+import AspectRatioIcon from "@mui/icons-material/AspectRatio";
+import InfoIcon from "@mui/icons-material/Info";
+import DescriptionIcon from "@mui/icons-material/Description";
 import * as UTIF from "utif";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var decodeTiff = (buffer) => {
   if (typeof window === "undefined") {
     return [];
@@ -89,21 +93,18 @@ var TIFFViewerContent = ({
   onLoad,
   onError,
   onDownloadClick,
-  // Filter out props that shouldn't be passed to DOM
-  mimeType: _mimeType,
-  fileSize: _fileSize,
-  showPageCount: _showPageCount,
-  showPageNavigation: _showPageNavigation,
-  showZoomControls: _showZoomControls,
-  showDownload: _showDownload,
-  showPrint: _showPrint,
-  showSearch: _showSearch,
-  showMetadata: _showMetadata,
-  showProperties: _showProperties,
-  onMetadataClick: _onMetadataClick,
-  onPropertiesClick: _onPropertiesClick,
-  onPrintClick: _onPrintClick,
-  customRegistry: _customRegistry,
+  onMetadataClick,
+  onPropertiesClick,
+  showMetadata = true,
+  showProperties = true,
+  // Extract props that shouldn't be passed to DOM elements
+  mimeType,
+  fileSize,
+  initialSearchText,
+  initialSearchPages,
+  autoOpenSearch,
+  autoExecuteSearch,
+  onSearchComplete,
   ...props
 }) => {
   const [frames, setFrames] = useState([]);
@@ -171,35 +172,6 @@ var TIFFViewerContent = ({
   useEffect(() => {
     void loadTiff();
   }, [loadTiff]);
-  const handleDownload = useCallback(async () => {
-    if (!file && !url) return;
-    try {
-      let blob;
-      let filename = resolvedFileName || "document.tiff";
-      if (file) {
-        blob = file;
-        filename = file.name;
-      } else if (url) {
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch TIFF (${response.status})`);
-        }
-        blob = await response.blob();
-      } else {
-        return;
-      }
-      const downloadUrl = URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = downloadUrl;
-      link.download = filename;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(downloadUrl);
-    } catch (err) {
-      onError?.(err instanceof Error ? err : new Error("Download failed"));
-    }
-  }, [file, url, resolvedFileName, onError]);
   const currentFrame = frames[currentIndex];
   const hasFrames = frames.length > 0;
   const hasMultipleFrames = frames.length > 1;
@@ -230,22 +202,34 @@ var TIFFViewerContent = ({
       observer.disconnect();
     };
   }, []);
-  const handleZoomIn = () => {
+  const handleZoomIn = useCallback(() => {
     setFitMode("zoom");
     setZoom((value) => Math.min(Math.round((value + 0.25) * 100) / 100, 5));
-  };
-  const handleZoomOut = () => {
+  }, []);
+  const handleZoomOut = useCallback(() => {
     setFitMode("zoom");
     setZoom((value) => Math.max(Math.round((value - 0.25) * 100) / 100, 0.25));
-  };
-  const handleFitWidth = () => {
+  }, []);
+  const handleFitWidth = useCallback(() => {
     setFitMode("fit-width");
     setZoom(1);
-  };
-  const handleFitPage = () => {
+  }, []);
+  const handleFitPage = useCallback(() => {
     setFitMode("fit-page");
     setZoom(1);
-  };
+  }, []);
+  const handleFirstPage = useCallback(() => {
+    setCurrentIndex(0);
+  }, []);
+  const handleLastPage = useCallback(() => {
+    setCurrentIndex(frames.length - 1);
+  }, [frames.length]);
+  const handlePreviousPage = useCallback(() => {
+    setCurrentIndex((index) => Math.max(index - 1, 0));
+  }, []);
+  const handleNextPage = useCallback(() => {
+    setCurrentIndex((index) => Math.min(index + 1, frames.length - 1));
+  }, [frames.length]);
   const effectiveScale = useMemo(() => {
     if (!currentFrame) {
       return 1;
@@ -304,73 +288,157 @@ var TIFFViewerContent = ({
     Box,
     {
       className: `tiff-viewer ${className}`,
-      sx: { width, height, ...style },
+      sx: {
+        width,
+        height,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...style
+      },
       ...props,
-      children: /* @__PURE__ */ jsxs(Card, { sx: { height: "100%", display: "flex", flexDirection: "column" }, elevation: 1, children: [
+      children: /* @__PURE__ */ jsxs(Card, { sx: { height: "100%", width: "100%", display: "flex", flexDirection: "column", overflow: "hidden" }, elevation: 1, children: [
         /* @__PURE__ */ jsx(
           CardHeader,
           {
             avatar: /* @__PURE__ */ jsx(FileIcon_default, { ext: fileExtension, size: 32 }),
-            title: /* @__PURE__ */ jsxs(Typography, { variant: "subtitle1", fontWeight: 500, children: [
-              resolvedFileName,
-              frames.length > 0 && /* @__PURE__ */ jsxs(Typography, { component: "span", variant: "body2", color: "text.secondary", sx: { ml: 1 }, children: [
-                "\u2022 Page ",
-                currentIndex + 1,
-                " of ",
-                frames.length
-              ] })
-            ] }),
-            action: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-              /* @__PURE__ */ jsxs(ButtonGroup, { variant: "outlined", size: "small", disabled: !hasFrames, children: [
-                /* @__PURE__ */ jsx(Button, { onClick: handleZoomOut, disabled: !hasFrames || zoom <= 0.25, children: "-" }),
-                /* @__PURE__ */ jsx(Button, { onClick: handleZoomIn, disabled: !hasFrames || zoom >= 5, children: "+" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: fitMode === "fit-width" ? "contained" : "outlined",
-                  size: "small",
-                  onClick: handleFitWidth,
-                  disabled: !hasFrames,
-                  children: "Fit Width"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: fitMode === "fit-page" ? "contained" : "outlined",
-                  size: "small",
-                  onClick: handleFitPage,
-                  disabled: !hasFrames,
-                  children: "Fit Page"
-                }
-              ),
-              /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { minWidth: 64, textAlign: "center" }, children: hasFrames ? `${displayScale}%` : "\u2014" }),
-              /* @__PURE__ */ jsx(Tooltip, { title: "Download", children: /* @__PURE__ */ jsx(
-                IconButton,
-                {
-                  size: "small",
-                  onClick: onDownloadClick,
-                  children: /* @__PURE__ */ jsx(DownloadIcon, {})
-                }
-              ) }),
-              hasMultipleFrames && /* @__PURE__ */ jsx(
-                Select,
-                {
-                  size: "small",
-                  value: String(currentIndex),
-                  onChange: (event) => setCurrentIndex(Number(event.target.value)),
-                  sx: { minWidth: 120 },
-                  children: frames.map((_, index) => /* @__PURE__ */ jsxs(MenuItem, { value: String(index), children: [
-                    "Page ",
-                    index + 1
-                  ] }, index))
-                }
-              )
-            ] }),
+            title: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", fontWeight: 500, children: resolvedFileName }),
             sx: { pb: 1 }
           }
         ),
+        /* @__PURE__ */ jsx(Box, { sx: { px: 2, pb: 1, display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", flexWrap: "wrap", gap: 1, children: [
+          hasMultipleFrames && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: handleFirstPage,
+                disabled: currentIndex === 0,
+                title: "First Page",
+                "aria-label": "Go to first page",
+                children: /* @__PURE__ */ jsx(FirstPageIcon, { fontSize: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: handlePreviousPage,
+                disabled: currentIndex === 0,
+                title: "Previous Page",
+                "aria-label": "Go to previous page",
+                children: /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { minWidth: 100, textAlign: "center" }, children: [
+              "Page ",
+              currentIndex + 1,
+              " of ",
+              frames.length
+            ] }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: handleNextPage,
+                disabled: currentIndex === frames.length - 1,
+                title: "Next Page",
+                "aria-label": "Go to next page",
+                children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: handleLastPage,
+                disabled: currentIndex === frames.length - 1,
+                title: "Last Page",
+                "aria-label": "Go to last page",
+                children: /* @__PURE__ */ jsx(LastPageIcon, { fontSize: "small" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } })
+          ] }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleZoomOut,
+              disabled: !hasFrames || zoom <= 0.25,
+              title: "Zoom Out",
+              "aria-label": "Zoom out",
+              children: /* @__PURE__ */ jsx(ZoomOutIcon, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", sx: { minWidth: 64, textAlign: "center" }, children: hasFrames ? `${displayScale}%` : "\u2014" }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleZoomIn,
+              disabled: !hasFrames || zoom >= 5,
+              title: "Zoom In",
+              "aria-label": "Zoom in",
+              children: /* @__PURE__ */ jsx(ZoomInIcon, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleFitWidth,
+              disabled: !hasFrames,
+              title: "Fit to Width",
+              "aria-label": "Fit to width",
+              color: fitMode === "fit-width" ? "primary" : "default",
+              children: /* @__PURE__ */ jsx(AspectRatioIcon, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleFitPage,
+              disabled: !hasFrames,
+              title: "Fit to Page",
+              "aria-label": "Fit to page",
+              color: fitMode === "fit-page" ? "primary" : "default",
+              children: /* @__PURE__ */ jsx(FitScreenIcon, { fontSize: "small" })
+            }
+          ),
+          /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 1 } }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: onDownloadClick,
+              title: "Download",
+              "aria-label": "Download TIFF",
+              children: /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" })
+            }
+          ),
+          showMetadata && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: onMetadataClick,
+              title: "Document Metadata",
+              "aria-label": "View document metadata",
+              children: /* @__PURE__ */ jsx(InfoIcon, { fontSize: "small" })
+            }
+          ),
+          showProperties && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: onPropertiesClick,
+              title: "Document Properties",
+              "aria-label": "View document properties",
+              children: /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" })
+            }
+          )
+        ] }) }),
         isLoading && /* @__PURE__ */ jsx(LinearProgress, { sx: { mx: 3, mb: 1 } }),
         error && /* @__PURE__ */ jsx(Typography, { color: "error", variant: "body2", sx: { px: 3, pb: 1 }, children: error }),
         /* @__PURE__ */ jsx(Divider, {}),
@@ -379,57 +447,34 @@ var TIFFViewerContent = ({
           {
             sx: {
               flexGrow: 1,
+              flexShrink: 1,
               minHeight: 0,
-              display: "flex",
-              flexDirection: "column",
-              p: 0
+              p: 0,
+              overflow: "auto",
+              backgroundColor: "#f6f8fa",
+              position: "relative"
             },
             children: /* @__PURE__ */ jsx(
               Box,
               {
                 ref: viewportRef,
                 sx: {
-                  flex: 1,
-                  overflow: "auto",
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
                   p: 3,
-                  backgroundColor: "#f6f8fa"
+                  overflow: "auto"
                 },
                 children: renderImage()
               }
             )
           }
-        ),
-        hasMultipleFrames && /* @__PURE__ */ jsx(CardActions, { sx: { justifyContent: "center", px: 3, py: 2 }, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outlined",
-              size: "small",
-              onClick: () => setCurrentIndex((index) => Math.max(index - 1, 0)),
-              disabled: currentIndex === 0,
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
-            "Page ",
-            currentIndex + 1,
-            " of ",
-            frames.length
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              variant: "outlined",
-              size: "small",
-              onClick: () => setCurrentIndex((index) => Math.min(index + 1, frames.length - 1)),
-              disabled: currentIndex === frames.length - 1,
-              children: "Next"
-            }
-          )
-        ] }) })
+        )
       ] })
     }
   );
@@ -445,4 +490,4 @@ var TIFFViewer = (props) => {
 export {
   TIFFViewer
 };
-//# sourceMappingURL=chunk-NOLXOOIP.mjs.map
+//# sourceMappingURL=chunk-YHMHDPLQ.mjs.map