@algenium/blocks 1.7.0-rc.4 → 1.7.0-rc.6

package/dist/index.cjs

@@ -8224,7 +8224,7 @@ function PdfThumbnailStrip({
     const canvas = canvasRef.current;
     if (!canvas) return;
     const viewport = page.getViewport({ scale: 1 });
-    const thumbMax = 112;
+    const thumbMax = 176;
     const s = thumbMax / Math.max(viewport.width, viewport.height);
     const vp = page.getViewport({ scale: s });
     const ctx = canvas.getContext("2d");
@@ -8248,8 +8248,8 @@ function PdfThumbnailStrip({
       type: "button",
       onClick: () => onPick(pageNumber),
       className: cn(
-        "flex w-full flex-col items-center gap-1 rounded-md p-1 transition-colors hover:bg-muted/80",
-        active ? "bg-muted ring-2 ring-ring" : ""
+        "flex w-full flex-col items-center gap-1 rounded-md p-2 transition-colors hover:bg-white/5",
+        active ? "bg-white/10" : ""
       ),
       "aria-label": label,
       "aria-current": active ? "page" : void 0,
@@ -8258,11 +8258,11 @@ function PdfThumbnailStrip({
           "canvas",
           {
             ref: canvasRef,
-            className: "block max-w-full rounded-sm shadow-sm",
+            className: "block max-w-full overflow-hidden rounded-sm bg-black",
             "aria-hidden": true
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-[10px] tabular-nums", children: pageNumber })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] tabular-nums text-neutral-400", children: pageNumber })
       ]
     }
   );
@@ -8297,6 +8297,7 @@ function PdfViewer({
   const errorLabelFallback = mergedLabels.error ?? "Failed to load PDF";
   const toolbarId = React2.useId();
   const pageInputId = `${toolbarId}-page`;
+  const thumbnailNavId = `${toolbarId}-thumbnails`;
   const scrollRef = React2.useRef(null);
   const observerRef = React2.useRef(null);
   const lastReportedPage = React2.useRef(0);
@@ -8638,6 +8639,7 @@ function PdfViewer({
       resetZoomAct
     ]
   );
+  const thumbnailsRailEligible = enableThumbnailSidebar && !busy && pagesMap !== null && pageCount > 0;
   if (loadError) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -8667,6 +8669,20 @@ function PdfViewer({
               toolbarClassName
             ),
             children: [
+              thumbnailsRailEligible ? /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon-sm",
+                  className: "hidden md:inline-flex",
+                  onClick: () => setThumbnailSidebarOpen((v) => !v),
+                  "aria-label": toggleThumbLabel,
+                  "aria-expanded": thumbnailSidebarOpen,
+                  "aria-controls": thumbnailNavId,
+                  children: thumbnailSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeftOpen, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRightOpen, { className: "size-4", "aria-hidden": true })
+                }
+              ) : null,
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-xs tabular-nums sm:text-sm", children: busy || pagesMap === null ? "\u2014" : pageOfFormatter(currentVisiblePage, pageCount) }),
               /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: pageInputId, className: "sr-only", children: resolvedGoToLabel }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -8742,12 +8758,13 @@ function PdfViewer({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
-          enableThumbnailSidebar && !busy && pagesMap !== null && pageCount > 0 && thumbnailSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+          thumbnailsRailEligible && thumbnailSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(
             "nav",
             {
-              className: "bg-muted/30 flex w-[132px] shrink-0 flex-col overflow-y-auto border-r py-2 pl-2 pr-1",
+              id: thumbnailNavId,
+              className: "hidden w-[220px] shrink-0 flex-col overflow-y-auto border-r border-neutral-900 bg-black py-3 pl-3 pr-2 md:flex",
               "aria-label": thumbnailSidebarLabel,
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: layouts.map((layout) => {
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: layouts.map((layout) => {
                 const pg = pagesMap.get(layout.pageNumber);
                 return pg ? /* @__PURE__ */ jsxRuntime.jsx(
                   PdfThumbnailStrip,
@@ -8763,50 +8780,94 @@ function PdfViewer({
               }) })
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 min-w-0 flex-1", children: [
-            enableThumbnailSidebar && !busy && pagesMap !== null && pageCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                className: "text-muted-foreground hover:bg-muted/60 flex w-9 shrink-0 flex-col items-center justify-center border-r bg-transparent transition-colors",
-                onClick: () => setThumbnailSidebarOpen((v) => !v),
-                "aria-label": toggleThumbLabel,
-                "aria-expanded": thumbnailSidebarOpen,
-                children: thumbnailSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4", "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4", "aria-hidden": true })
-              }
-            ) : null,
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                ref: scrollRef,
-                tabIndex: 0,
-                onKeyDown: handleKeyDown,
-                className: "relative min-h-[240px] min-w-0 flex-1 overflow-auto outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                "aria-busy": busy,
-                "aria-label": busy ? loadingLabel : "PDF pages",
-                children: busy || pagesMap === null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground p-6 text-sm", children: loadingLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4 pb-8 pt-2", children: layouts.map((layout) => {
-                  const pg = pagesMap.get(layout.pageNumber);
-                  const visible = (ratios[layout.pageNumber] ?? 0) >= 1e-3;
-                  return pg ? /* @__PURE__ */ jsxRuntime.jsx(
-                    PdfPageCanvas,
-                    {
-                      page: pg,
-                      layout,
-                      scale,
-                      visible,
-                      pageClassName
-                    },
-                    layout.pageNumber
-                  ) : null;
-                }) })
-              }
-            )
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: scrollRef,
+              tabIndex: 0,
+              onKeyDown: handleKeyDown,
+              className: "relative min-h-[240px] min-w-0 flex-1 overflow-auto outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "aria-busy": busy,
+              "aria-label": busy ? loadingLabel : "PDF pages",
+              children: busy || pagesMap === null ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground p-6 text-sm", children: loadingLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-4 pb-8 pt-2", children: layouts.map((layout) => {
+                const pg = pagesMap.get(layout.pageNumber);
+                const visible = (ratios[layout.pageNumber] ?? 0) >= 1e-3;
+                return pg ? /* @__PURE__ */ jsxRuntime.jsx(
+                  PdfPageCanvas,
+                  {
+                    page: pg,
+                    layout,
+                    scale,
+                    visible,
+                    pageClassName
+                  },
+                  layout.pageNumber
+                ) : null;
+              }) })
+            }
+          )
         ] })
       ]
     }
   );
 }
+function usePdfViewerDialogScrollLock(active) {
+  React2.useLayoutEffect(() => {
+    if (!active || typeof document === "undefined") return;
+    const html = document.documentElement;
+    const body = document.body;
+    const scrollRoots = [
+      ...document.querySelectorAll("[data-scroll-lock-root]")
+    ];
+    const scrollTopSnapshot = scrollRoots.map((el) => ({
+      el,
+      scrollTop: el.scrollTop
+    }));
+    const targets = /* @__PURE__ */ new Set([html, body, ...scrollRoots]);
+    const snapshot = [...targets].map((el) => ({
+      el,
+      overflow: el.style.overflow,
+      overscrollBehavior: el.style.overscrollBehavior
+    }));
+    const windowScrollY = window.scrollY;
+    for (const el of targets) {
+      el.style.overflow = "hidden";
+      el.style.overscrollBehavior = "none";
+    }
+    const dialogSurfaceSelector = '[data-slot="dialog-content"]';
+    const shouldAllowEventTarget = (target) => target instanceof Element && Boolean(target.closest(dialogSurfaceSelector));
+    const onWheel = (e) => {
+      if (shouldAllowEventTarget(e.target)) return;
+      e.preventDefault();
+    };
+    const onTouchMove = (e) => {
+      if (shouldAllowEventTarget(e.target)) return;
+      e.preventDefault();
+    };
+    window.addEventListener("wheel", onWheel, {
+      capture: true,
+      passive: false
+    });
+    window.addEventListener("touchmove", onTouchMove, {
+      capture: true,
+      passive: false
+    });
+    return () => {
+      window.removeEventListener("wheel", onWheel, { capture: true });
+      window.removeEventListener("touchmove", onTouchMove, {
+        capture: true
+      });
+      for (const { el, overflow, overscrollBehavior } of snapshot) {
+        el.style.overflow = overflow;
+        el.style.overscrollBehavior = overscrollBehavior;
+      }
+      for (const { el, scrollTop } of scrollTopSnapshot) {
+        el.scrollTop = scrollTop;
+      }
+      window.scrollTo(0, windowScrollY);
+    };
+  }, [active]);
+}
 var fullscreenDialogContentClass = "!max-w-none !w-screen !h-screen !p-0 !border-0 !bg-black/95 !rounded-none !top-0 !left-0 !translate-x-0 !translate-y-0 !gap-0 !shadow-none !flex !flex-col data-[state=open]:!zoom-in-100 data-[state=closed]:!zoom-out-100";
 function PdfViewerDialog({
   open,
@@ -8822,6 +8883,7 @@ function PdfViewerDialog({
   const closeLabel = labels?.close ?? "Close";
   const dialogTitle = labels?.dialogTitle ?? title ?? "PDF document";
   const dialogDescription = labels?.dialogDescription ?? "Document viewer with zoom and page navigation.";
+  usePdfViewerDialogScrollLock(open);
   const {
     className: forwardedClassName,
     toolbarClassName: forwardedToolbarClassName,