@lamberl-lee/file-preview 0.2.0

package/dist/PptxPreview.js

@@ -0,0 +1,376 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useRef,
+  useState,
+  useCallback,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Grid3X3Icon,
+  MonitorIcon,
+  AlertTriangleIcon,
+  ZoomInIcon,
+  ZoomOutIcon,
+  Maximize2Icon,
+  Minimize2Icon
+} from "./icons";
+import { readBinaryPreviewAsArrayBuffer } from "./core/binary";
+import { useLocale } from "./core/i18n";
+import "./styles/PptxPreview.css";
+const UNSUPPORTED_IMG_FORMATS = ["image/x-emf", "image/x-wmf", "image/emf", "image/wmf"];
+function hideBrokenImages(container) {
+  const images = container.querySelectorAll("img");
+  images.forEach((img) => {
+    const src = img.src || "";
+    const isUnsupported = UNSUPPORTED_IMG_FORMATS.some(
+      (fmt) => src.startsWith(`data:${fmt}`) || src.includes(fmt.replace("/", "/"))
+    );
+    if (isUnsupported) {
+      img.src = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E";
+      img.style.opacity = "0.15";
+      img.style.background = "repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 0 0 / 8px 8px";
+    }
+  });
+}
+let pptxPreviewModule = null;
+async function getPptxPreview() {
+  if (!pptxPreviewModule) {
+    pptxPreviewModule = await import("pptx-preview");
+  }
+  return pptxPreviewModule;
+}
+const PptxRenderContainer = forwardRef(function PptxRenderContainer2({ content, source, mode, zoom, onReady, onError }, ref) {
+  const containerRef = useRef(null);
+  const viewerRef = useRef(null);
+  const slideCountRef = useRef(0);
+  useImperativeHandle(
+    ref,
+    () => ({
+      goToSlide(index) {
+        const viewer = viewerRef.current;
+        if (!viewer) return;
+        const clamped = Math.max(0, Math.min(index, slideCountRef.current - 1));
+        try {
+          viewer.renderSingleSlide(clamped);
+        } catch (err) {
+          console.warn("Slide navigation error:", err);
+        }
+      },
+      nextSlide() {
+        const viewer = viewerRef.current;
+        if (!viewer) return;
+        try {
+          viewer.renderNextSlide();
+        } catch {
+        }
+      },
+      prevSlide() {
+        const viewer = viewerRef.current;
+        if (!viewer) return;
+        try {
+          viewer.renderPreSlide();
+        } catch {
+        }
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let cancelled = false;
+    async function render() {
+      if (!containerRef.current) return;
+      if (viewerRef.current) {
+        try {
+          viewerRef.current.destroy?.();
+        } catch {
+        }
+        viewerRef.current = null;
+      }
+      containerRef.current.innerHTML = "";
+      try {
+        const { init } = await getPptxPreview();
+        if (cancelled || !containerRef.current) return;
+        const viewer = init(containerRef.current, {
+          width: 960,
+          height: 540,
+          mode: mode === "grid" ? "list" : "slide"
+        });
+        viewerRef.current = viewer;
+        const buffer = await readBinaryPreviewAsArrayBuffer({ source, content });
+        if (cancelled) return;
+        await viewer.preview(buffer);
+        if (cancelled) return;
+        const pptx = viewer.pptx;
+        const count = pptx?.slides?.length || viewer.slideCount || 0;
+        const idx = viewer.currentIndex || 0;
+        slideCountRef.current = count;
+        onReady({ slideCount: count, currentIndex: idx });
+        try {
+          if (containerRef.current) {
+            hideBrokenImages(containerRef.current);
+            const navElements = containerRef.current.querySelectorAll(
+              ".pre-btn, .next-btn, .pagination, [class*='pre-btn'], [class*='next-btn'], [class*='pagination'], button"
+            );
+            navElements.forEach((el) => {
+              el.style.display = "none";
+            });
+          }
+        } catch {
+        }
+      } catch (err) {
+        if (!cancelled) {
+          onError(
+            err instanceof Error ? err.message : "PPTX preview failed \u2014 file may be corrupted or unsupported"
+          );
+        }
+      }
+    }
+    render();
+    return () => {
+      cancelled = true;
+      if (viewerRef.current) {
+        try {
+          viewerRef.current.destroy?.();
+        } catch {
+        }
+        viewerRef.current = null;
+      }
+      if (containerRef.current) {
+        containerRef.current.innerHTML = "";
+      }
+    };
+  }, [content, source, mode, onReady, onError]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        zoom: zoom / 100,
+        maxWidth: "100%",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: containerRef,
+          className: "fv-pptx__render-container",
+          style: {
+            minWidth: mode === "slide" ? 960 : void 0,
+            minHeight: mode === "slide" ? 540 : void 0
+          }
+        }
+      )
+    }
+  );
+});
+function PptxPreview({ content, source, fileName }) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [slideCount, setSlideCount] = useState(0);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [viewMode, setViewMode] = useState("slide");
+  const [zoom, setZoom] = useState(100);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [renderKey, setRenderKey] = useState(0);
+  const renderHandleRef = useRef(null);
+  const t = useLocale();
+  const handleReady = useCallback(
+    (info) => {
+      setSlideCount(info.slideCount);
+      setCurrentSlide(info.currentIndex);
+      setLoading(false);
+      setError(null);
+    },
+    []
+  );
+  const handleError = useCallback((errMessage) => {
+    setError(errMessage);
+    setLoading(false);
+  }, []);
+  const switchViewMode = useCallback((mode) => {
+    setViewMode(mode);
+    setLoading(true);
+    setError(null);
+    setRenderKey((k) => k + 1);
+  }, []);
+  const goToSlide = useCallback(
+    (index) => {
+      if (viewMode !== "slide") return;
+      const clamped = Math.max(0, Math.min(index, slideCount - 1));
+      renderHandleRef.current?.goToSlide(clamped);
+      setCurrentSlide(clamped);
+    },
+    [slideCount, viewMode]
+  );
+  const nextSlide = useCallback(() => {
+    goToSlide(currentSlide + 1);
+  }, [currentSlide, goToSlide]);
+  const prevSlide = useCallback(() => {
+    goToSlide(currentSlide - 1);
+  }, [currentSlide, goToSlide]);
+  useEffect(() => {
+    function handleKeyDown(e) {
+      if (viewMode !== "slide" || loading) return;
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        prevSlide();
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextSlide();
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [viewMode, loading, prevSlide, nextSlide]);
+  const toggleFullscreen = useCallback(() => {
+    const el = document.querySelector("[data-preview-container]");
+    if (!el) return;
+    if (!document.fullscreenElement) {
+      el.requestFullscreen().then(() => setIsFullscreen(true)).catch(() => {
+      });
+    } else {
+      document.exitFullscreen().then(() => setIsFullscreen(false)).catch(() => {
+      });
+    }
+  }, []);
+  useEffect(() => {
+    function onFullscreenChange() {
+      setIsFullscreen(!!document.fullscreenElement);
+    }
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+  }, []);
+  const ext = fileName.toLowerCase().split(".").pop() || "";
+  if (ext === "ppt") {
+    return /* @__PURE__ */ jsxs("div", { className: "fv-pptx__error", children: [
+      /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 36, className: "fv-pptx__error-icon" }),
+      /* @__PURE__ */ jsx("p", { className: "fv-pptx__error-title", children: t.formatNotSupported }),
+      /* @__PURE__ */ jsx("p", { className: "fv-pptx__error-msg", children: t.legacyPptDesc })
+    ] });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { className: "fv-pptx__error", children: [
+      /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 36, className: "fv-pptx__error-icon" }),
+      /* @__PURE__ */ jsx("p", { className: "fv-pptx__error-title", children: t.previewFailed }),
+      /* @__PURE__ */ jsx("p", { className: "fv-pptx__error-msg", children: error })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fv-pptx", "data-preview-container": true, children: [
+    /* @__PURE__ */ jsxs("div", { className: "fv-pptx__toolbar", children: [
+      /* @__PURE__ */ jsx("div", { className: "fv-pptx__toolbar-left", children: viewMode === "slide" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "fv-pptx__slide-count", children: [
+          currentSlide + 1,
+          " / ",
+          slideCount
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "fv-pptx__slide-label", children: t.page })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "fv-pptx__slide-count", children: slideCount }),
+        /* @__PURE__ */ jsx("span", { className: "fv-pptx__slide-label", children: t.page })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "fv-pptx__toolbar-right", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => switchViewMode("slide"),
+            className: `fv-pptx__mode-btn ${viewMode === "slide" ? "fv-pptx__mode-btn--active" : ""}`,
+            title: t.slideView,
+            children: /* @__PURE__ */ jsx(MonitorIcon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => switchViewMode("grid"),
+            className: `fv-pptx__mode-btn ${viewMode === "grid" ? "fv-pptx__mode-btn--active" : ""}`,
+            title: t.gridView,
+            children: /* @__PURE__ */ jsx(Grid3X3Icon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "fv-toolbar__separator" }),
+        /* @__PURE__ */ jsxs("div", { className: "fv-pptx__zoom-group", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setZoom(Math.max(50, zoom - 10)),
+              className: "fv-pptx__zoom-btn",
+              title: t.zoomOut,
+              children: /* @__PURE__ */ jsx(ZoomOutIcon, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "fv-pptx__zoom-label", children: [
+            zoom,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setZoom(Math.min(200, zoom + 10)),
+              className: "fv-pptx__zoom-btn",
+              title: t.zoomIn,
+              children: /* @__PURE__ */ jsx(ZoomInIcon, { size: 14 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: toggleFullscreen,
+            className: "fv-pptx__fullscreen-btn",
+            title: t.fullscreen,
+            children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2Icon, { size: 16 }) : /* @__PURE__ */ jsx(Maximize2Icon, { size: 16 })
+          }
+        )
+      ] }),
+      viewMode === "slide" && /* @__PURE__ */ jsxs("div", { className: "fv-pptx__nav", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: prevSlide,
+            disabled: currentSlide === 0 || loading,
+            className: "fv-pptx__nav-btn",
+            title: t.previousPage,
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: nextSlide,
+            disabled: currentSlide >= slideCount - 1 || loading,
+            className: "fv-pptx__nav-btn",
+            title: t.nextPage,
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 16 })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "fv-pptx__content", children: [
+      loading && /* @__PURE__ */ jsxs("div", { className: "fv-pptx__loading-overlay", children: [
+        /* @__PURE__ */ jsx("div", { className: "fv-spinner fv-spinner--lg" }),
+        /* @__PURE__ */ jsx("p", { className: "fv-pptx__loading-label", children: t.loadingPresentation })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: viewMode === "slide" ? "fv-pptx__slide-wrap" : "fv-pptx__grid-wrap", children: /* @__PURE__ */ jsx(
+        PptxRenderContainer,
+        {
+          ref: renderHandleRef,
+          content,
+          source,
+          mode: viewMode,
+          zoom,
+          onReady: handleReady,
+          onError: handleError
+        },
+        renderKey
+      ) })
+    ] })
+  ] });
+}
+export {
+  PptxPreview
+};
+//# sourceMappingURL=PptxPreview.js.map

package/dist/PptxPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PptxPreview.tsx"],"sourcesContent":["\nimport {\n  useEffect,\n  useRef,\n  useState,\n  useCallback,\n  forwardRef,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  Grid3X3Icon,\n  MonitorIcon,\n  AlertTriangleIcon,\n  ZoomInIcon,\n  ZoomOutIcon,\n  Maximize2Icon,\n  Minimize2Icon,\n} from \"./icons\";\nimport { readBinaryPreviewAsArrayBuffer } from \"./core/binary\";\nimport type { PreviewSource } from \"./core/types\";\nimport { useLocale } from \"./core/i18n\";\nimport \"./styles/PptxPreview.css\";\n\ninterface PptxPreviewProps {\n  content?: string | null;\n  source?: PreviewSource;\n  fileName: string;\n}\n\ntype ViewMode = \"slide\" | \"grid\";\n\n/**\n * Lightweight post-render: silently replace images that browsers can't display\n * (e.g. EMF/WMF) with a barely-visible dotted-border placeholder instead of\n * the default broken-image icon.\n */\nconst UNSUPPORTED_IMG_FORMATS = [\"image/x-emf\", \"image/x-wmf\", \"image/emf\", \"image/wmf\"];\n\nfunction hideBrokenImages(container: HTMLElement) {\n  const images = container.querySelectorAll(\"img\");\n  images.forEach((img) => {\n    const src = img.src || \"\";\n    const isUnsupported = UNSUPPORTED_IMG_FORMATS.some(\n      (fmt) => src.startsWith(`data:${fmt}`) || src.includes(fmt.replace(\"/\", \"/\"))\n    );\n    if (isUnsupported) {\n      // Replace with a subtle transparent 1px placeholder\n      img.src =\n        \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E\";\n      img.style.opacity = \"0.15\";\n      img.style.background = \"repeating-conic-gradient(#e5e7eb 0% 25%, transparent 0% 50%) 0 0 / 8px 8px\";\n    }\n  });\n}\n\n// Lazy-load pptx-preview to avoid SSR issues\nlet pptxPreviewModule: typeof import(\"pptx-preview\") | null = null;\nasync function getPptxPreview() {\n  if (!pptxPreviewModule) {\n    pptxPreviewModule = await import(\"pptx-preview\");\n  }\n  return pptxPreviewModule;\n}\n\nexport interface PptxRenderHandle {\n  goToSlide: (index: number) => void;\n  nextSlide: () => void;\n  prevSlide: () => void;\n}\n\n// Inner component that re-mounts on content/mode changes (avoids setState-in-effect lint issue)\nconst PptxRenderContainer = forwardRef<\n  PptxRenderHandle,\n  {\n    content?: string | null;\n    source?: PreviewSource;\n    mode: ViewMode;\n    zoom: number;\n    onReady: (info: { slideCount: number; currentIndex: number }) => void;\n    onError: (error: string) => void;\n  }\n>(function PptxRenderContainer(\n  { content, source, mode, zoom, onReady, onError },\n  ref\n) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const viewerRef = useRef<any>(null);\n  const slideCountRef = useRef(0);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      goToSlide(index: number) {\n        const viewer = viewerRef.current;\n        if (!viewer) return;\n        const clamped = Math.max(0, Math.min(index, slideCountRef.current - 1));\n        try {\n          viewer.renderSingleSlide(clamped);\n        } catch (err) {\n          console.warn(\"Slide navigation error:\", err);\n        }\n      },\n      nextSlide() {\n        const viewer = viewerRef.current;\n        if (!viewer) return;\n        try {\n          viewer.renderNextSlide();\n        } catch {}\n      },\n      prevSlide() {\n        const viewer = viewerRef.current;\n        if (!viewer) return;\n        try {\n          viewer.renderPreSlide();\n        } catch {}\n      },\n    }),\n    []\n  );\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n    let cancelled = false;\n\n    async function render() {\n      if (!containerRef.current) return;\n\n      // Destroy previous viewer\n      if (viewerRef.current) {\n        try {\n          viewerRef.current.destroy?.();\n        } catch {\n          // ignore\n        }\n\n        viewerRef.current = null;\n      }\n\n      containerRef.current.innerHTML = \"\";\n\n      try {\n        const { init } = await getPptxPreview();\n        if (cancelled || !containerRef.current) return;\n\n        const viewer = init(containerRef.current, {\n          width: 960,\n          height: 540,\n          mode: mode === \"grid\" ? \"list\" : \"slide\",\n        });\n\n        viewerRef.current = viewer;\n\n        const buffer = await readBinaryPreviewAsArrayBuffer({ source, content });\n\n        if (cancelled) return;\n\n        // Use preview() for simpler flow (load + render in one call)\n        await viewer.preview(buffer);\n        if (cancelled) return;\n\n        const pptx = viewer.pptx;\n        const count = pptx?.slides?.length || viewer.slideCount || 0;\n        const idx = viewer.currentIndex || 0;\n        slideCountRef.current = count;\n\n        onReady({ slideCount: count, currentIndex: idx });\n\n        // Post-render: hide broken images & library navigation\n        try {\n          if (containerRef.current) {\n            hideBrokenImages(containerRef.current);\n\n            // Hide built-in navigation elements rendered by the library\n            const navElements = containerRef.current.querySelectorAll(\n              \".pre-btn, .next-btn, .pagination, [class*='pre-btn'], [class*='next-btn'], [class*='pagination'], button\"\n            );\n            navElements.forEach((el) => {\n              (el as HTMLElement).style.display = \"none\";\n            });\n          }\n        } catch {}\n      } catch (err) {\n        if (!cancelled) {\n          onError(\n            err instanceof Error\n              ? err.message\n              : \"PPTX preview failed — file may be corrupted or unsupported\"\n          );\n        }\n      }\n    }\n\n    render();\n\n    return () => {\n      cancelled = true;\n\n      if (viewerRef.current) {\n        try {\n          viewerRef.current.destroy?.();\n        } catch {\n          // ignore\n        }\n\n        viewerRef.current = null;\n      }\n\n      if (containerRef.current) {\n        containerRef.current.innerHTML = \"\";\n      }\n    };\n  }, [content, source, mode, onReady, onError]);\n\n  return (\n    <div\n      style={{\n        zoom: zoom / 100,\n        maxWidth: \"100%\",\n        overflow: \"hidden\",\n      }}\n    >\n      <div\n        ref={containerRef}\n        className=\"fv-pptx__render-container\"\n        style={{\n          minWidth: mode === \"slide\" ? 960 : undefined,\n          minHeight: mode === \"slide\" ? 540 : undefined,\n        }}\n      />\n    </div>\n  );\n});\n\nexport function PptxPreview({ content, source, fileName }: PptxPreviewProps) {\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [slideCount, setSlideCount] = useState(0);\n  const [currentSlide, setCurrentSlide] = useState(0);\n  const [viewMode, setViewMode] = useState<ViewMode>(\"slide\");\n  const [zoom, setZoom] = useState(100);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n  const [renderKey, setRenderKey] = useState(0);\n  const renderHandleRef = useRef<PptxRenderHandle>(null);\n  const t = useLocale();\n\n  // Stable callbacks for PptxRenderContainer\n  const handleReady = useCallback(\n    (info: { slideCount: number; currentIndex: number }) => {\n      setSlideCount(info.slideCount);\n      setCurrentSlide(info.currentIndex);\n      setLoading(false);\n      setError(null);\n    },\n    []\n  );\n\n  const handleError = useCallback((errMessage: string) => {\n    setError(errMessage);\n    setLoading(false);\n  }, []);\n\n  // Handle view mode switch\n  const switchViewMode = useCallback((mode: ViewMode) => {\n    setViewMode(mode);\n    setLoading(true);\n    setError(null);\n    setRenderKey((k) => k + 1);\n  }, []);\n\n  // Navigation\n  const goToSlide = useCallback(\n    (index: number) => {\n      if (viewMode !== \"slide\") return;\n      const clamped = Math.max(0, Math.min(index, slideCount - 1));\n      renderHandleRef.current?.goToSlide(clamped);\n      setCurrentSlide(clamped);\n    },\n    [slideCount, viewMode]\n  );\n\n  const nextSlide = useCallback(() => {\n    goToSlide(currentSlide + 1);\n  }, [currentSlide, goToSlide]);\n\n  const prevSlide = useCallback(() => {\n    goToSlide(currentSlide - 1);\n  }, [currentSlide, goToSlide]);\n\n  // Keyboard navigation\n  useEffect(() => {\n    function handleKeyDown(e: KeyboardEvent) {\n      if (viewMode !== \"slide\" || loading) return;\n      if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        prevSlide();\n      } else if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n        e.preventDefault();\n        nextSlide();\n      }\n    }\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [viewMode, loading, prevSlide, nextSlide]);\n\n  // Fullscreen toggle\n  const toggleFullscreen = useCallback(() => {\n    const el = document.querySelector(\"[data-preview-container]\");\n    if (!el) return;\n    if (!document.fullscreenElement) {\n      el.requestFullscreen().then(() => setIsFullscreen(true)).catch(() => {});\n    } else {\n      document.exitFullscreen().then(() => setIsFullscreen(false)).catch(() => {});\n    }\n  }, []);\n\n  useEffect(() => {\n    function onFullscreenChange() {\n      setIsFullscreen(!!document.fullscreenElement);\n    }\n    document.addEventListener(\"fullscreenchange\", onFullscreenChange);\n    return () =>\n      document.removeEventListener(\"fullscreenchange\", onFullscreenChange);\n  }, []);\n\n  // Detect .ppt files early\n  const ext = fileName.toLowerCase().split(\".\").pop() || \"\";\n  if (ext === \"ppt\") {\n    return (\n      <div className=\"fv-pptx__error\">\n        <AlertTriangleIcon size={36} className=\"fv-pptx__error-icon\" />\n        <p className=\"fv-pptx__error-title\">{t.formatNotSupported}</p>\n        <p className=\"fv-pptx__error-msg\">\n          {t.legacyPptDesc}\n        </p>\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className=\"fv-pptx__error\">\n        <AlertTriangleIcon size={36} className=\"fv-pptx__error-icon\" />\n        <p className=\"fv-pptx__error-title\">{t.previewFailed}</p>\n        <p className=\"fv-pptx__error-msg\">\n          {error}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"fv-pptx\" data-preview-container>\n      {/* Toolbar */}\n      <div className=\"fv-pptx__toolbar\">\n        <div className=\"fv-pptx__toolbar-left\">\n          {viewMode === \"slide\" ? (\n            <>\n              <span className=\"fv-pptx__slide-count\">\n                {currentSlide + 1} / {slideCount}\n              </span>\n              <span className=\"fv-pptx__slide-label\">{t.page}</span>\n            </>\n          ) : (\n            <>\n              <span className=\"fv-pptx__slide-count\">\n                {slideCount}\n              </span>\n              <span className=\"fv-pptx__slide-label\">{t.page}</span>\n            </>\n          )}\n        </div>\n\n        <div className=\"fv-pptx__toolbar-right\">\n          {/* View mode toggle */}\n          <button\n            onClick={() => switchViewMode(\"slide\")}\n            className={`fv-pptx__mode-btn ${viewMode === \"slide\" ? \"fv-pptx__mode-btn--active\" : \"\"}`}\n            title={t.slideView}\n          >\n            <MonitorIcon size={16} />\n          </button>\n          <button\n            onClick={() => switchViewMode(\"grid\")}\n            className={`fv-pptx__mode-btn ${viewMode === \"grid\" ? \"fv-pptx__mode-btn--active\" : \"\"}`}\n            title={t.gridView}\n          >\n            <Grid3X3Icon size={16} />\n          </button>\n\n          <div className=\"fv-toolbar__separator\" />\n\n          {/* Zoom controls */}\n          <div className=\"fv-pptx__zoom-group\">\n            <button\n              onClick={() => setZoom(Math.max(50, zoom - 10))}\n              className=\"fv-pptx__zoom-btn\"\n              title={t.zoomOut}\n            >\n              <ZoomOutIcon size={14} />\n            </button>\n            <span className=\"fv-pptx__zoom-label\">{zoom}%</span>\n            <button\n              onClick={() => setZoom(Math.min(200, zoom + 10))}\n              className=\"fv-pptx__zoom-btn\"\n              title={t.zoomIn}\n            >\n              <ZoomInIcon size={14} />\n            </button>\n          </div>\n\n          <button\n            onClick={toggleFullscreen}\n            className=\"fv-pptx__fullscreen-btn\"\n            title={t.fullscreen}\n          >\n            {isFullscreen ? <Minimize2Icon size={16} /> : <Maximize2Icon size={16} />}\n          </button>\n        </div>\n\n        {viewMode === \"slide\" && (\n          <div className=\"fv-pptx__nav\">\n            <button\n              onClick={prevSlide}\n              disabled={currentSlide === 0 || loading}\n              className=\"fv-pptx__nav-btn\"\n              title={t.previousPage}\n            >\n              <ChevronLeftIcon size={16} />\n            </button>\n            <button\n              onClick={nextSlide}\n              disabled={currentSlide >= slideCount - 1 || loading}\n              className=\"fv-pptx__nav-btn\"\n              title={t.nextPage}\n            >\n              <ChevronRightIcon size={16} />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {/* Content area */}\n      <div className=\"fv-pptx__content\">\n        {loading && (\n          <div className=\"fv-pptx__loading-overlay\">\n            <div className=\"fv-spinner fv-spinner--lg\" />\n            <p className=\"fv-pptx__loading-label\">\n              {t.loadingPresentation}\n            </p>\n          </div>\n        )}\n\n        <div className={viewMode === \"slide\" ? \"fv-pptx__slide-wrap\" : \"fv-pptx__grid-wrap\"}>\n          <PptxRenderContainer\n            key={renderKey}\n            ref={renderHandleRef}\n            content={content}\n            source={source}\n            mode={viewMode}\n            zoom={zoom}\n            onReady={handleReady}\n            onError={handleError}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["PptxRenderContainer"]}

