@cannymindstech/file-viewers 0.28.0 → 0.28.1

package/dist/chunk-JKX5RSLF.mjs

@@ -0,0 +1,871 @@
+"use client";
+import {
+  getFileExtension
+} from "./chunk-KJNOBIUZ.mjs";
+import {
+  FileIcon_default,
+  mergeToolbarConfig
+} from "./chunk-7PMZ4GN5.mjs";
+
+// src/components/viewers/TIFFViewer.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  LinearProgress,
+  Stack,
+  Typography,
+  IconButton
+} from "@mui/material";
+import DownloadIcon from "@mui/icons-material/Download";
+import PrintIcon from "@mui/icons-material/Print";
+import FullscreenIcon from "@mui/icons-material/Fullscreen";
+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 HistoryIcon from "@mui/icons-material/History";
+import { LocalOffer } from "@mui/icons-material";
+import * as UTIF from "utif";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var resolveDocumentName = (file, fileName, url) => {
+  if (file?.name) {
+    return file.name;
+  }
+  if (fileName) {
+    return fileName;
+  }
+  if (url) {
+    const parts = url.split("?")[0]?.split("#")[0]?.split("/") ?? [];
+    return parts[parts.length - 1] || "document.tiff";
+  }
+  return "document.tiff";
+};
+var TIFFViewerContent = ({
+  sourceDescription,
+  file,
+  url,
+  fileName,
+  totalPages = 1,
+  className = "",
+  style = {},
+  width = "100%",
+  height = "100%",
+  onLoad,
+  onError,
+  onDownloadClick,
+  onPrintClick,
+  onTagsClick,
+  onMetadataClick,
+  onPropertiesClick,
+  onHistoryClick,
+  pageLoader,
+  showDownload = true,
+  showPrint = true,
+  showMetadata = false,
+  showTags = true,
+  showProperties = false,
+  showHistory = true,
+  // Extract props that shouldn't be passed to DOM elements
+  mimeType,
+  fileSize,
+  showPageCount,
+  showPageNavigation,
+  showZoomControls,
+  showSearch,
+  customRegistry,
+  initialSearchText,
+  initialSearchPages,
+  autoOpenSearch,
+  autoExecuteSearch,
+  onSearchComplete,
+  toolbarActions,
+  // Annotation-related FileViewerProps (PDF only) — extract so they don't
+  // leak onto the DOM via {...props} on <Box>.
+  showAnnotations,
+  userDetails,
+  annotationSelectionMenu,
+  isHighlighterActive,
+  isStampActive,
+  isNoteActive,
+  onHighlighterClick,
+  onStampClick,
+  onSignatureClick,
+  onNoteClick,
+  permissions,
+  isAnnotationForeign,
+  onAnnotationNoteClick,
+  isAnnotationInteractive,
+  hasUnsavedAnnotations,
+  isSavingAnnotations,
+  canSaveAnnotations,
+  onSaveAnnotations,
+  onDownloadWithAnnotations,
+  onDownloadWithoutAnnotations,
+  onPrintWithAnnotations,
+  onPrintWithoutAnnotations,
+  showDownloadOriginal,
+  showDownloadWithAnnotations,
+  showPrintOriginal,
+  showPrintWithAnnotations,
+  showAnnotate,
+  disabledAnnotate,
+  showRotation,
+  defaultFitToPage,
+  loading,
+  onPasswordRequest,
+  ...props
+}) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [fitMode, setFitMode] = useState(
+    "fit-page"
+  );
+  const [zoom, setZoom] = useState(100);
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const [viewportHeight, setViewportHeight] = useState(0);
+  const [, setIsFullScreen] = useState(false);
+  const [imageUrl, setImageUrl] = useState(null);
+  const [pageImages, setPageImages] = useState(/* @__PURE__ */ new Map());
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [imageSize, setImageSize] = useState(null);
+  const viewportRef = useRef(null);
+  const containerRef = useRef(null);
+  const imgRef = useRef(null);
+  const pageLoaderRef = useRef(pageLoader);
+  useEffect(() => {
+    pageLoaderRef.current = pageLoader;
+  }, [pageLoader]);
+  const [localTotalPages, setLocalTotalPages] = useState(0);
+  const tiffSourceRef = useRef(null);
+  const effectiveTotalPages = localTotalPages || totalPages;
+  const updatePageImage = useCallback(
+    (pageData, pageNumber) => {
+      const blob = new Blob([pageData]);
+      const imageUrl2 = URL.createObjectURL(blob);
+      setPageImages((prev) => {
+        const oldUrl = prev.get(pageNumber);
+        if (oldUrl && oldUrl !== imageUrl2) {
+          URL.revokeObjectURL(oldUrl);
+        }
+        return new Map(prev).set(pageNumber, imageUrl2);
+      });
+      setCurrentPage(pageNumber);
+      setImageUrl(imageUrl2);
+    },
+    []
+  );
+  const decodeLocalPage = useCallback(
+    async (pageIndex) => {
+      const source = tiffSourceRef.current;
+      if (!source) return null;
+      const image = source.ifds[pageIndex];
+      if (!image) return null;
+      UTIF.decodeImage(source.buffer, image);
+      const rgba = UTIF.toRGBA8(image);
+      const width2 = Number(image.width) || 0;
+      const height2 = Number(image.height) || 0;
+      if (!width2 || !height2) return null;
+      const canvas = document.createElement("canvas");
+      canvas.width = width2;
+      canvas.height = height2;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return null;
+      ctx.putImageData(
+        new ImageData(new Uint8ClampedArray(rgba), width2, height2),
+        0,
+        0
+      );
+      return await new Promise((resolve) => {
+        canvas.toBlob(async (blob) => {
+          if (!blob) {
+            resolve(null);
+            return;
+          }
+          resolve(await blob.arrayBuffer());
+        }, "image/png");
+      });
+    },
+    []
+  );
+  useEffect(() => {
+    const loadInitialPage = async () => {
+      if (pageLoaderRef.current && !pageImages.has(1) && currentPage === 1) {
+        setInternalLoading(true);
+        setError(null);
+        try {
+          const pageData = await pageLoaderRef.current(1);
+          if (pageData) {
+            updatePageImage(pageData, 1);
+          } else {
+            setError("Failed to load page 1");
+          }
+        } catch (err) {
+          const message = err instanceof Error ? err.message : "Unable to load page 1";
+          setError(message);
+          onError?.(new Error(message));
+        } finally {
+          setInternalLoading(false);
+        }
+      }
+    };
+    loadInitialPage();
+  }, [pageImages, currentPage, updatePageImage, onError]);
+  useEffect(() => {
+    if (!file && !url) {
+      tiffSourceRef.current = null;
+      setLocalTotalPages(0);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        let buffer = null;
+        if (file) {
+          buffer = await file.arrayBuffer();
+        } else if (url && !pageLoader) {
+          buffer = await (await fetch(url)).arrayBuffer();
+        }
+        if (cancelled || !buffer) return;
+        const magic = new Uint8Array(buffer, 0, 4);
+        const isTiffBytes = magic[0] === 73 && magic[1] === 73 && magic[2] === 42 && magic[3] === 0 || magic[0] === 77 && magic[1] === 77 && magic[2] === 0 && magic[3] === 42;
+        if (!isTiffBytes) return;
+        const ifds = UTIF.decode(buffer);
+        if (!ifds.length) {
+          throw new Error("No pages found in TIFF");
+        }
+        tiffSourceRef.current = { buffer, ifds };
+        setLocalTotalPages(ifds.length);
+        if (pageLoader) return;
+        setInternalLoading(true);
+        setError(null);
+        setImageUrl(null);
+        setImageSize(null);
+        setPageImages((prev) => {
+          prev.forEach((u) => URL.revokeObjectURL(u));
+          return /* @__PURE__ */ new Map();
+        });
+        const firstPage = await decodeLocalPage(0);
+        if (cancelled) return;
+        if (!firstPage) {
+          throw new Error("Failed to decode TIFF page 1");
+        }
+        updatePageImage(firstPage, 1);
+        onLoad?.();
+      } catch (err) {
+        if (cancelled) return;
+        const message = err instanceof Error ? err.message : "Failed to decode TIFF";
+        if (!pageLoader) {
+          setError(message);
+          onError?.(new Error(message));
+        } else {
+          console.warn(`[TIFFViewer] Local IFD count failed: ${message}`);
+        }
+      } finally {
+        if (!cancelled && !pageLoader) setInternalLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [file, url, pageLoader, decodeLocalPage, updatePageImage, onLoad, onError]);
+  const handlePageChange = useCallback(
+    async (newPageNumber) => {
+      const hasExternalLoader = !!pageLoaderRef.current;
+      const hasLocalSource = !!tiffSourceRef.current;
+      if (!hasExternalLoader && !hasLocalSource) {
+        console.warn("pageLoader not provided - page navigation disabled");
+        return;
+      }
+      const cachedUrl = pageImages.get(newPageNumber);
+      if (cachedUrl) {
+        setCurrentPage(newPageNumber);
+        setImageUrl(cachedUrl);
+        return;
+      }
+      setError(null);
+      try {
+        const pageData = hasExternalLoader ? await pageLoaderRef.current(newPageNumber) : await decodeLocalPage(newPageNumber - 1);
+        if (pageData) {
+          updatePageImage(pageData, newPageNumber);
+        } else {
+          setError(`Failed to load page ${newPageNumber}`);
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : `Unable to load page ${newPageNumber}`;
+        setError(message);
+        onError?.(new Error(message));
+      }
+    },
+    [pageImages, onError, updatePageImage, decodeLocalPage]
+  );
+  const resolvedFileName = useMemo(
+    () => fileName || sourceDescription,
+    [fileName, sourceDescription]
+  );
+  const fileExtension = useMemo(
+    () => getFileExtension(resolvedFileName || ""),
+    [resolvedFileName]
+  );
+  const loadImage = useCallback(
+    async (resetPage = false) => {
+      if (!file && !url) {
+        setImageUrl(null);
+        if (resetPage) setCurrentPage(1);
+        setError(null);
+        return;
+      }
+      setIsLoading(true);
+      setError(null);
+      if (resetPage) {
+        setCurrentPage(1);
+        setFitMode("fit-page");
+        setZoom(100);
+      }
+      setIsLoading(false);
+    },
+    [file, url]
+  );
+  const [previousFileSource, setPreviousFileSource] = useState({});
+  useEffect(() => {
+    const currentFileSource = { file, url };
+    const isNewFile = previousFileSource.file !== file || previousFileSource.url !== url;
+    if (isNewFile) {
+      setPreviousFileSource(currentFileSource);
+      void loadImage(true);
+    } else {
+      void loadImage(false);
+    }
+  }, [file, url, loadImage, previousFileSource.file, previousFileSource.url]);
+  useEffect(() => {
+    return () => {
+      pageImages.forEach((url2) => {
+        URL.revokeObjectURL(url2);
+      });
+      if (imageUrl && file && !pageImages.has(currentPage)) {
+        URL.revokeObjectURL(imageUrl);
+      }
+    };
+  }, []);
+  const hasImage = !!imageUrl;
+  const hasMultiplePages = effectiveTotalPages > 1;
+  const MARGIN = 40;
+  const MIN_ZOOM = 25;
+  const MAX_ZOOM = 400;
+  const ZOOM_LEVELS = [25, 50, 75, 100, 125, 150, 200, 300, 400];
+  const calculateFitZoom = useCallback(
+    (mode) => {
+      if (!imageSize || viewportWidth <= 0) return null;
+      const availableWidth = viewportWidth - MARGIN;
+      if (mode === "fit-width") {
+        const calculatedZoom = Math.round(
+          availableWidth / imageSize.width * 100
+        );
+        return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, calculatedZoom));
+      }
+      if (mode === "fit-page" && viewportHeight > 0) {
+        const availableHeight = viewportHeight - MARGIN;
+        const scaleW = availableWidth / imageSize.width;
+        const scaleH = availableHeight / imageSize.height;
+        const calculatedZoom = Math.round(Math.min(scaleW, scaleH) * 100);
+        return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, calculatedZoom));
+      }
+      return null;
+    },
+    [imageSize, viewportWidth, viewportHeight]
+  );
+  useEffect(() => {
+    if (!hasImage || !imageSize) return;
+    const newZoom = calculateFitZoom(fitMode);
+    if (newZoom !== null) {
+      setZoom(newZoom);
+    }
+  }, [currentPage, hasImage, imageSize, fitMode, calculateFitZoom]);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
+      return void 0;
+    }
+    if (!viewportRef.current) {
+      return void 0;
+    }
+    const updateSize = () => {
+      const bounds = viewportRef.current?.getBoundingClientRect();
+      if (bounds) {
+        setViewportWidth(bounds.width);
+        setViewportHeight(bounds.height);
+      }
+    };
+    updateSize();
+    const observer = new ResizeObserver(updateSize);
+    observer.observe(viewportRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  const handleZoomIn = useCallback(() => {
+    setFitMode("zoom");
+    setZoom((value) => {
+      const nextLevel = ZOOM_LEVELS.find((level) => level > value);
+      return nextLevel || MAX_ZOOM;
+    });
+  }, []);
+  const handleZoomOut = useCallback(() => {
+    setFitMode("zoom");
+    setZoom((value) => {
+      const prevLevel = [...ZOOM_LEVELS].reverse().find((level) => level < value);
+      return prevLevel || MIN_ZOOM;
+    });
+  }, []);
+  const handleFitWidth = useCallback(() => {
+    setFitMode("fit-width");
+    const newZoom = calculateFitZoom("fit-width");
+    if (newZoom !== null) {
+      setZoom(newZoom);
+    }
+  }, [calculateFitZoom]);
+  const handleFitPage = useCallback(() => {
+    setFitMode("fit-page");
+    const newZoom = calculateFitZoom("fit-page");
+    if (newZoom !== null) {
+      setZoom(newZoom);
+    }
+  }, [calculateFitZoom]);
+  const handleFirstPage = useCallback(() => {
+    handlePageChange(1);
+  }, [handlePageChange]);
+  const handleLastPage = useCallback(() => {
+    handlePageChange(effectiveTotalPages);
+  }, [handlePageChange, effectiveTotalPages]);
+  const handlePreviousPage = useCallback(() => {
+    const newPage = Math.max(currentPage - 1, 1);
+    if (newPage !== currentPage) {
+      handlePageChange(newPage);
+    }
+  }, [currentPage, handlePageChange]);
+  const handleNextPage = useCallback(() => {
+    const newPage = Math.min(currentPage + 1, effectiveTotalPages);
+    if (newPage !== currentPage) {
+      handlePageChange(newPage);
+    }
+  }, [currentPage, effectiveTotalPages, handlePageChange]);
+  const handleToggleFullScreen = useCallback(() => {
+    if (!document.fullscreenElement && containerRef.current?.requestFullscreen) {
+      containerRef.current.requestFullscreen();
+    } else if (document.fullscreenElement && document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }, []);
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      setIsFullScreen(!!document.fullscreenElement);
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+    };
+  }, []);
+  const handlePrint = useCallback(() => {
+    if (!imageUrl) return;
+    const printWindow = window.open("", "_blank", "width=900,height=1200");
+    if (!printWindow) return;
+    const doc = printWindow.document;
+    doc.title = resolvedFileName || "Document";
+    const style2 = doc.createElement("style");
+    style2.textContent = "@page { margin: 0.5cm; }html, body { margin: 0; padding: 0; }img { display: block; width: 100%; height: auto; page-break-after: always; }";
+    doc.head.appendChild(style2);
+    const img = doc.createElement("img");
+    img.alt = resolvedFileName || "Document";
+    img.onload = () => {
+      window.setTimeout(() => printWindow.print(), 100);
+    };
+    img.src = imageUrl;
+    doc.body.appendChild(img);
+  }, [imageUrl, resolvedFileName]);
+  const toolbar = mergeToolbarConfig({
+    showDownload,
+    showPrint,
+    showMetadata,
+    showTags,
+    showProperties,
+    showHistory,
+    onDownloadClick,
+    onPrintClick,
+    onTagsClick,
+    onMetadataClick,
+    onPropertiesClick,
+    onHistoryClick,
+    toolbarActions
+  });
+  const displayScale = zoom;
+  const handleImageLoad = useCallback(
+    (e) => {
+      const img = e.currentTarget;
+      setImageSize({ width: img.naturalWidth, height: img.naturalHeight });
+      if (!hasImage) {
+        onLoad?.();
+      }
+    },
+    [hasImage, onLoad]
+  );
+  const renderImage = () => {
+    if (!imageUrl) {
+      return /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: "No image available." });
+    }
+    let imgStyle = {
+      display: "block",
+      borderRadius: "4px"
+    };
+    if (imageSize) {
+      const zoomFactor = zoom / 100;
+      const scaledWidth = imageSize.width * zoomFactor;
+      const scaledHeight = imageSize.height * zoomFactor;
+      imgStyle = {
+        ...imgStyle,
+        width: `${scaledWidth}px`,
+        height: `${scaledHeight}px`,
+        maxWidth: "none",
+        maxHeight: "none"
+      };
+    }
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        component: "img",
+        ref: imgRef,
+        src: imageUrl,
+        alt: `${resolvedFileName} page ${currentPage}`,
+        onLoad: handleImageLoad,
+        onError: () => {
+          setError("Failed to load image");
+          onError?.(new Error("Failed to load image"));
+        },
+        sx: {
+          ...imgStyle,
+          boxShadow: 1,
+          backgroundColor: "#fff",
+          margin: "20px"
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: containerRef,
+      className: `tiff-viewer ${className}`,
+      sx: {
+        width,
+        height,
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        ...style
+      },
+      ...props,
+      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__ */ 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: [
+                  hasMultiplePages && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleFirstPage,
+                        disabled: currentPage === 1,
+                        title: "First Page",
+                        "aria-label": "Go to first page",
+                        children: /* @__PURE__ */ jsx(FirstPageIcon, { fontSize: "small" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handlePreviousPage,
+                        disabled: currentPage === 1,
+                        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 ",
+                          currentPage,
+                          " of ",
+                          effectiveTotalPages
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleNextPage,
+                        disabled: currentPage === effectiveTotalPages,
+                        title: "Next Page",
+                        "aria-label": "Go to next page",
+                        children: /* @__PURE__ */ jsx(ChevronRightIcon, { fontSize: "small" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        size: "small",
+                        onClick: handleLastPage,
+                        disabled: currentPage === effectiveTotalPages,
+                        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: !hasImage || zoom <= 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: hasImage ? `${displayScale}%` : "\u2014"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: handleZoomIn,
+                      disabled: !hasImage || zoom >= 400,
+                      title: "Zoom In",
+                      "aria-label": "Zoom in",
+                      children: /* @__PURE__ */ jsx(ZoomInIcon, { fontSize: "small" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: handleFitWidth,
+                      disabled: !hasImage,
+                      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: !hasImage,
+                      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 } }),
+                  !toolbar.isHidden("download") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler("download", onDownloadClick),
+                      disabled: toolbar.isDisabled("download"),
+                      title: toolbar.getLabel("download") || "Download",
+                      "aria-label": "Download TIFF",
+                      children: toolbar.getIcon("download") || /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" })
+                    }
+                  ),
+                  !toolbar.isHidden("print") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler("print", onPrintClick || handlePrint),
+                      disabled: toolbar.isDisabled("print"),
+                      title: toolbar.getLabel("print") || "Print",
+                      "aria-label": "Print TIFF",
+                      children: toolbar.getIcon("print") || /* @__PURE__ */ jsx(PrintIcon, { fontSize: "small" })
+                    }
+                  ),
+                  !toolbar.isHidden("fullscreen") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler(
+                        "fullscreen",
+                        handleToggleFullScreen
+                      ),
+                      disabled: toolbar.isDisabled("fullscreen"),
+                      title: toolbar.getLabel("fullscreen") || "Fullscreen",
+                      "aria-label": "Toggle fullscreen",
+                      children: toolbar.getIcon("fullscreen") || /* @__PURE__ */ jsx(FullscreenIcon, { fontSize: "small" })
+                    }
+                  ),
+                  !toolbar.isHidden("metadata") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler("metadata", onMetadataClick),
+                      disabled: toolbar.isDisabled("metadata"),
+                      title: toolbar.getLabel("metadata") || "Document Metadata",
+                      "aria-label": "View document metadata",
+                      children: toolbar.getIcon("metadata") || /* @__PURE__ */ jsx(DescriptionIcon, { fontSize: "small" })
+                    }
+                  ),
+                  !toolbar.isHidden("properties") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler("properties", onPropertiesClick),
+                      disabled: toolbar.isDisabled("properties"),
+                      title: toolbar.getLabel("properties") || "Document Properties",
+                      "aria-label": "View document properties",
+                      children: toolbar.getIcon("properties") || /* @__PURE__ */ jsx(InfoIcon, { fontSize: "small" })
+                    }
+                  ),
+                  !toolbar.isHidden("tags") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler("tags", onTagsClick),
+                      disabled: toolbar.isDisabled("tags"),
+                      title: toolbar.getLabel("tags") || "Document Tags",
+                      "aria-label": "View document tags",
+                      children: toolbar.getIcon("tags") || /* @__PURE__ */ jsx(LocalOffer, { fontSize: "small" })
+                    }
+                  ),
+                  !toolbar.isHidden("history") && /* @__PURE__ */ jsx(
+                    IconButton,
+                    {
+                      size: "small",
+                      onClick: toolbar.getHandler("history", onHistoryClick),
+                      disabled: toolbar.isDisabled("history"),
+                      title: toolbar.getLabel("history") || "Document History",
+                      "aria-label": "View document history",
+                      children: toolbar.getIcon("history") || /* @__PURE__ */ jsx(HistoryIcon, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            ) }),
+            (isLoading || internalLoading) && /* @__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, {}),
+            /* @__PURE__ */ jsx(
+              CardContent,
+              {
+                sx: {
+                  flexGrow: 1,
+                  flexShrink: 1,
+                  minHeight: 0,
+                  p: 0,
+                  overflow: "hidden",
+                  backgroundColor: "#f6f8fa",
+                  position: "relative"
+                },
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    ref: viewportRef,
+                    sx: {
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      overflow: "auto"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        sx: {
+                          minWidth: "100%",
+                          minHeight: "100%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center"
+                        },
+                        children: renderImage()
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+var TIFFViewer = (props) => {
+  const sourceDescription = useMemo(
+    () => resolveDocumentName(props.file, props.fileName, props.url),
+    [props.file, props.fileName, props.url]
+  );
+  return /* @__PURE__ */ jsx(TIFFViewerContent, { ...props, sourceDescription });
+};
+
+export {
+  TIFFViewer
+};
+//# sourceMappingURL=chunk-JKX5RSLF.mjs.map