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

package/dist/index.cjs

@@ -8205,6 +8205,68 @@ function PdfPageCanvas({
     }
   );
 }
+var PAGE_INPUT_CLASS = "h-8 w-14 rounded-md border px-2 text-sm tabular-nums shadow-sm border-neutral-300 bg-white text-neutral-950 caret-neutral-950 selection:bg-neutral-200 selection:text-neutral-950 dark:border-neutral-600 dark:bg-neutral-950 dark:text-neutral-50 dark:caret-neutral-50 dark:selection:bg-neutral-700 dark:selection:text-neutral-50";
+function touchPairDistance(touches) {
+  if (touches.length < 2) return 0;
+  const a = touches.item(0);
+  const b = touches.item(1);
+  return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY);
+}
+function PdfThumbnailStrip({
+  page,
+  pageNumber,
+  active,
+  onPick,
+  label
+}) {
+  const canvasRef = React2.useRef(null);
+  React2.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const viewport = page.getViewport({ scale: 1 });
+    const thumbMax = 176;
+    const s = thumbMax / Math.max(viewport.width, viewport.height);
+    const vp = page.getViewport({ scale: s });
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = vp.width;
+    canvas.height = vp.height;
+    const task = page.render({
+      canvasContext: ctx,
+      viewport: vp,
+      canvas
+    });
+    task.promise.catch(() => {
+    });
+    return () => {
+      task.cancel();
+    };
+  }, [page]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onPick(pageNumber),
+      className: cn(
+        "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,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "block max-w-full overflow-hidden rounded-sm bg-black",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] tabular-nums text-neutral-400", children: pageNumber })
+      ]
+    }
+  );
+}
 function PdfViewer({
   src,
   workerSrc,
@@ -8215,6 +8277,9 @@ function PdfViewer({
   maxScale = 4,
   scaleStep = 0.2,
   enableKeyboardShortcuts = true,
+  enablePinchZoom = true,
+  enableThumbnailSidebar = true,
+  thumbnailSidebarDefaultOpen = true,
   labels,
   onLoad,
   onError,
@@ -8232,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);
@@ -8245,6 +8311,9 @@ function PdfViewer({
   const [scale, setScale] = React2.useState(initialScale);
   const [ratios, setRatios] = React2.useState({});
   const [pageInput, setPageInput] = React2.useState(String(initialPage));
+  const [thumbnailSidebarOpen, setThumbnailSidebarOpen] = React2.useState(
+    thumbnailSidebarDefaultOpen
+  );
   const baselineScaleRef = React2.useRef(initialScale);
   React2.useEffect(() => {
     baselineScaleRef.current = initialScale;
@@ -8255,6 +8324,9 @@ function PdfViewer({
   const zoomOutLabel = mergedLabels.zoomOut ?? "Zoom out";
   const resetZoomLabel = mergedLabels.resetZoom ?? "Reset zoom";
   const fitWidthLabel = mergedLabels.fitToWidth ?? "Fit to width";
+  const thumbnailSidebarLabel = mergedLabels.thumbnailSidebar ?? "Page thumbnails";
+  const toggleThumbLabel = mergedLabels.toggleThumbnailSidebar ?? "Toggle page thumbnails";
+  const pageThumbLabel = mergedLabels.pageThumbnail ?? ((n) => `Page ${n}, show in document`);
   const pageCount = layouts.length;
   const currentVisiblePage = React2.useMemo(() => {
     let bestPage = 1;
@@ -8414,6 +8486,54 @@ function PdfViewer({
   React2.useEffect(() => {
     setScale(clampScaleValue(initialScale));
   }, [initialScale, clampScaleValue]);
+  React2.useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !enablePinchZoom) return;
+    let pinchDist = 0;
+    const onWheel = (e) => {
+      if (!e.ctrlKey) return;
+      e.preventDefault();
+      const delta = -e.deltaY;
+      const factor = Math.exp(delta * 2e-3);
+      setScale((prev) => {
+        const c = clampScaleValue(prev * factor);
+        onScaleChange?.(c);
+        return c;
+      });
+    };
+    const onTouchStart = (e) => {
+      if (e.touches.length === 2) {
+        pinchDist = touchPairDistance(e.touches);
+      }
+    };
+    const onTouchMove = (e) => {
+      if (e.touches.length !== 2 || pinchDist <= 0) return;
+      e.preventDefault();
+      const d = touchPairDistance(e.touches);
+      const ratio = d / pinchDist;
+      pinchDist = d;
+      setScale((prev) => {
+        const c = clampScaleValue(prev * ratio);
+        onScaleChange?.(c);
+        return c;
+      });
+    };
+    const endPinch = (e) => {
+      if (e.touches.length < 2) pinchDist = 0;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    el.addEventListener("touchstart", onTouchStart, { passive: true });
+    el.addEventListener("touchmove", onTouchMove, { passive: false });
+    el.addEventListener("touchend", endPinch);
+    el.addEventListener("touchcancel", endPinch);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("touchstart", onTouchStart);
+      el.removeEventListener("touchmove", onTouchMove);
+      el.removeEventListener("touchend", endPinch);
+      el.removeEventListener("touchcancel", endPinch);
+    };
+  }, [enablePinchZoom, clampScaleValue, onScaleChange]);
   React2.useEffect(() => {
     if (layouts.length === 0) return;
     const frame = requestAnimationFrame(() => {
@@ -8519,6 +8639,7 @@ function PdfViewer({
       resetZoomAct
     ]
   );
+  const thumbnailsRailEligible = enableThumbnailSidebar && !busy && pagesMap !== null && pageCount > 0;
   if (loadError) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -8548,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(
@@ -8558,7 +8693,7 @@ function PdfViewer({
                   min: 1,
                   max: Math.max(pageCount, 1),
                   disabled: busy || pageCount === 0,
-                  className: "h-8 w-14 rounded-md border border-input bg-background px-2 text-sm tabular-nums",
+                  className: PAGE_INPUT_CLASS,
                   "aria-label": resolvedGoToLabel,
                   value: pageInput,
                   onChange: (ev) => setPageInput(ev.target.value),
@@ -8622,32 +8757,56 @@ function PdfViewer({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: scrollRef,
-            tabIndex: 0,
-            onKeyDown: handleKeyDown,
-            className: "relative min-h-[240px] 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.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [
+          thumbnailsRailEligible && thumbnailSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(
+            "nav",
+            {
+              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-2", children: layouts.map((layout) => {
+                const pg = pagesMap.get(layout.pageNumber);
+                return pg ? /* @__PURE__ */ jsxRuntime.jsx(
+                  PdfThumbnailStrip,
+                  {
+                    page: pg,
+                    pageNumber: layout.pageNumber,
+                    active: layout.pageNumber === currentVisiblePage,
+                    onPick: scrollToPage,
+                    label: pageThumbLabel(layout.pageNumber)
+                  },
+                  `thumb-${layout.pageNumber}`
+                ) : null;
+              }) })
+            }
+          ) : 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;
+              }) })
+            }
+          )
+        ] })
       ]
     }
   );