@sesionario/blocks 1.31.1 → 1.31.2

package/dist/pdf.d.cts

@@ -60,7 +60,8 @@ type PdfViewerDialogProps = {
 };
 /**
  * Drop-in dialog wrapper around {@link PdfViewer} using
- * {@link MediaViewerDialog} for the fullscreen-on-mobile shell.
+ * {@link MediaViewerDialog} for the fullscreen shell. Title and close live
+ * in the PDF toolbar (via `closeAction`) so chrome stays a single row.
  */
 declare function PdfViewerDialog({ open, onOpenChange, title, fileUrl, fileName, downloadUrl, workerSrc, initialPage, labels, }: PdfViewerDialogProps): React.JSX.Element;
 

package/dist/pdf.d.ts

@@ -60,7 +60,8 @@ type PdfViewerDialogProps = {
 };
 /**
  * Drop-in dialog wrapper around {@link PdfViewer} using
- * {@link MediaViewerDialog} for the fullscreen-on-mobile shell.
+ * {@link MediaViewerDialog} for the fullscreen shell. Title and close live
+ * in the PDF toolbar (via `closeAction`) so chrome stays a single row.
  */
 declare function PdfViewerDialog({ open, onOpenChange, title, fileUrl, fileName, downloadUrl, workerSrc, initialPage, labels, }: PdfViewerDialogProps): React.JSX.Element;
 

package/dist/pdf.js

@@ -1,6 +1,6 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { pdfjs, Document, Page, Thumbnail } from 'react-pdf';
-import { PanelLeftClose, PanelLeft, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, RotateCw, Minimize2, Maximize2, Download, AlertTriangle, Loader2, X, XIcon } from 'lucide-react';
+import { PanelLeftClose, PanelLeft, ChevronLeft, ChevronRight, ZoomOut, ZoomIn, RotateCw, Minimize2, Maximize2, Download, X, AlertTriangle, Loader2, XIcon } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -444,10 +444,11 @@ function PdfViewer({
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(initialPage);
   const [zoomIndex, setZoomIndex] = useState(2);
-  const [fitMode, setFitMode] = useState("width");
+  const [fitMode, setFitMode] = useState("page");
   const [rotation, setRotation] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
   const [containerHeight, setContainerHeight] = useState(0);
+  const [pageNatural, setPageNatural] = useState(null);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const [thumbsOpen, setThumbsOpen] = useState(false);
   const [loadError, setLoadError] = useState(false);
@@ -494,37 +495,57 @@ function PdfViewer({
     setPageNumber(initialPage);
     setPageDraft(String(initialPage));
     setZoomIndex(2);
-    setFitMode("width");
+    setFitMode("page");
     setRotation(0);
     setNumPages(0);
+    setPageNatural(null);
     setLoadError(false);
     setThumbsOpen(false);
     reset();
   }, [fileUrl, initialPage, reset]);
   useEffect(() => {
     reset();
+    setPageNatural(null);
   }, [pageNumber, reset]);
+  const measureViewport = 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);
+  }, []);
   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]);
+  useEffect(() => {
+    measureViewport();
+  }, [thumbsOpen, measureViewport]);
   useEffect(() => {
     function onFullscreenChange() {
       setIsFullscreen(document.fullscreenElement === shellRef.current);
+      requestAnimationFrame(measureViewport);
     }
     document.addEventListener("fullscreenchange", onFullscreenChange);
     return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
-  }, []);
+  }, [measureViewport]);
   useEffect(() => {
     function onKeyDown(e) {
       const target = e.target;
@@ -594,8 +615,20 @@ 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;
@@ -810,7 +843,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
@@ -820,7 +853,7 @@ function PdfViewer({
                   onPointerUp: handlers.onPointerUp,
                   onPointerCancel: handlers.onPointerCancel,
                   onTransitionEnd: clearSnapBack,
-                  children: /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsx("div", { className: "m-auto", children: /* @__PURE__ */ jsx(
                     Document,
                     {
                       file: fileUrl,
@@ -830,6 +863,7 @@ function PdfViewer({
                         const start = Math.min(Math.max(1, initialPage), pages);
                         setPageNumber(start);
                         setPageDraft(String(start));
+                        setFitMode(pages === 1 ? "page" : "width");
                       },
                       onLoadError: () => setLoadError(true),
                       loading: /* @__PURE__ */ jsx(LoadingState, { label: labels.loading ?? "Cargando PDF\u2026" }),
@@ -845,14 +879,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
+                            });
+                          }
                         }
                       )
                     }
-                  )
+                  ) })
                 }
               )
             }
@@ -966,7 +1005,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
       ),
@@ -1000,31 +1041,43 @@ function PdfViewerDialog({
   labels
 }) {
   const viewerLabels = labels;
+  const closeLabel = labels.close ?? "Cerrar";
   return /* @__PURE__ */ jsx(
     MediaViewerDialog,
     {
       open,
       onOpenChange,
+      showCloseButton: false,
       labels: {
-        close: labels.close,
+        close: closeLabel,
         title,
         description: labels.dialogDescription ?? title
       },
-      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col pt-12", children: [
-        /* @__PURE__ */ jsx("div", { className: "border-b px-4 py-2 pr-14", children: /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-medium", children: title }) }),
-        /* @__PURE__ */ jsx(
-          PdfViewer,
-          {
-            fileUrl,
-            fileName: fileName ?? title,
-            downloadUrl,
-            workerSrc,
-            initialPage,
-            labels: viewerLabels,
-            className: "min-h-0 flex-1"
-          }
-        )
-      ] })
+      children: /* @__PURE__ */ jsx(
+        PdfViewer,
+        {
+          fileUrl,
+          fileName: fileName ?? title,
+          downloadUrl,
+          workerSrc,
+          initialPage,
+          labels: viewerLabels,
+          className: "min-h-0 w-full min-w-0 flex-1",
+          closeAction: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ 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__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "max-w-[min(40vw,16rem)] truncate text-sm font-medium text-foreground", children: title })
+          ] })
+        }
+      )
     }
   );
 }