package/dist/PreviewErrorBoundary.d.ts

@@ -0,0 +1,29 @@
+import react__default from 'react';
+import { FileInfo } from './core/types.js';
+
+interface PreviewErrorBoundaryProps {
+    file: FileInfo;
+    pluginId?: string;
+    pluginName?: string;
+    resetKey: string;
+    onRetry: () => void;
+    children: react__default.ReactNode;
+}
+interface PreviewErrorBoundaryState {
+    error: Error | null;
+    previousResetKey: string;
+}
+declare class PreviewErrorBoundary extends react__default.Component<PreviewErrorBoundaryProps, PreviewErrorBoundaryState> {
+    state: PreviewErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): {
+        error: Error;
+    };
+    static getDerivedStateFromProps(props: PreviewErrorBoundaryProps, state: PreviewErrorBoundaryState): {
+        error: null;
+        previousResetKey: string;
+    } | null;
+    componentDidCatch(error: Error, info: react__default.ErrorInfo): void;
+    render(): string | number | bigint | boolean | react__default.JSX.Element | Iterable<react__default.ReactNode> | Promise<string | number | bigint | boolean | react__default.ReactPortal | react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>> | Iterable<react__default.ReactNode> | null | undefined> | null | undefined;
+}
+
+export { PreviewErrorBoundary };

