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

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,45 +8780,32 @@ 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;
+              }) })
+            }
+          )
         ] })
       ]
     }