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

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 = 112;
+    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-1 transition-colors hover:bg-muted/80",
+        active ? "bg-muted ring-2 ring-ring" : ""
+      ),
+      "aria-label": label,
+      "aria-current": active ? "page" : void 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "block max-w-full rounded-sm shadow-sm",
+            "aria-hidden": true
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-[10px] tabular-nums", 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,
@@ -8245,6 +8310,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 +8323,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 +8485,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(() => {
@@ -8558,7 +8677,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 +8741,68 @@ 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: [
+          enableThumbnailSidebar && !busy && pagesMap !== null && pageCount > 0 && 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",
+              "aria-label": thumbnailSidebarLabel,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", 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.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;
+                }) })
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );