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

package/dist/index.cjs

@@ -8131,6 +8131,591 @@ function USAddressInput({
     ] })
   ] });
 }
+function defaultPageOf(page, total) {
+  return `${page} / ${total}`;
+}
+var DEFAULT_WORKER_MSG = "PdfViewer requires a non-empty workerSrc pointing at pdf.worker matching your project's pdfjs-dist version. Example: `new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url)`.";
+function buildGetDocumentArgs(src, documentOptions) {
+  const rest = documentOptions ?? {};
+  if (typeof src === "string") {
+    return { url: src, ...rest };
+  }
+  return { data: src, ...rest };
+}
+function PdfPageCanvas({
+  page,
+  layout,
+  scale,
+  visible,
+  pageClassName
+}) {
+  const canvasRef = React2.useRef(null);
+  const taskRef = React2.useRef(null);
+  React2.useEffect(() => {
+    if (!visible || !canvasRef.current) {
+      taskRef.current?.cancel();
+      taskRef.current = null;
+      const c = canvasRef.current;
+      if (c) {
+        const ctx2 = c.getContext("2d");
+        if (ctx2) {
+          ctx2.setTransform(1, 0, 0, 1, 0, 0);
+          ctx2.clearRect(0, 0, c.width, c.height);
+        }
+      }
+      return;
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const viewport = page.getViewport({ scale });
+    canvas.width = viewport.width;
+    canvas.height = viewport.height;
+    const task = page.render({
+      canvasContext: ctx,
+      viewport,
+      canvas
+    });
+    taskRef.current = task;
+    task.promise.catch(() => {
+    });
+    return () => {
+      task.cancel();
+      if (taskRef.current === task) {
+        taskRef.current = null;
+      }
+    };
+  }, [page, visible, scale]);
+  const w = layout.widthPt * scale;
+  const h = layout.heightPt * scale;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("relative flex justify-center bg-muted/40", pageClassName),
+      style: { width: w, height: h },
+      "data-page": layout.pageNumber,
+      children: visible ? /* @__PURE__ */ jsxRuntime.jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "block max-h-full shadow-sm",
+          "aria-hidden": "true"
+        }
+      ) : null
+    }
+  );
+}
+function PdfViewer({
+  src,
+  workerSrc,
+  documentOptions,
+  initialPage = 1,
+  initialScale = 1,
+  minScale = 0.5,
+  maxScale = 4,
+  scaleStep = 0.2,
+  enableKeyboardShortcuts = true,
+  labels,
+  onLoad,
+  onError,
+  onPageChange,
+  onScaleChange,
+  className,
+  toolbarClassName,
+  pageClassName,
+  toolbarEndSlot
+}) {
+  const mergedLabels = labels ?? {};
+  const toolbarLabel = mergedLabels.toolbar ?? "PDF controls";
+  const loadingLabel = mergedLabels.loading ?? "Loading PDF\u2026";
+  const workerErrorMessage = mergedLabels.workerMissing ?? DEFAULT_WORKER_MSG;
+  const errorLabelFallback = mergedLabels.error ?? "Failed to load PDF";
+  const toolbarId = React2.useId();
+  const pageInputId = `${toolbarId}-page`;
+  const scrollRef = React2.useRef(null);
+  const observerRef = React2.useRef(null);
+  const lastReportedPage = React2.useRef(0);
+  const loadedPdfRef = React2.useRef(null);
+  const [loadError, setLoadError] = React2.useState(null);
+  const [busy, setBusy] = React2.useState(false);
+  const [layouts, setLayouts] = React2.useState([]);
+  const [pagesMap, setPagesMap] = React2.useState(
+    null
+  );
+  const [scale, setScale] = React2.useState(initialScale);
+  const [ratios, setRatios] = React2.useState({});
+  const [pageInput, setPageInput] = React2.useState(String(initialPage));
+  const baselineScaleRef = React2.useRef(initialScale);
+  React2.useEffect(() => {
+    baselineScaleRef.current = initialScale;
+  }, [initialScale]);
+  const pageOfFormatter = mergedLabels.pageOf ?? defaultPageOf;
+  const resolvedGoToLabel = mergedLabels.goToPage ?? "Go to page";
+  const zoomInLabel = mergedLabels.zoomIn ?? "Zoom in";
+  const zoomOutLabel = mergedLabels.zoomOut ?? "Zoom out";
+  const resetZoomLabel = mergedLabels.resetZoom ?? "Reset zoom";
+  const fitWidthLabel = mergedLabels.fitToWidth ?? "Fit to width";
+  const pageCount = layouts.length;
+  const currentVisiblePage = React2.useMemo(() => {
+    let bestPage = 1;
+    let bestRatio = -1;
+    for (const layout of layouts) {
+      const r2 = ratios[layout.pageNumber] ?? 0;
+      if (r2 > bestRatio) {
+        bestRatio = r2;
+        bestPage = layout.pageNumber;
+      }
+    }
+    return bestRatio >= 0.01 ? bestPage : 1;
+  }, [layouts, ratios]);
+  const clampScaleValue = React2.useCallback(
+    (v) => Math.min(maxScale, Math.max(minScale, v)),
+    [minScale, maxScale]
+  );
+  const zoomInAct = React2.useCallback(() => {
+    setScale((prev) => {
+      const c = clampScaleValue(prev + scaleStep);
+      onScaleChange?.(c);
+      return c;
+    });
+  }, [clampScaleValue, onScaleChange, scaleStep]);
+  const zoomOutAct = React2.useCallback(() => {
+    setScale((prev) => {
+      const c = clampScaleValue(prev - scaleStep);
+      onScaleChange?.(c);
+      return c;
+    });
+  }, [clampScaleValue, onScaleChange, scaleStep]);
+  const resetZoomAct = React2.useCallback(() => {
+    const c = clampScaleValue(baselineScaleRef.current);
+    setScale(c);
+    onScaleChange?.(c);
+  }, [clampScaleValue, onScaleChange]);
+  const fitToWidthAct = React2.useCallback(() => {
+    const root = scrollRef.current;
+    if (!root || layouts.length === 0) return;
+    const avail = Math.max(root.clientWidth - 32, 120);
+    const maxW = Math.max(...layouts.map((l) => l.widthPt), 1);
+    const next = clampScaleValue(avail / maxW);
+    setScale(next);
+    onScaleChange?.(next);
+  }, [clampScaleValue, layouts, onScaleChange]);
+  React2.useEffect(() => {
+    setPageInput(String(currentVisiblePage));
+    if (lastReportedPage.current !== currentVisiblePage) {
+      lastReportedPage.current = currentVisiblePage;
+      onPageChange?.(currentVisiblePage);
+    }
+  }, [currentVisiblePage, onPageChange]);
+  const scrollToPage = React2.useCallback((pageNum) => {
+    const root = scrollRef.current;
+    if (!root || pageNum < 1) return;
+    const el = root.querySelector(`[data-page="${pageNum}"]`);
+    if (el instanceof HTMLElement) {
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
+  React2.useEffect(() => {
+    if (!busy && pagesMap && pageCount > 0) {
+      const p = Math.min(Math.max(1, initialPage), pageCount);
+      requestAnimationFrame(() => scrollToPage(p));
+    }
+  }, [busy, pagesMap, pageCount, initialPage, scrollToPage]);
+  const loadKey = React2.useMemo(() => {
+    if (typeof src === "string") return src;
+    if (src instanceof ArrayBuffer) return `ab:${src.byteLength}`;
+    return `ua:${src.byteLength}:${src.byteOffset}:${src.buffer.byteLength}`;
+  }, [src]);
+  React2.useEffect(() => {
+    let cancelled = false;
+    let activeDoc = null;
+    setLoadError(null);
+    if (loadedPdfRef.current) {
+      void loadedPdfRef.current.destroy();
+      loadedPdfRef.current = null;
+    }
+    setLayouts([]);
+    setPagesMap(null);
+    setRatios({});
+    const trimmedWorker = workerSrc?.trim?.() ?? "";
+    if (!trimmedWorker) {
+      setLoadError(workerErrorMessage);
+      onError?.(new Error(workerErrorMessage));
+      return () => {
+        cancelled = true;
+      };
+    }
+    void (async () => {
+      try {
+        setBusy(true);
+        const pdfjs = await import('pdfjs-dist');
+        if (cancelled) return;
+        pdfjs.GlobalWorkerOptions.workerSrc = trimmedWorker;
+        const loadingTask = pdfjs.getDocument(
+          buildGetDocumentArgs(src, documentOptions)
+        );
+        activeDoc = await loadingTask.promise;
+        if (cancelled) {
+          void activeDoc.destroy();
+          activeDoc = null;
+          return;
+        }
+        const layoutsLocal = [];
+        const mapLocal = /* @__PURE__ */ new Map();
+        for (let p = 1; p <= activeDoc.numPages; p++) {
+          const page = await activeDoc.getPage(p);
+          mapLocal.set(p, page);
+          const viewport = page.getViewport({ scale: 1 });
+          layoutsLocal.push({
+            pageNumber: p,
+            widthPt: viewport.width,
+            heightPt: viewport.height
+          });
+        }
+        if (cancelled) {
+          void activeDoc.destroy();
+          activeDoc = null;
+          return;
+        }
+        onLoad?.(activeDoc);
+        loadedPdfRef.current = activeDoc;
+        setLayouts(layoutsLocal);
+        setPagesMap(mapLocal);
+        activeDoc = null;
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        if (!cancelled) {
+          setLoadError(errorLabelFallback);
+          onError?.(err);
+        }
+        if (activeDoc) {
+          void activeDoc.destroy();
+          activeDoc = null;
+        }
+      } finally {
+        if (!cancelled) setBusy(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      if (activeDoc) {
+        void activeDoc.destroy();
+      }
+      if (loadedPdfRef.current) {
+        void loadedPdfRef.current.destroy();
+        loadedPdfRef.current = null;
+      }
+    };
+  }, [workerSrc, loadKey, documentOptions]);
+  React2.useEffect(() => {
+    setScale(clampScaleValue(initialScale));
+  }, [initialScale, clampScaleValue]);
+  React2.useEffect(() => {
+    if (layouts.length === 0) return;
+    const frame = requestAnimationFrame(() => {
+      const root = scrollRef.current;
+      if (!root) return;
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      const io = new IntersectionObserver(
+        (entries) => {
+          setRatios((prev) => {
+            const next = { ...prev };
+            for (const e of entries) {
+              const tgt = e.target;
+              const p = Number(tgt.dataset.page);
+              if (Number.isFinite(p)) next[p] = e.intersectionRatio;
+            }
+            return next;
+          });
+        },
+        {
+          root,
+          rootMargin: "200px 0px",
+          threshold: [0, 0.05, 0.25, 0.5, 0.75, 1]
+        }
+      );
+      observerRef.current = io;
+      root.querySelectorAll("[data-page]").forEach((el) => io.observe(el));
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [layouts]);
+  const handleSubmitPage = React2.useCallback(() => {
+    const n = Number.parseInt(pageInput, 10);
+    if (!Number.isFinite(n) || pageCount === 0) return;
+    const clamped = Math.min(Math.max(1, n), pageCount);
+    scrollToPage(clamped);
+    setPageInput(String(clamped));
+  }, [pageInput, pageCount, scrollToPage]);
+  const handleKeyDown = React2.useCallback(
+    (e) => {
+      if (!enableKeyboardShortcuts) return;
+      if (e.target !== e.currentTarget && e.target instanceof HTMLInputElement) {
+        return;
+      }
+      let handled = false;
+      switch (e.key) {
+        case "PageDown": {
+          scrollToPage(Math.min(pageCount || 1, currentVisiblePage + 1));
+          handled = true;
+          break;
+        }
+        case "PageUp": {
+          scrollToPage(Math.max(1, currentVisiblePage - 1));
+          handled = true;
+          break;
+        }
+        case "Home": {
+          scrollToPage(1);
+          handled = true;
+          break;
+        }
+        case "End": {
+          if (pageCount) scrollToPage(pageCount);
+          handled = true;
+          break;
+        }
+        case "+":
+        case "=": {
+          zoomInAct();
+          handled = true;
+          break;
+        }
+        case "-":
+        case "_": {
+          zoomOutAct();
+          handled = true;
+          break;
+        }
+        case "0": {
+          resetZoomAct();
+          handled = true;
+          break;
+        }
+      }
+      if (handled) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [
+      enableKeyboardShortcuts,
+      pageCount,
+      currentVisiblePage,
+      scrollToPage,
+      zoomInAct,
+      zoomOutAct,
+      resetZoomAct
+    ]
+  );
+  if (loadError) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("rounded-md border border-destructive/50 p-4", className),
+        role: "alert",
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive text-sm", children: loadError })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex min-h-0 flex-col overflow-hidden rounded-md border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: toolbarId,
+            role: "toolbar",
+            "aria-label": toolbarLabel,
+            className: cn(
+              "sticky top-0 z-10 flex shrink-0 flex-wrap items-center gap-2 border-b bg-background/95 px-2 py-2 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+              toolbarClassName
+            ),
+            children: [
+              /* @__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(
+                "input",
+                {
+                  id: pageInputId,
+                  type: "number",
+                  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",
+                  "aria-label": resolvedGoToLabel,
+                  value: pageInput,
+                  onChange: (ev) => setPageInput(ev.target.value),
+                  onKeyDown: (ev) => {
+                    if (ev.key === "Enter") {
+                      ev.preventDefault();
+                      handleSubmitPage();
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon-sm",
+                  onClick: zoomOutAct,
+                  disabled: busy || scale <= minScale,
+                  "aria-label": zoomOutLabel,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomOut, { "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon-sm",
+                  onClick: zoomInAct,
+                  disabled: busy || scale >= maxScale,
+                  "aria-label": zoomInLabel,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ZoomIn, { "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon-sm",
+                  onClick: resetZoomAct,
+                  disabled: busy,
+                  "aria-label": resetZoomLabel,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "icon-sm",
+                  onClick: fitToWidthAct,
+                  disabled: busy || pageCount === 0,
+                  "aria-label": fitWidthLabel,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { "aria-hidden": true })
+                }
+              ),
+              toolbarEndSlot
+            ]
+          }
+        ),
+        /* @__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;
+            }) })
+          }
+        )
+      ]
+    }
+  );
+}
+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,
+  onOpenChange,
+  src,
+  workerSrc,
+  documentOptions,
+  trigger,
+  title,
+  labels,
+  forwardedProps
+}) {
+  const closeLabel = labels?.close ?? "Close";
+  const dialogTitle = labels?.dialogTitle ?? title ?? "PDF document";
+  const dialogDescription = labels?.dialogDescription ?? "Document viewer with zoom and page navigation.";
+  const {
+    className: forwardedClassName,
+    toolbarClassName: forwardedToolbarClassName,
+    ...restForwarded
+  } = forwardedProps ?? {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { open, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx(DialogTrigger, { asChild: true, children: trigger }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      DialogContent,
+      {
+        className: fullscreenDialogContentClass,
+        showCloseButton: false,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { className: "sr-only", children: dialogTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { className: "sr-only", children: dialogDescription }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PdfViewer,
+            {
+              ...restForwarded,
+              src,
+              workerSrc,
+              documentOptions,
+              className: cn(
+                "min-h-0 flex-1 rounded-none border-0 bg-transparent text-white",
+                forwardedClassName
+              ),
+              toolbarClassName: cn(
+                "border-white/10 bg-black/80 text-white backdrop-blur",
+                forwardedToolbarClassName
+              ),
+              toolbarEndSlot: /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  className: "ml-auto text-white hover:bg-white/10 hover:text-white",
+                  onClick: () => onOpenChange(false),
+                  "aria-label": closeLabel,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-5", "aria-hidden": true })
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 
 exports.AvatarEditor = AvatarEditor;
 exports.AvatarEditorDialog = AvatarEditorDialog;
@@ -8192,6 +8777,8 @@ exports.LanguageSwitcher = LanguageSwitcher;
 exports.MiniCalendar = MiniCalendar;
 exports.NotificationsContext = NotificationsContext;
 exports.NotificationsWidget = NotificationsWidget;
+exports.PdfViewer = PdfViewer;
+exports.PdfViewerDialog = PdfViewerDialog;
 exports.Popover = Popover;
 exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;