@sesionario/blocks 1.31.1 → 1.32.0

package/dist/pdf.cjs

@@ -395,6 +395,7 @@ function LazyThumbnail({
   pageNumber,
   active,
   width,
+  pdf,
   onClick,
   ariaLabel
 }) {
@@ -431,7 +432,15 @@ function LazyThumbnail({
         active ? "border-primary ring-2 ring-primary/30" : "border-border"
       ),
       children: [
-        visible ? /* @__PURE__ */ jsxRuntime.jsx(reactPdf.Thumbnail, { pageNumber, width, className: "mx-auto" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        visible ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactPdf.Thumbnail,
+          {
+            pageNumber,
+            width,
+            pdf,
+            className: "mx-auto"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: "mx-auto bg-muted",
@@ -466,14 +475,16 @@ function PdfViewer({
   const [numPages, setNumPages] = react.useState(0);
   const [pageNumber, setPageNumber] = react.useState(initialPage);
   const [zoomIndex, setZoomIndex] = react.useState(2);
-  const [fitMode, setFitMode] = react.useState("width");
+  const [fitMode, setFitMode] = react.useState("page");
   const [rotation, setRotation] = react.useState(0);
   const [containerWidth, setContainerWidth] = react.useState(0);
   const [containerHeight, setContainerHeight] = react.useState(0);
+  const [pageNatural, setPageNatural] = react.useState(null);
   const [isFullscreen, setIsFullscreen] = react.useState(false);
   const [thumbsOpen, setThumbsOpen] = react.useState(false);
   const [loadError, setLoadError] = react.useState(false);
   const [pageDraft, setPageDraft] = react.useState(String(initialPage));
+  const [pdfDocument, setPdfDocument] = react.useState(null);
   const viewportRef = react.useRef(null);
   const shellRef = react.useRef(null);
   const pageNumberRef = react.useRef(pageNumber);
@@ -516,37 +527,58 @@ function PdfViewer({
     setPageNumber(initialPage);
     setPageDraft(String(initialPage));
     setZoomIndex(2);
-    setFitMode("width");
+    setFitMode("page");
     setRotation(0);
     setNumPages(0);
+    setPdfDocument(null);
+    setPageNatural(null);
     setLoadError(false);
     setThumbsOpen(false);
     reset();
   }, [fileUrl, initialPage, reset]);
   react.useEffect(() => {
     reset();
+    setPageNatural(null);
   }, [pageNumber, reset]);
+  const measureViewport = react.useCallback(() => {
+    const el = viewportRef.current;
+    if (!el) return;
+    const w = el.clientWidth;
+    const h = el.clientHeight;
+    if (w > 0) setContainerWidth(w);
+    if (h > 0) setContainerHeight(h);
+  }, []);
   react.useEffect(() => {
     if (!viewportRef.current) return;
     const el = viewportRef.current;
     const observer = new ResizeObserver((entries) => {
       const rect = entries[0]?.contentRect;
       if (!rect) return;
-      setContainerWidth(rect.width);
-      setContainerHeight(rect.height);
+      if (rect.width > 0) setContainerWidth(rect.width);
+      if (rect.height > 0) setContainerHeight(rect.height);
     });
     observer.observe(el);
-    setContainerWidth(el.clientWidth);
-    setContainerHeight(el.clientHeight);
-    return () => observer.disconnect();
-  }, []);
+    measureViewport();
+    const raf = requestAnimationFrame(() => {
+      measureViewport();
+      requestAnimationFrame(measureViewport);
+    });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, [measureViewport]);
+  react.useEffect(() => {
+    measureViewport();
+  }, [thumbsOpen, measureViewport]);
   react.useEffect(() => {
     function onFullscreenChange() {
       setIsFullscreen(document.fullscreenElement === shellRef.current);
+      requestAnimationFrame(measureViewport);
     }
     document.addEventListener("fullscreenchange", onFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
-  }, []);
+  }, [measureViewport]);
   react.useEffect(() => {
     function onKeyDown(e) {
       const target = e.target;
@@ -616,14 +648,26 @@ function PdfViewer({
     if (Number.isFinite(parsed)) goToPage(parsed);
     else setPageDraft(String(pageNumber));
   }
-  const pageWidth = fitMode === "width" ? Math.max(containerWidth - 32, 240) * baseScale : void 0;
-  const pageHeight = fitMode === "page" ? Math.max(containerHeight - 32, 240) * baseScale : void 0;
+  const PAD = 32;
+  const availW = Math.max(containerWidth - PAD, 240);
+  const availH = Math.max(containerHeight - PAD, 240);
+  const rotated = rotation % 180 !== 0 && pageNatural ? { width: pageNatural.height, height: pageNatural.width } : pageNatural;
+  let pageWidth;
+  if (fitMode === "width" || !rotated) {
+    pageWidth = availW * baseScale;
+  } else {
+    const scaleToFit = Math.min(
+      availW / rotated.width,
+      availH / rotated.height
+    );
+    pageWidth = rotated.width * scaleToFit * baseScale;
+  }
   const rawDownload = downloadUrl ?? fileUrl;
   const downloadHref = `${rawDownload}${rawDownload.includes("?") ? "&" : "?"}download=1`;
   const { scale: gestureScale, tx, ty } = transform;
   const transition = snapBack && !isDragging && !prefersReducedMotion() ? `transform ${ZOOM_PAN_SWIPE_SNAP_MS}ms ease-out` : void 0;
   const pageOf = labels.pageOf?.(pageNumber, numPages) ?? (numPages > 0 ? `${pageNumber} / ${numPages}` : "\u2014");
-  function renderThumbList(onSelect) {
+  function renderThumbList(pdf, onSelect) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: Array.from({ length: numPages }, (_, i) => {
       const n = i + 1;
       return /* @__PURE__ */ jsxRuntime.jsx(
@@ -632,6 +676,7 @@ function PdfViewer({
           pageNumber: n,
           active: n === pageNumber,
           width: THUMB_WIDTH,
+          pdf,
           onClick: () => onSelect(n),
           ariaLabel: labels.thumbnailAria?.(n) ?? `P\xE1gina ${n}`
         },
@@ -779,17 +824,17 @@ function PdfViewer({
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex min-h-0 flex-1", children: [
-          numPages > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          pdfDocument && numPages > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
                 "hidden w-40 shrink-0 overflow-y-auto border-r bg-background p-2 lg:block",
                 !thumbsOpen && "lg:hidden"
               ),
-              children: renderThumbList(goToPage)
+              children: renderThumbList(pdfDocument, goToPage)
             }
           ),
-          thumbsOpen && numPages > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          thumbsOpen && pdfDocument && numPages > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -799,7 +844,7 @@ function PdfViewer({
                 onClick: () => setThumbsOpen(false)
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 z-30 w-40 overflow-y-auto border-r bg-background p-2 shadow-lg lg:hidden", children: renderThumbList((n) => {
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 z-30 w-40 overflow-y-auto border-r bg-background p-2 shadow-lg lg:hidden", children: renderThumbList(pdfDocument, (n) => {
               goToPage(n);
               setThumbsOpen(false);
             }) })
@@ -832,7 +877,7 @@ function PdfViewer({
                 "div",
                 {
                   ref: stageRef,
-                  className: "flex min-h-full touch-none items-start justify-center p-4",
+                  className: "flex min-h-full min-w-full touch-none p-4",
                   style: {
                     transform: `translate(${tx}px, ${ty}px) scale(${gestureScale})`,
                     transition
@@ -842,18 +887,24 @@ function PdfViewer({
                   onPointerUp: handlers.onPointerUp,
                   onPointerCancel: handlers.onPointerCancel,
                   onTransitionEnd: clearSnapBack,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "m-auto", children: /* @__PURE__ */ jsxRuntime.jsx(
                     reactPdf.Document,
                     {
                       file: fileUrl,
-                      onLoadSuccess: ({ numPages: pages }) => {
+                      onLoadSuccess: (pdf) => {
+                        const pages = pdf.numPages;
+                        setPdfDocument(pdf);
                         setNumPages(pages);
                         setLoadError(false);
                         const start = Math.min(Math.max(1, initialPage), pages);
                         setPageNumber(start);
                         setPageDraft(String(start));
+                        setFitMode(pages === 1 ? "page" : "width");
+                      },
+                      onLoadError: () => {
+                        setPdfDocument(null);
+                        setLoadError(true);
                       },
-                      onLoadError: () => setLoadError(true),
                       loading: /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { label: labels.loading ?? "Cargando PDF\u2026" }),
                       error: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center p-6 sm:p-8", children: /* @__PURE__ */ jsxRuntime.jsx(
                         ErrorState,
@@ -867,14 +918,19 @@ function PdfViewer({
                         {
                           pageNumber,
                           width: pageWidth,
-                          height: pageHeight,
                           rotate: rotation,
                           renderTextLayer: true,
-                          renderAnnotationLayer: true
+                          renderAnnotationLayer: true,
+                          onLoadSuccess: (page) => {
+                            setPageNatural({
+                              width: page.originalWidth,
+                              height: page.originalHeight
+                            });
+                          }
                         }
                       )
                     }
-                  )
+                  ) })
                 }
               )
             }
@@ -988,7 +1044,9 @@ function MediaViewerDialog({
     {
       showCloseButton: false,
       className: cn(
-        "inset-0 flex h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none",
+        // flex-col is required: without it the single child is a row item
+        // sized to max-content (toolbar width) and the viewport collapses.
+        "inset-0 flex flex-col h-dvh max-h-dvh w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 overflow-hidden rounded-none border-0 p-0 shadow-none sm:max-w-none",
         contentClassName,
         className
       ),
@@ -1022,31 +1080,43 @@ function PdfViewerDialog({
   labels
 }) {
   const viewerLabels = labels;
+  const closeLabel = labels.close ?? "Cerrar";
   return /* @__PURE__ */ jsxRuntime.jsx(
     MediaViewerDialog,
     {
       open,
       onOpenChange,
+      showCloseButton: false,
       labels: {
-        close: labels.close,
+        close: closeLabel,
         title,
         description: labels.dialogDescription ?? title
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full min-h-0 flex-col pt-12", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b px-4 py-2 pr-14", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-sm font-medium", children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          PdfViewer,
-          {
-            fileUrl,
-            fileName: fileName ?? title,
-            downloadUrl,
-            workerSrc,
-            initialPage,
-            labels: viewerLabels,
-            className: "min-h-0 flex-1"
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        PdfViewer,
+        {
+          fileUrl,
+          fileName: fileName ?? title,
+          downloadUrl,
+          workerSrc,
+          initialPage,
+          labels: viewerLabels,
+          className: "min-h-0 w-full min-w-0 flex-1",
+          closeAction: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onOpenChange(false),
+                "aria-label": closeLabel,
+                className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background text-foreground hover:bg-accent",
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-[min(40vw,16rem)] truncate text-sm font-medium text-foreground", children: title })
+          ] })
+        }
+      )
     }
   );
 }