package/dist/PreviewErrorBoundary.js

@@ -0,0 +1,53 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { PreviewFallback } from "./PreviewFallback";
+class PreviewErrorBoundary extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      error: null,
+      previousResetKey: this.props.resetKey
+    };
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  static getDerivedStateFromProps(props, state) {
+    if (props.resetKey !== state.previousResetKey) {
+      return {
+        error: null,
+        previousResetKey: props.resetKey
+      };
+    }
+    return null;
+  }
+  componentDidCatch(error, info) {
+    console.warn("[preview-error-boundary]", {
+      error,
+      info,
+      file: this.props.file.name,
+      pluginId: this.props.pluginId
+    });
+  }
+  render() {
+    if (this.state.error) {
+      const kind = this.state.error.name === "PreviewPluginLoadError" ? "plugin-load-failed" : "render-failed";
+      return /* @__PURE__ */ jsx(
+        PreviewFallback,
+        {
+          kind,
+          file: this.props.file,
+          error: this.state.error,
+          pluginId: this.props.pluginId,
+          pluginName: this.props.pluginName,
+          onRetry: this.props.onRetry
+        }
+      );
+    }
+    return this.props.children;
+  }
+}
+export {
+  PreviewErrorBoundary
+};
+//# sourceMappingURL=PreviewErrorBoundary.js.map

