@particle-academy/react-fancy 5.53.1 → 5.54.0

package/CHANGELOG.md

@@ -11,6 +11,51 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [5.54.0] - 2026-10-21
+
+### Added
+
+- **`PdfViewer` page-image mode (`pages`), with an access `policy` and a
+  `watermark`** (react-fancy#36). For showing a PDF without handing over the
+  file: your app renders the PDF to page images on its server, behind its own
+  auth, and the viewer only displays them.
+  - `pages={{ count, url: (page, scale) => string, aspectRatio? }}`. The page
+    images are the **only** requests the viewer makes. It never fetches or
+    references the PDF, and `src` is ignored in this mode even if passed.
+    `scale` is zoom x devicePixelRatio, rounded up to 1, 1.5, 2, 3 or 4.
+  - Its own toolbar: previous / next page, zoom out / reset / in, fit width,
+    fit page. With `frame`, full screen comes from the `FauxClient` frame.
+    Pages near the viewport get images; the rest are sized placeholders.
+  - Controlled `page` / `onPageChange` and `zoom` / `onZoomChange`, with stable
+    `data-react-fancy-pdf-viewer-*` handles on each page and button.
+  - **No search**: page images have no text to search. That is the cost of
+    not sending the PDF.
+  - `policy={{ download?, print?, copy?, screenshot? }}`, all allowed by default.
+    **Every flag is a deterrent, not a guarantee.** The real protection is that
+    the PDF never reaches the browser:
+    - `download: false`: no context menu on the pages and the images are not
+      draggable. Page images can still be captured (devtools, cache, screen).
+    - `print: false`: print CSS blanks the viewer, and Ctrl/Cmd+P is
+      intercepted while focus is inside it.
+    - `copy: false`: user selection off (there is no text layer anyway).
+    - `screenshot: "deter"`: the pages blur while the tab is hidden or the
+      window loses focus, and for 1.5 s after PrintScreen (which also tries to
+      clear the clipboard, best effort). **A web page cannot prevent
+      screenshots.**
+  - `watermark={{ text, opacity?, angle?, density? }}`: a tiled overlay on every
+    page, `pointer-events: none`. **It can be removed with devtools.** If it
+    must hold, burn it into the images on your server; `url(page, scale)` is
+    where to ask for that.
+  - `policy` and `watermark` apply only in page-image mode. The native-plugin
+    mode (`src`) is unchanged and cannot be restricted.
+  - New types: `PdfPageSource`, `PdfViewerPolicy`, `PdfViewerWatermark`.
+  - `MediaViewer` (`pdfProps`) and fancy-code's `FileViewer`
+    (`mediaProps.pdfProps`) already forward these untouched, so neither needed a
+    change.
+- **What to do:** nothing unless you want it. `src` is now optional in the
+  types, since page-image mode does not need one; every existing call compiles
+  and renders as before. No new dependencies.
+
 ## [5.53.1] - 2026-10-21
 
 ### Fixed

package/dist/PdfViewer.types-BEk2Jq6p.d.ts

@@ -0,0 +1,97 @@
+import { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.js';
+import { CSSProperties } from 'react';
+
+/**
+ * Pages the APP rendered to images, behind its own auth. With this the viewer
+ * never fetches or references the PDF: these URLs are its only requests.
+ */
+interface PdfPageSource {
+    /** Number of pages. */
+    count: number;
+    /**
+     * The image URL for a page (1-based). `scale` is a resolution hint, the zoom
+     * times the device pixel ratio rounded UP to one of 1, 1.5, 2, 3 or 4, so a
+     * page is fetched at a handful of sizes rather than one per zoom click.
+     * Render scale 1 at whatever width reads sharply at fit-width in your layout.
+     * This is also the place to burn a watermark in on the server.
+     */
+    url: (page: number, scale: number) => string;
+    /**
+     * Page width / height, used to size a page before its image arrives (each
+     * page switches to its image's real ratio once loaded). Default A4 portrait,
+     * `1 / Math.SQRT2`.
+     */
+    aspectRatio?: number;
+}
+/**
+ * What a viewer of the page images may do. Every flag defaults to allowed.
+ * These are DETERRENTS: a web page cannot stop a determined viewer, and a page
+ * image that reached the screen can always be captured. Real control is the
+ * app never serving the PDF, which page-image mode makes possible.
+ */
+interface PdfViewerPolicy {
+    /** `false`: no context menu ("Save image as") and no dragging the images out. */
+    download?: boolean;
+    /** `false`: print CSS blanks the viewer, and Ctrl/Cmd+P is swallowed while focus is inside it. */
+    print?: boolean;
+    /** `false`: user selection is off. (Page images have no text layer anyway.) */
+    copy?: boolean;
+    /**
+     * `"deter"`: the pages blur while the tab is hidden or the window has lost
+     * focus, and briefly after a PrintScreen key. It CANNOT prevent a screenshot.
+     * Default `"allow"`.
+     */
+    screenshot?: "allow" | "deter";
+}
+/** A tiled text overlay drawn over every page, in the browser. */
+interface PdfViewerWatermark {
+    text: string;
+    /** 0-1. Default 0.15. */
+    opacity?: number;
+    /** Degrees. Default -30. */
+    angle?: number;
+    /** Repeats per area; 2 tiles twice as tightly. Default 1. */
+    density?: number;
+}
+interface PdfViewerProps {
+    /**
+     * Show the PDF in react-fancy's `FauxClient` frame with a full-screen button,
+     * revealed on hover. Zoom stays on the browser's own PDF toolbar (with
+     * `pages`, on the viewer's toolbar). Default `false`.
+     */
+    frame?: boolean;
+    /** Passed to the frame (`variant`, `onFullscreenChange`, …). */
+    frameProps?: Partial<FauxClientProps>;
+    /**
+     * PDF source — an `http(s):`, `data:`, or `blob:` URL — shown in the
+     * browser's native PDF plugin. Ignored, and never referenced, when `pages` is set.
+     */
+    src?: string;
+    /**
+     * Page-image mode: show server-rendered page images instead of embedding the
+     * PDF. `policy` and `watermark` apply only in this mode.
+     */
+    pages?: PdfPageSource;
+    /** The current page (1-based), controlled. */
+    page?: number;
+    /** Starting page when uncontrolled. Default 1. */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Zoom, 1 = fit width, controlled (page-image mode). */
+    zoom?: number;
+    /** Default 1. */
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** What the viewer may do with the pages (page-image mode). Default: everything allowed. */
+    policy?: PdfViewerPolicy;
+    /** A tiled overlay over every page (page-image mode). Removable with devtools; burn it in server-side when it must hold. */
+    watermark?: PdfViewerWatermark;
+    /** Accessible title for the document (default `"PDF document"`). */
+    title?: string;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Inline styles for the container (e.g. a fixed height). */
+    style?: CSSProperties;
+}
+
+export type { PdfPageSource as P, PdfViewerPolicy as a, PdfViewerProps as b, PdfViewerWatermark as c };

package/dist/PdfViewer.types-DyoUBa2g.d.cts

@@ -0,0 +1,97 @@
+import { F as FauxClientProps } from './FauxClient.types-Dtk9aRs6.cjs';
+import { CSSProperties } from 'react';
+
+/**
+ * Pages the APP rendered to images, behind its own auth. With this the viewer
+ * never fetches or references the PDF: these URLs are its only requests.
+ */
+interface PdfPageSource {
+    /** Number of pages. */
+    count: number;
+    /**
+     * The image URL for a page (1-based). `scale` is a resolution hint, the zoom
+     * times the device pixel ratio rounded UP to one of 1, 1.5, 2, 3 or 4, so a
+     * page is fetched at a handful of sizes rather than one per zoom click.
+     * Render scale 1 at whatever width reads sharply at fit-width in your layout.
+     * This is also the place to burn a watermark in on the server.
+     */
+    url: (page: number, scale: number) => string;
+    /**
+     * Page width / height, used to size a page before its image arrives (each
+     * page switches to its image's real ratio once loaded). Default A4 portrait,
+     * `1 / Math.SQRT2`.
+     */
+    aspectRatio?: number;
+}
+/**
+ * What a viewer of the page images may do. Every flag defaults to allowed.
+ * These are DETERRENTS: a web page cannot stop a determined viewer, and a page
+ * image that reached the screen can always be captured. Real control is the
+ * app never serving the PDF, which page-image mode makes possible.
+ */
+interface PdfViewerPolicy {
+    /** `false`: no context menu ("Save image as") and no dragging the images out. */
+    download?: boolean;
+    /** `false`: print CSS blanks the viewer, and Ctrl/Cmd+P is swallowed while focus is inside it. */
+    print?: boolean;
+    /** `false`: user selection is off. (Page images have no text layer anyway.) */
+    copy?: boolean;
+    /**
+     * `"deter"`: the pages blur while the tab is hidden or the window has lost
+     * focus, and briefly after a PrintScreen key. It CANNOT prevent a screenshot.
+     * Default `"allow"`.
+     */
+    screenshot?: "allow" | "deter";
+}
+/** A tiled text overlay drawn over every page, in the browser. */
+interface PdfViewerWatermark {
+    text: string;
+    /** 0-1. Default 0.15. */
+    opacity?: number;
+    /** Degrees. Default -30. */
+    angle?: number;
+    /** Repeats per area; 2 tiles twice as tightly. Default 1. */
+    density?: number;
+}
+interface PdfViewerProps {
+    /**
+     * Show the PDF in react-fancy's `FauxClient` frame with a full-screen button,
+     * revealed on hover. Zoom stays on the browser's own PDF toolbar (with
+     * `pages`, on the viewer's toolbar). Default `false`.
+     */
+    frame?: boolean;
+    /** Passed to the frame (`variant`, `onFullscreenChange`, …). */
+    frameProps?: Partial<FauxClientProps>;
+    /**
+     * PDF source — an `http(s):`, `data:`, or `blob:` URL — shown in the
+     * browser's native PDF plugin. Ignored, and never referenced, when `pages` is set.
+     */
+    src?: string;
+    /**
+     * Page-image mode: show server-rendered page images instead of embedding the
+     * PDF. `policy` and `watermark` apply only in this mode.
+     */
+    pages?: PdfPageSource;
+    /** The current page (1-based), controlled. */
+    page?: number;
+    /** Starting page when uncontrolled. Default 1. */
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    /** Zoom, 1 = fit width, controlled (page-image mode). */
+    zoom?: number;
+    /** Default 1. */
+    defaultZoom?: number;
+    onZoomChange?: (zoom: number) => void;
+    /** What the viewer may do with the pages (page-image mode). Default: everything allowed. */
+    policy?: PdfViewerPolicy;
+    /** A tiled overlay over every page (page-image mode). Removable with devtools; burn it in server-side when it must hold. */
+    watermark?: PdfViewerWatermark;
+    /** Accessible title for the document (default `"PDF document"`). */
+    title?: string;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Inline styles for the container (e.g. a fixed height). */
+    style?: CSSProperties;
+}
+
+export type { PdfPageSource as P, PdfViewerPolicy as a, PdfViewerProps as b, PdfViewerWatermark as c };

package/dist/chunk-7MDHCYEB.cjs

@@ -0,0 +1,414 @@
+'use strict';
+
+var chunkM5SEYDSS_cjs = require('./chunk-M5SEYDSS.cjs');
+var chunkSNHU2AI4_cjs = require('./chunk-SNHU2AI4.cjs');
+var chunkZU5Q77OT_cjs = require('./chunk-ZU5Q77OT.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ZOOM_STEP = 1.25;
+var MIN_ZOOM = 0.25;
+var MAX_ZOOM = 4;
+var SCALE_BUCKETS = [1, 1.5, 2, 3, 4];
+var PRINT_SCREEN_MS = 1500;
+var GAP = 16;
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+function scaleBucket(zoom) {
+  const dpr = typeof window !== "undefined" && window.devicePixelRatio > 0 ? window.devicePixelRatio : 1;
+  const want = zoom * dpr;
+  return SCALE_BUCKETS.find((b) => b >= want - 1e-9) ?? SCALE_BUCKETS[SCALE_BUCKETS.length - 1];
+}
+var PRINT_BLOCK_CSS = '@media print{[data-react-fancy-pdf-viewer][data-print-blocked="true"],[data-react-fancy-pdf-viewer][data-print-blocked="true"] *{visibility:hidden!important}}';
+var PdfPages = react.forwardRef(
+  ({
+    pages,
+    page: controlledPage,
+    defaultPage = 1,
+    onPageChange,
+    zoom: controlledZoom,
+    defaultZoom = 1,
+    onZoomChange,
+    policy,
+    watermark,
+    title,
+    className,
+    style
+  }, ref) => {
+    const count = Math.max(0, Math.floor(pages.count));
+    const download = policy?.download !== false;
+    const print = policy?.print !== false;
+    const copy = policy?.copy !== false;
+    const deter = policy?.screenshot === "deter";
+    const [rawPage, setPage] = chunkSNHU2AI4_cjs.useControllableState(controlledPage, defaultPage, onPageChange);
+    const page = clamp(rawPage, 1, Math.max(1, count));
+    const [zoom, setZoom] = chunkSNHU2AI4_cjs.useControllableState(controlledZoom, defaultZoom, onZoomChange);
+    const scale = scaleBucket(zoom);
+    const scrollerRef = react.useRef(null);
+    const [ratios, setRatios] = react.useState({});
+    const ratioOf = (n) => ratios[n] ?? pages.aspectRatio ?? 1 / Math.SQRT2;
+    const observable = typeof IntersectionObserver !== "undefined";
+    const [near, setNear] = react.useState(() => /* @__PURE__ */ new Set([page, page + 1]));
+    const isNear = (n) => !observable || n === page || near.has(n);
+    react.useEffect(() => {
+      const scroller = scrollerRef.current;
+      if (!observable || !scroller) return;
+      const io = new IntersectionObserver(
+        (entries) => {
+          setNear((prev) => {
+            const next = new Set(prev);
+            for (const e of entries) {
+              const n = Number(e.target.dataset.page);
+              if (e.isIntersecting) next.add(n);
+              else next.delete(n);
+            }
+            return next;
+          });
+        },
+        // A viewport's worth above and below, so a page is there before it scrolls in.
+        { root: scroller, rootMargin: "100% 0px" }
+      );
+      scroller.querySelectorAll("[data-react-fancy-pdf-viewer-page]").forEach((el) => io.observe(el));
+      return () => io.disconnect();
+    }, [observable, count]);
+    const fromScroll = react.useRef(null);
+    const scrollToPage = react.useCallback((n) => {
+      const scroller = scrollerRef.current;
+      const slot = scroller?.querySelector(`[data-react-fancy-pdf-viewer-page][data-page="${n}"]`);
+      if (scroller && slot) scroller.scrollTop = Math.max(0, slot.offsetTop - GAP);
+    }, []);
+    react.useEffect(() => {
+      if (fromScroll.current === page) {
+        fromScroll.current = null;
+        return;
+      }
+      scrollToPage(page);
+    }, [page, scrollToPage]);
+    const firstZoom = react.useRef(true);
+    react.useLayoutEffect(() => {
+      if (firstZoom.current) {
+        firstZoom.current = false;
+        return;
+      }
+      scrollToPage(page);
+    }, [zoom]);
+    const pageRef = react.useRef(page);
+    pageRef.current = page;
+    react.useEffect(() => {
+      const scroller = scrollerRef.current;
+      if (!scroller || typeof ResizeObserver === "undefined") return;
+      let width = null;
+      const ro = new ResizeObserver(() => {
+        const w = scroller.clientWidth;
+        if (width !== null && w !== width) scrollToPage(pageRef.current);
+        width = w;
+      });
+      ro.observe(scroller);
+      return () => ro.disconnect();
+    }, [scrollToPage]);
+    const frame = react.useRef(0);
+    const onScroll = () => {
+      if (frame.current || typeof requestAnimationFrame === "undefined") return;
+      frame.current = requestAnimationFrame(() => {
+        frame.current = 0;
+        const scroller = scrollerRef.current;
+        if (!scroller) return;
+        const line = scroller.getBoundingClientRect().top + scroller.clientHeight / 3;
+        let current = 1;
+        scroller.querySelectorAll("[data-react-fancy-pdf-viewer-page]").forEach((el) => {
+          if (el.getBoundingClientRect().top <= line) current = Number(el.dataset.page);
+        });
+        if (current !== page) {
+          fromScroll.current = current;
+          setPage(current);
+        }
+      });
+    };
+    react.useEffect(() => () => {
+      if (frame.current) cancelAnimationFrame(frame.current);
+    }, []);
+    const zoomTo = (z) => setZoom(clamp(Math.round(z * 100) / 100, MIN_ZOOM, MAX_ZOOM));
+    const fitPage = () => {
+      const scroller = scrollerRef.current;
+      if (!scroller || scroller.clientWidth <= GAP * 2) return;
+      const pageHeightAtFit = (scroller.clientWidth - GAP * 2) / ratioOf(page);
+      zoomTo((scroller.clientHeight - GAP * 2) / pageHeightAtFit);
+    };
+    const [hidden, setHidden] = react.useState(false);
+    const [blurred, setBlurred] = react.useState(false);
+    const [snapped, setSnapped] = react.useState(false);
+    react.useEffect(() => {
+      if (!deter || typeof window === "undefined") return;
+      let timer;
+      const onVisibility = () => setHidden(document.visibilityState === "hidden");
+      const onBlur = () => setBlurred(true);
+      const onFocus = () => setBlurred(false);
+      const onKeyUp = (e) => {
+        if (e.key !== "PrintScreen") return;
+        setSnapped(true);
+        clearTimeout(timer);
+        timer = setTimeout(() => setSnapped(false), PRINT_SCREEN_MS);
+        void navigator.clipboard?.writeText?.("").catch(() => {
+        });
+      };
+      document.addEventListener("visibilitychange", onVisibility);
+      window.addEventListener("blur", onBlur);
+      window.addEventListener("focus", onFocus);
+      window.addEventListener("keyup", onKeyUp);
+      return () => {
+        clearTimeout(timer);
+        document.removeEventListener("visibilitychange", onVisibility);
+        window.removeEventListener("blur", onBlur);
+        window.removeEventListener("focus", onFocus);
+        window.removeEventListener("keyup", onKeyUp);
+      };
+    }, [deter]);
+    const obscured = deter && (hidden || blurred || snapped);
+    const onKeyDown = (e) => {
+      if (!print && (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "p") e.preventDefault();
+    };
+    const block = (e) => e.preventDefault();
+    const markId = react.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-pdf-viewer": "",
+        "data-mode": "pages",
+        "data-print-blocked": print ? void 0 : "true",
+        "data-obscured": String(obscured),
+        "aria-label": title,
+        role: "document",
+        onKeyDown,
+        className: chunkZU5Q77OT_cjs.cn(
+          "relative flex h-full min-h-[20rem] w-full flex-col overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900",
+          className
+        ),
+        style: copy ? style : { ...style, userSelect: "none", WebkitUserSelect: "none" },
+        children: [
+          !print && /* @__PURE__ */ jsxRuntime.jsx("style", { children: PRINT_BLOCK_CSS }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-react-fancy-pdf-viewer-toolbar": "",
+              className: "flex shrink-0 items-center gap-1 border-b border-zinc-200 bg-[color:var(--fancy-surface,var(--color-white))] px-2 py-1 text-xs text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:border-zinc-800 dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { attr: "prev", label: "Previous page", disabled: page <= 1, onClick: () => setPage(page - 1), children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { dir: "up" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { "data-react-fancy-pdf-viewer-page-label": "", className: "min-w-[3.5rem] text-center tabular-nums", "aria-live": "polite", children: [
+                  page,
+                  " / ",
+                  count
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { attr: "next", label: "Next page", disabled: page >= count, onClick: () => setPage(page + 1), children: /* @__PURE__ */ jsxRuntime.jsx(Chevron, { dir: "down" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mx-1 h-4 w-px bg-zinc-200 dark:bg-zinc-700", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { attr: "zoom-out", label: "Zoom out", disabled: zoom <= MIN_ZOOM, onClick: () => zoomTo(zoom / ZOOM_STEP), children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\u2212" }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ToolButton, { attr: "zoom-reset", label: "Reset zoom", wide: true, onClick: () => zoomTo(1), children: [
+                  Math.round(zoom * 100),
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { attr: "zoom-in", label: "Zoom in", disabled: zoom >= MAX_ZOOM, onClick: () => zoomTo(zoom * ZOOM_STEP), children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "+" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { attr: "fit-width", label: "Fit width", wide: true, onClick: () => zoomTo(1), children: "Width" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ToolButton, { attr: "fit-page", label: "Fit page", wide: true, onClick: fitPage, children: "Page" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: scrollerRef,
+              "data-react-fancy-pdf-viewer-pages": "",
+              tabIndex: 0,
+              onScroll,
+              onContextMenu: download ? void 0 : block,
+              onDragStart: download ? void 0 : block,
+              className: "relative min-h-0 flex-1 overflow-auto outline-none transition-[filter] duration-150",
+              style: { padding: GAP, filter: obscured ? "blur(24px)" : void 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-auto flex flex-col", style: { width: `${zoom * 100}%`, gap: GAP }, children: Array.from({ length: count }, (_, i) => {
+                const n = i + 1;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    "data-react-fancy-pdf-viewer-page": "",
+                    "data-page": n,
+                    className: "relative w-full overflow-hidden bg-white shadow-sm",
+                    style: { aspectRatio: String(ratioOf(n)) },
+                    children: [
+                      isNear(n) && /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          "data-react-fancy-pdf-viewer-image": "",
+                          src: pages.url(n, scale),
+                          alt: `Page ${n}`,
+                          decoding: "async",
+                          draggable: download ? void 0 : false,
+                          className: "block h-full w-full",
+                          onLoad: (e) => {
+                            const img = e.currentTarget;
+                            if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+                              const r = img.naturalWidth / img.naturalHeight;
+                              setRatios((prev) => prev[n] === r ? prev : { ...prev, [n]: r });
+                            }
+                          }
+                        }
+                      ),
+                      watermark?.text && /* @__PURE__ */ jsxRuntime.jsx(Watermark, { id: `${markId}-${n}`, ...watermark })
+                    ]
+                  },
+                  n
+                );
+              }) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PdfPages.displayName = "PdfPages";
+function Watermark({ id, text, opacity = 0.15, angle = -30, density = 1 }) {
+  const fontSize = 14;
+  const gap = 80 / Math.max(0.1, density);
+  const w = text.length * fontSize * 0.55 + gap;
+  const h = fontSize + gap;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "data-react-fancy-pdf-viewer-watermark": "",
+      "aria-hidden": "true",
+      className: "absolute inset-0 h-full w-full select-none",
+      style: { pointerEvents: "none" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id, width: w, height: h, patternUnits: "userSpaceOnUse", patternTransform: `rotate(${angle})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: gap / 2,
+            y: h / 2,
+            fontSize,
+            fontFamily: "ui-sans-serif, system-ui, sans-serif",
+            fillOpacity: clamp(opacity, 0, 1),
+            style: { fill: "var(--fancy-text, var(--color-zinc-700))" },
+            children: text
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "100%", height: "100%", fill: `url(#${id})` })
+      ]
+    }
+  );
+}
+function ToolButton({
+  attr,
+  label,
+  disabled,
+  wide,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      ...{ [`data-react-fancy-pdf-viewer-${attr}`]: "" },
+      "aria-label": label,
+      title: label,
+      disabled,
+      onClick,
+      className: chunkZU5Q77OT_cjs.cn(
+        "flex h-6 items-center justify-center rounded-full tabular-nums transition-colors disabled:pointer-events-none disabled:opacity-30",
+        "hover:bg-zinc-900/5 hover:text-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 dark:hover:bg-white/10 dark:hover:text-zinc-200",
+        wide ? "min-w-[2.25rem] px-1.5" : "w-6"
+      ),
+      children
+    }
+  );
+}
+function Chevron({ dir }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: dir === "up" ? "m18 15-6-6-6 6" : "m6 9 6 6 6-6" }) });
+}
+var PdfViewer = react.forwardRef(
+  ({
+    src,
+    pages,
+    page,
+    defaultPage,
+    onPageChange,
+    zoom,
+    defaultZoom,
+    onZoomChange,
+    policy,
+    watermark,
+    title = "PDF document",
+    className,
+    style,
+    frame = false,
+    frameProps
+  }, ref) => {
+    if (pages) {
+      const pageViewer = /* @__PURE__ */ jsxRuntime.jsx(
+        PdfPages,
+        {
+          ref,
+          pages,
+          page,
+          defaultPage,
+          onPageChange,
+          zoom,
+          defaultZoom,
+          onZoomChange,
+          policy,
+          watermark,
+          title,
+          className: chunkZU5Q77OT_cjs.cn(frame && "rounded-none", className),
+          style
+        }
+      );
+      if (!frame) return pageViewer;
+      return /* @__PURE__ */ jsxRuntime.jsx(chunkM5SEYDSS_cjs.FauxClient, { variant: "browser", url: title, controls: { zoom: false }, fill: true, ...frameProps, children: pageViewer });
+    }
+    const viewer = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-pdf-viewer": "",
+        className: chunkZU5Q77OT_cjs.cn(
+          "relative h-full min-h-[20rem] w-full overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("object", { data: src, type: "application/pdf", className: "h-full w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "iframe",
+            {
+              src,
+              title,
+              className: "h-full w-full border-0"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center gap-2 p-4 text-center text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "This browser can't display the PDF inline." }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: src,
+                download: true,
+                className: "font-medium text-blue-600 hover:underline dark:text-blue-400",
+                children: "Download PDF"
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+    if (!frame) return viewer;
+    return (
+      // The browser variant, because the plugin swallows the pointer: hover over
+      // the PDF never reaches the frame, so controls over it could not be
+      // revealed, and its top-right corner is the PDF toolbar's. In the address
+      // bar they are reachable and collide with nothing.
+      /* @__PURE__ */ jsxRuntime.jsx(chunkM5SEYDSS_cjs.FauxClient, { variant: "browser", url: title, controls: { zoom: false }, fill: true, ...frameProps, children: viewer })
+    );
+  }
+);
+PdfViewer.displayName = "PdfViewer";
+
+exports.PdfViewer = PdfViewer;
+//# sourceMappingURL=chunk-7MDHCYEB.cjs.map
+//# sourceMappingURL=chunk-7MDHCYEB.cjs.map