@frontera-sdk/chat-ui 1.50.40

package/dist/pdf-deck-view-inner-FZVLAEQR.js

@@ -0,0 +1,575 @@
+'use client';
+import { DeckNotesCard, deckOwnsArrowKeys } from './chunk-WMN6BPPS.js';
+import { resolveStageWidth, zoomPercent, DECK_ZOOM_LEVELS, LazyThumb, ArtifactSkeleton } from './chunk-PUIVKDV5.js';
+import { useTranslation } from './chunk-QSSFBZAS.js';
+import { Button, ScrollArea } from './chunk-GTQH7MPF.js';
+import { useIsMobile } from './chunk-IXDM5R55.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from './chunk-ZS6PXIZP.js';
+import { cn } from './chunk-DGDHKMDB.js';
+import { ChevronDownMediumIcon, ChevronLeftIcon, ChevronRightIcon } from './chunk-AFVU5VT6.js';
+import './chunk-PR4QN5HX.js';
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
+import { pdfjs, Document, Page } from 'react-pdf';
+import 'react-pdf/dist/Page/TextLayer.css';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;
+var THUMB_W = 120;
+var COMPACT_THUMB_W = 76;
+var COMPACT_PANEL_WIDTH = 700;
+var COMPACT_RAIL_CLOSE_DELAY_MS = 60;
+var STRIP_THUMB_W = 112;
+var HOLD_PREVIOUS_MAX_MS = 1500;
+var PDF_OPTIONS = { verbosity: pdfjs.VerbosityLevel?.ERRORS ?? 0 };
+function PdfDeckViewInner({
+  fileUrl,
+  label,
+  notes,
+  onError
+}) {
+  const { t } = useTranslation();
+  const isMobile = useIsMobile();
+  const [compact, setCompact] = useState(false);
+  const [compactRailOpen, setCompactRailOpen] = useState(false);
+  const [pages, setPages] = useState(0);
+  const [loadedFileUrl, setLoadedFileUrl] = useState(null);
+  const [sel, setSel] = useState(0);
+  const [zoom, setZoom] = useState("fit");
+  const [pageDims, setPageDims] = useState(null);
+  const [paintedPage, setPaintedPage] = useState(null);
+  const [box, setBox] = useState(null);
+  const [hostEl, setHostEl] = useState(null);
+  const viewerRef = useRef(null);
+  const railRef = useRef(null);
+  const hoverRef = useRef(false);
+  const selRef = useRef(0);
+  const compactRailCloseTimerRef = useRef(
+    null
+  );
+  const currentFileUrlRef = useRef(fileUrl);
+  currentFileUrlRef.current = fileUrl;
+  useEffect(
+    () => () => {
+      if (compactRailCloseTimerRef.current) {
+        clearTimeout(compactRailCloseTimerRef.current);
+      }
+    },
+    []
+  );
+  const visiblePages = loadedFileUrl === fileUrl ? pages : 0;
+  const last = visiblePages - 1;
+  useEffect(() => () => setLoadedFileUrl(null), []);
+  const next = useCallback(
+    () => setSel(
+      (value) => Math.min(Math.max(0, visiblePages - 1), value + 1)
+    ),
+    [visiblePages]
+  );
+  const prev = useCallback(() => setSel((v) => Math.max(0, v - 1)), []);
+  const openCompactRail = useCallback(() => {
+    if (compactRailCloseTimerRef.current) {
+      clearTimeout(compactRailCloseTimerRef.current);
+      compactRailCloseTimerRef.current = null;
+    }
+    setCompactRailOpen(true);
+  }, []);
+  const closeCompactRail = useCallback(() => {
+    if (compactRailCloseTimerRef.current) {
+      clearTimeout(compactRailCloseTimerRef.current);
+    }
+    compactRailCloseTimerRef.current = setTimeout(() => {
+      setCompactRailOpen(false);
+      compactRailCloseTimerRef.current = null;
+    }, COMPACT_RAIL_CLOSE_DELAY_MS);
+  }, []);
+  useEffect(
+    () => () => {
+      if (compactRailCloseTimerRef.current) {
+        clearTimeout(compactRailCloseTimerRef.current);
+      }
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    const viewer = viewerRef.current;
+    if (!viewer) return;
+    const compute = () => {
+      const nextCompact = viewer.clientWidth < COMPACT_PANEL_WIDTH;
+      setCompact(nextCompact);
+      if (!nextCompact) setCompactRailOpen(false);
+    };
+    compute();
+    const observer = new ResizeObserver(compute);
+    observer.observe(viewer);
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    if (!hostEl) return;
+    const compute = () => {
+      const cs = getComputedStyle(hostEl);
+      const padX = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+      const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+      const w = hostEl.clientWidth - padX;
+      const h = hostEl.clientHeight - padY;
+      if (w > 0 && h > 0) setBox({ w, h });
+    };
+    compute();
+    const ro = new ResizeObserver(compute);
+    ro.observe(hostEl);
+    return () => ro.disconnect();
+  }, [hostEl]);
+  useEffect(() => {
+    const onKey = (e) => {
+      if (!deckOwnsArrowKeys(viewerRef.current, hoverRef.current, e.target)) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "PageDown" || e.key === " ") {
+        e.preventDefault();
+        next();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp" || e.key === "PageUp") {
+        e.preventDefault();
+        prev();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        setSel(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        setSel(Math.max(0, pages - 1));
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [next, prev, visiblePages]);
+  useEffect(() => {
+    if (visiblePages === 0) return;
+    if (compact && !compactRailOpen) return;
+    const active = railRef.current?.querySelector('[data-active="true"]');
+    active?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+    const focusIsInRail = document.activeElement instanceof HTMLElement && railRef.current?.contains(document.activeElement);
+    if (focusIsInRail && active instanceof HTMLElement) {
+      active.focus({ preventScroll: true });
+    }
+  }, [compact, compactRailOpen, sel, visiblePages]);
+  const stageWidth = pageDims ? resolveStageWidth({ zoom, pageW: pageDims.w, pageH: pageDims.h, boxW: box?.w ?? 0, boxH: box?.h ?? 0 }) : 0;
+  const stageHeight = pageDims && stageWidth > 0 ? Math.round(stageWidth * pageDims.h / pageDims.w) : 0;
+  const stageScale = pageDims && stageWidth > 0 ? stageWidth / pageDims.w : 1;
+  const pct = pageDims ? zoomPercent(stageWidth, pageDims.w) : null;
+  const zoomLabel = zoom === "fit" ? pct !== null ? `${pct}%` : t("deck.zoomFit") : `${Math.round(zoom * 100)}%`;
+  const thumbH = pageDims ? Math.round(THUMB_W * pageDims.h / pageDims.w) : Math.round(THUMB_W * 9 / 16);
+  const compactThumbH = pageDims ? Math.round(COMPACT_THUMB_W * pageDims.h / pageDims.w) : Math.round(COMPACT_THUMB_W * 9 / 16);
+  const stripThumbH = pageDims ? Math.round(STRIP_THUMB_W * pageDims.h / pageDims.w) : Math.round(STRIP_THUMB_W * 9 / 16);
+  selRef.current = sel;
+  const activeNote = notes?.[sel];
+  const handlePageRendered = useCallback(() => {
+    setPaintedPage((current) => current === selRef.current ? current : selRef.current);
+  }, []);
+  const stagePages = paintedPage !== null && paintedPage !== sel ? [paintedPage, sel].sort((a, b) => a - b) : [sel];
+  useEffect(() => {
+    if (paintedPage === null || paintedPage === sel) return;
+    const timer = setTimeout(() => setPaintedPage(sel), HOLD_PREVIOUS_MAX_MS);
+    return () => clearTimeout(timer);
+  }, [paintedPage, sel]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: viewerRef,
+      className: "relative flex h-full min-h-0 flex-col bg-muted/30",
+      onMouseEnter: () => {
+        hoverRef.current = true;
+      },
+      onMouseLeave: () => {
+        hoverRef.current = false;
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 px-3 py-1.5 border-b border-border-secondary", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-muted-foreground", children: label ?? "" }),
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                className: "gap-1 px-2 text-xs tabular-nums text-muted-foreground hover:text-foreground",
+                "aria-label": t("deck.zoom"),
+                children: [
+                  zoomLabel,
+                  /* @__PURE__ */ jsx(ChevronDownMediumIcon, { className: "size-3.5" })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "min-w-28", children: [
+              /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => setZoom("fit"), className: cn(zoom === "fit" && "font-medium"), children: t("deck.zoomFit") }),
+              DECK_ZOOM_LEVELS.map((z) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setZoom(z), className: cn(zoom === z && "font-medium"), children: [
+                Math.round(z * 100),
+                "%"
+              ] }, z))
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Document,
+          {
+            file: fileUrl,
+            options: PDF_OPTIONS,
+            onLoadSuccess: (doc) => {
+              if (doc.loadingTask.destroyed) return;
+              const loadedUrl = fileUrl;
+              setLoadedFileUrl(loadedUrl);
+              setPages(doc.numPages);
+              setSel(0);
+              setPageDims(null);
+              void doc.getPage(1).then((page) => {
+                if (currentFileUrlRef.current !== loadedUrl) return;
+                const viewport = page.getViewport({ scale: 1 });
+                setPageDims({ w: viewport.width, h: viewport.height });
+              }).catch(() => {
+                if (currentFileUrlRef.current === loadedUrl) onError();
+              });
+            },
+            onLoadError: onError,
+            loading: /* @__PURE__ */ jsx(ArtifactSkeleton, { format: "htmldeck", showChrome: false }),
+            error: /* @__PURE__ */ jsx("div", { className: "p-6 text-sm text-muted-foreground", children: t("library.failedToLoad") }),
+            className: cn(
+              "flex min-h-0 flex-1 [&>.react-pdf__message]:min-w-0 [&>.react-pdf__message]:flex-1",
+              isMobile ? "flex-col" : "flex-row"
+            ),
+            children: [
+              !isMobile && compact && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "relative flex min-h-0 w-11 shrink-0 items-center justify-center",
+                  onMouseEnter: openCompactRail,
+                  onMouseLeave: closeCompactRail,
+                  onFocusCapture: openCompactRail,
+                  onBlurCapture: (event) => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                      closeCompactRail();
+                    }
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: "flex h-11 w-11 flex-col items-center justify-center gap-1.5 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
+                        "aria-label": t("deck.showSlides"),
+                        "aria-expanded": compactRailOpen,
+                        onClick: (event) => {
+                          event.preventDefault();
+                          openCompactRail();
+                        },
+                        children: Array.from({ length: visiblePages }, (_, slideIndex) => /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "data-slide-indicator": slideIndex,
+                            "data-active": slideIndex === sel,
+                            "aria-hidden": true,
+                            className: cn(
+                              "h-0.5 w-5 shrink-0 transition-colors",
+                              slideIndex === sel ? "bg-foreground" : "bg-muted-foreground/20"
+                            )
+                          },
+                          slideIndex
+                        ))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "dialog",
+                        "aria-label": t("deck.showSlides"),
+                        "aria-hidden": !compactRailOpen,
+                        inert: !compactRailOpen,
+                        "data-testid": "compact-slide-overlay",
+                        "data-state": compactRailOpen ? "open" : "closed",
+                        className: cn(
+                          "absolute left-3 top-1/2 z-50 max-h-[70vh] w-36 -translate-y-1/2 overflow-hidden rounded-xl border border-border bg-surface-overlay p-1.5 shadow-lg transition-opacity duration-[120ms] ease-out will-change-opacity motion-reduce:transition-none",
+                          compactRailOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            ref: railRef,
+                            className: "max-h-[calc(70vh-0.75rem)] overflow-y-auto scrollbar",
+                            children: Array.from({ length: visiblePages }, (_, i) => /* @__PURE__ */ jsxs(
+                              "button",
+                              {
+                                type: "button",
+                                "data-active": i === sel,
+                                onClick: () => setSel(i),
+                                className: cn(
+                                  "flex w-full items-start gap-2 rounded-lg p-1.5 text-left transition-colors",
+                                  i === sel ? "bg-surface-active" : "hover:bg-surface-overlay-hover"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "span",
+                                    {
+                                      className: cn(
+                                        "w-3 shrink-0 pt-0.5 text-right text-xs tabular-nums",
+                                        i === sel ? "font-semibold text-foreground" : "text-muted-foreground"
+                                      ),
+                                      children: i + 1
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx(
+                                    "div",
+                                    {
+                                      className: cn(
+                                        "shrink-0 overflow-hidden rounded-md border bg-surface shadow-sm",
+                                        i === sel ? "border-transparent ring ring-foreground" : "border-border"
+                                      ),
+                                      children: /* @__PURE__ */ jsx(
+                                        LazyThumb,
+                                        {
+                                          width: COMPACT_THUMB_W,
+                                          height: compactThumbH,
+                                          className: "bg-muted",
+                                          children: /* @__PURE__ */ jsx(
+                                            Page,
+                                            {
+                                              pageNumber: i + 1,
+                                              width: COMPACT_THUMB_W,
+                                              renderTextLayer: false,
+                                              renderAnnotationLayer: false,
+                                              loading: /* @__PURE__ */ jsx(
+                                                "div",
+                                                {
+                                                  style: { width: COMPACT_THUMB_W, height: compactThumbH },
+                                                  className: "animate-pulse bg-muted"
+                                                }
+                                              )
+                                            }
+                                          )
+                                        }
+                                      )
+                                    }
+                                  )
+                                ]
+                              },
+                              i
+                            ))
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              !isMobile && !compact && /* @__PURE__ */ jsx(
+                ScrollArea,
+                {
+                  scrollbars: "both",
+                  className: "w-full shrink-0 border-b border-border sm:w-[164px]",
+                  children: /* @__PURE__ */ jsx("div", { ref: railRef, className: "flex flex-row gap-1 p-2 sm:flex-col", children: Array.from({ length: visiblePages }, (_, i) => /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "data-active": i === sel,
+                      onClick: () => setSel(i),
+                      className: cn(
+                        "flex w-fit shrink-0 items-start gap-1.5 rounded-md p-2 text-left transition-colors",
+                        i === sel ? "bg-surface-active" : "hover:bg-muted/60"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "w-3 shrink-0 pt-0.5 text-right text-xs tabular-nums",
+                              i === sel ? "font-semibold text-foreground" : "text-muted-foreground"
+                            ),
+                            children: i + 1
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "w-[120px] shrink-0 overflow-hidden rounded border bg-surface shadow-sm",
+                              i === sel ? "border-transparent ring ring-foreground" : "border-border"
+                            ),
+                            children: /* @__PURE__ */ jsx(LazyThumb, { width: THUMB_W, height: thumbH, className: "bg-muted", children: /* @__PURE__ */ jsx(
+                              Page,
+                              {
+                                pageNumber: i + 1,
+                                width: THUMB_W,
+                                renderTextLayer: false,
+                                renderAnnotationLayer: false,
+                                loading: /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    style: { width: THUMB_W, height: thumbH },
+                                    className: "animate-pulse bg-muted"
+                                  }
+                                )
+                              }
+                            ) })
+                          }
+                        )
+                      ]
+                    },
+                    i
+                  )) })
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "group/stage relative flex min-w-0 flex-1 flex-col",
+                  onMouseEnter: () => {
+                    hoverRef.current = true;
+                  },
+                  onMouseLeave: () => {
+                    hoverRef.current = false;
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: setHostEl,
+                        className: "flex min-h-0 flex-1 flex-col items-center overflow-auto scrollbar p-3 sm:p-6",
+                        children: visiblePages > 0 && stageWidth > 0 && pageDims && /* @__PURE__ */ jsxs("div", { className: "m-auto flex w-fit flex-col items-center gap-4", children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "data-testid": "pdf-stage",
+                              "data-width": stageWidth,
+                              className: "overflow-hidden rounded-md border border-border bg-surface shadow-sm",
+                              style: { width: stageWidth, height: stageHeight },
+                              children: /* @__PURE__ */ jsx(
+                                "div",
+                                {
+                                  className: "relative",
+                                  style: {
+                                    width: pageDims.w,
+                                    height: pageDims.h,
+                                    transform: `scale(${stageScale})`,
+                                    transformOrigin: "left top"
+                                  },
+                                  children: stagePages.map((pageIndex) => /* @__PURE__ */ jsx(
+                                    "div",
+                                    {
+                                      className: pageIndex === sel ? "h-full w-full" : "pointer-events-none absolute inset-0 z-10",
+                                      children: /* @__PURE__ */ jsx(
+                                        Page,
+                                        {
+                                          pageNumber: pageIndex + 1,
+                                          width: pageDims.w,
+                                          renderTextLayer: false,
+                                          renderAnnotationLayer: false,
+                                          loading: null,
+                                          onRenderSuccess: pageIndex === sel ? handlePageRendered : void 0
+                                        }
+                                      )
+                                    },
+                                    pageIndex
+                                  ))
+                                }
+                              )
+                            }
+                          ),
+                          activeNote?.trim() ? /* @__PURE__ */ jsx(DeckNotesCard, { text: activeNote, width: stageWidth }) : null
+                        ] })
+                      }
+                    ),
+                    !isMobile && !compact && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: prev,
+                          disabled: sel === 0,
+                          title: t("deck.prevPage"),
+                          "aria-label": t("deck.prevPage"),
+                          className: "absolute left-3 top-1/2 z-10 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background/80 text-foreground opacity-0 shadow-sm backdrop-blur transition hover:bg-muted disabled:pointer-events-none disabled:opacity-0 group-hover/stage:opacity-100",
+                          children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-5" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: next,
+                          disabled: sel === last,
+                          title: t("deck.nextPage"),
+                          "aria-label": t("deck.nextPage"),
+                          className: "absolute right-3 top-1/2 z-10 inline-flex size-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background/80 text-foreground opacity-0 shadow-sm backdrop-blur transition hover:bg-muted disabled:pointer-events-none disabled:opacity-0 group-hover/stage:opacity-100",
+                          children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-5" })
+                        }
+                      )
+                    ] }),
+                    isMobile && visiblePages > 1 && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        ref: railRef,
+                        className: "flex shrink-0 gap-2 overflow-x-auto border-t border-border bg-surface px-2 py-2 scrollbar-hide",
+                        children: Array.from({ length: visiblePages }, (_, i) => /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            "data-active": i === sel,
+                            onClick: () => setSel(i),
+                            "aria-label": `${t("deck.slide")} ${i + 1}`,
+                            "aria-current": i === sel,
+                            className: cn(
+                              "relative shrink-0 overflow-hidden rounded border bg-surface transition-colors",
+                              i === sel ? "border-transparent ring ring-foreground" : "border-border"
+                            ),
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                LazyThumb,
+                                {
+                                  width: STRIP_THUMB_W,
+                                  height: stripThumbH,
+                                  className: "bg-muted",
+                                  children: /* @__PURE__ */ jsx(
+                                    Page,
+                                    {
+                                      pageNumber: i + 1,
+                                      width: STRIP_THUMB_W,
+                                      renderTextLayer: false,
+                                      renderAnnotationLayer: false,
+                                      loading: /* @__PURE__ */ jsx(
+                                        "div",
+                                        {
+                                          style: { width: STRIP_THUMB_W, height: stripThumbH },
+                                          className: "animate-pulse bg-muted"
+                                        }
+                                      )
+                                    }
+                                  )
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "absolute bottom-0.5 right-0.5 rounded bg-surface-overlay/85 px-1 text-[10px] tabular-nums",
+                                    i === sel ? "text-foreground" : "text-muted-foreground"
+                                  ),
+                                  children: i + 1
+                                }
+                              )
+                            ]
+                          },
+                          i
+                        ))
+                      }
+                    ),
+                    visiblePages > 0 && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-3 flex items-center justify-center", children: /* @__PURE__ */ jsxs("span", { className: "rounded-full border border-border bg-background/80 px-3 py-1 text-xs tabular-nums text-muted-foreground shadow-sm backdrop-blur", children: [
+                      sel + 1,
+                      " / ",
+                      visiblePages
+                    ] }) })
+                  ]
+                }
+              )
+            ]
+          },
+          fileUrl
+        )
+      ]
+    }
+  );
+}
+
+export { PdfDeckViewInner as default };