package/dist/PreviewErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PreviewErrorBoundary.tsx"],"sourcesContent":["import React from \"react\";\nimport type { FileInfo } from \"./utils\";\nimport { PreviewFallback, type PreviewFallbackKind } from \"./PreviewFallback\";\n\ninterface PreviewErrorBoundaryProps {\n  file: FileInfo;\n  pluginId?: string;\n  pluginName?: string;\n  resetKey: string;\n  onRetry: () => void;\n  children: React.ReactNode;\n}\n\ninterface PreviewErrorBoundaryState {\n  error: Error | null;\n  previousResetKey: string;\n}\n\nexport class PreviewErrorBoundary extends React.Component<\n  PreviewErrorBoundaryProps,\n  PreviewErrorBoundaryState\n> {\n  state: PreviewErrorBoundaryState = {\n    error: null,\n    previousResetKey: this.props.resetKey,\n  };\n\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n\n  static getDerivedStateFromProps(\n    props: PreviewErrorBoundaryProps,\n    state: PreviewErrorBoundaryState,\n  ) {\n    if (props.resetKey !== state.previousResetKey) {\n      return {\n        error: null,\n        previousResetKey: props.resetKey,\n      };\n    }\n\n    return null;\n  }\n\n  componentDidCatch(error: Error, info: React.ErrorInfo) {\n    console.warn(\"[preview-error-boundary]\", {\n      error,\n      info,\n      file: this.props.file.name,\n      pluginId: this.props.pluginId,\n    });\n  }\n\n  render() {\n    if (this.state.error) {\n      const kind: PreviewFallbackKind =\n        this.state.error.name === \"PreviewPluginLoadError\"\n          ? \"plugin-load-failed\"\n          : \"render-failed\";\n\n      return (\n        <PreviewFallback\n          kind={kind}\n          file={this.props.file}\n          error={this.state.error}\n          pluginId={this.props.pluginId}\n          pluginName={this.props.pluginName}\n          onRetry={this.props.onRetry}\n        />\n      );\n    }\n\n    return this.props.children;\n  }\n}\n"],"mappings":"AA8DQ;AA9DR,OAAO,WAAW;AAElB,SAAS,uBAAiD;AAgBnD,MAAM,6BAA6B,MAAM,UAG9C;AAAA,EAHK;AAAA;AAIL,iBAAmC;AAAA,MACjC,OAAO;AAAA,MACP,kBAAkB,KAAK,MAAM;AAAA,IAC/B;AAAA;AAAA,EAEA,OAAO,yBAAyB,OAAc;AAC5C,WAAO,EAAE,MAAM;AAAA,EACjB;AAAA,EAEA,OAAO,yBACL,OACA,OACA;AACA,QAAI,MAAM,aAAa,MAAM,kBAAkB;AAC7C,aAAO;AAAA,QACL,OAAO;AAAA,QACP,kBAAkB,MAAM;AAAA,MAC1B;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,kBAAkB,OAAc,MAAuB;AACrD,YAAQ,KAAK,4BAA4B;AAAA,MACvC;AAAA,MACA;AAAA,MACA,MAAM,KAAK,MAAM,KAAK;AAAA,MACtB,UAAU,KAAK,MAAM;AAAA,IACvB,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,QAAI,KAAK,MAAM,OAAO;AACpB,YAAM,OACJ,KAAK,MAAM,MAAM,SAAS,2BACtB,uBACA;AAEN,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,MAAM,KAAK,MAAM;AAAA,UACjB,OAAO,KAAK,MAAM;AAAA,UAClB,UAAU,KAAK,MAAM;AAAA,UACrB,YAAY,KAAK,MAAM;AAAA,UACvB,SAAS,KAAK,MAAM;AAAA;AAAA,MACtB;AAAA,IAEJ;AAEA,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}

package/dist/PreviewFallback.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { FileInfo } from './core/types.js';
+
+type PreviewFallbackKind = "unsupported" | "plugin-load-failed" | "render-failed" | "source-read-failed" | "file-too-large" | "aborted" | "unknown";
+interface PreviewFallbackProps {
+    kind: PreviewFallbackKind;
+    file: FileInfo;
+    title?: string;
+    description?: string;
+    error?: unknown;
+    pluginId?: string;
+    pluginName?: string;
+    onRetry?: () => void;
+    canDownload?: boolean;
+}
+declare function PreviewFallback({ kind, file, title, description, error, pluginId, pluginName, onRetry, canDownload, }: PreviewFallbackProps): react.JSX.Element;
+
+export { PreviewFallback, type PreviewFallbackKind, type PreviewFallbackProps };

package/dist/PreviewFallback.js

@@ -0,0 +1,143 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangleIcon, DownloadIcon, CopyIcon } from "./icons";
+import { formatFileSize } from "./utils";
+import { downloadSource } from "./core/download";
+import { useLocale } from "./core/i18n";
+import "./styles/PreviewFallback.css";
+function getFallbackTitle(kind, t) {
+  switch (kind) {
+    case "unsupported":
+      return t.previewNotAvailable;
+    case "plugin-load-failed":
+      return t.failedToLoadPreview;
+    case "render-failed":
+      return t.previewFailed;
+    case "source-read-failed":
+      return t.failedToReadFile;
+    case "file-too-large":
+      return t.largeFile;
+    case "aborted":
+      return t.loadingCancelled;
+    default:
+      return t.previewFailed;
+  }
+}
+function getFallbackDescription(kind, t) {
+  switch (kind) {
+    case "unsupported":
+      return t.unsupportedFileType.replace("{fileType}", "");
+    case "plugin-load-failed":
+      return "The preview plugin could not be loaded. This may be a network issue or the plugin is not installed.";
+    case "render-failed":
+      return "The preview crashed while rendering. You can retry or download the original file.";
+    case "source-read-failed":
+      return "Could not read file content. The file may be corrupted or inaccessible.";
+    case "file-too-large":
+      return t.largeFileHint;
+    case "aborted":
+      return "File loading was cancelled.";
+    default:
+      return void 0;
+  }
+}
+function PreviewErrorDetails({
+  error,
+  pluginId,
+  pluginName,
+  t
+}) {
+  const [expanded, setExpanded] = useState(false);
+  if (!error) return null;
+  const message = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
+  return /* @__PURE__ */ jsxs("div", { className: "fv-fallback__details", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded((v) => !v),
+        className: "fv-fallback__details-toggle",
+        children: [
+          expanded ? "Hide" : "Show",
+          " ",
+          t.showErrorDetails.toLowerCase()
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "fv-fallback__details-pre", children: [
+      pluginName && `Plugin: ${pluginName}
+`,
+      pluginId && `ID: ${pluginId}
+`,
+      message,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            const text = [
+              pluginName && `Plugin: ${pluginName}`,
+              pluginId && `ID: ${pluginId}`,
+              message
+            ].filter(Boolean).join("\n");
+            navigator.clipboard.writeText(text);
+          },
+          className: "fv-fallback__details-copy",
+          title: t.copyCode,
+          children: /* @__PURE__ */ jsx(CopyIcon, { size: 12 })
+        }
+      )
+    ] })
+  ] });
+}
+function PreviewFallback({
+  kind,
+  file,
+  title,
+  description,
+  error,
+  pluginId,
+  pluginName,
+  onRetry,
+  canDownload = true
+}) {
+  const t = useLocale();
+  return /* @__PURE__ */ jsx("div", { className: "fv-fallback", children: /* @__PURE__ */ jsxs("div", { className: "fv-fallback__inner", children: [
+    /* @__PURE__ */ jsx("div", { className: "fv-fallback__icon-wrap", children: /* @__PURE__ */ jsx(AlertTriangleIcon, { size: 24 }) }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h3", { className: "fv-fallback__title", children: title ?? getFallbackTitle(kind, t) }),
+      /* @__PURE__ */ jsx("p", { className: "fv-fallback__desc", children: description ?? getFallbackDescription(kind, t) }),
+      /* @__PURE__ */ jsxs("p", { className: "fv-fallback__meta", children: [
+        file.name,
+        " \xB7 ",
+        formatFileSize(file.size)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "fv-fallback__actions", children: [
+      onRetry && /* @__PURE__ */ jsx("button", { className: "fv-btn fv-btn--primary fv-btn--sm", onClick: onRetry, children: "Retry" }),
+      canDownload && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "fv-btn fv-btn--outline fv-btn--sm",
+          onClick: () => downloadSource(file.source, file.name, file.type),
+          children: [
+            /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
+            " ",
+            t.downloadOriginal
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      PreviewErrorDetails,
+      {
+        error,
+        pluginId,
+        pluginName,
+        t
+      }
+    )
+  ] }) });
+}
+export {
+  PreviewFallback
+};
+//# sourceMappingURL=PreviewFallback.js.map