@epam/ai-dial-react-pdf-highlighter 0.1.0-rc.0

package/dist/ai-dial-react-pdf-highlighter.es.js

@@ -0,0 +1,568 @@
+import { jsx as e, jsxs as v, Fragment as le } from "react/jsx-runtime";
+import { mergeClasses as S, DialEllipsisTooltip as K, DialButton as j, ElementSize as B, DialSelect as oe, SelectSize as se, DialCheckbox as ce, DialLoader as ie } from "@epam/ai-dial-ui-kit";
+import { ZoomMode as Y, PDFHighlightViewer as ue } from "@epam/pdf-highlighter-kit";
+import { useRef as F, useState as E, useEffect as y, useCallback as O, createContext as me, useContext as de, useMemo as J } from "react";
+import { IconChevronDown as fe, IconChevronUp as pe, IconMinus as ve, IconPlus as be, IconAlertTriangle as he } from "@tabler/icons-react";
+const H = "auto", G = "page-fit", X = [
+  { value: H, label: "Auto" },
+  { value: G, label: "Page Fit" },
+  { value: "0.5", label: "50%" },
+  { value: "0.75", label: "75%" },
+  { value: "1", label: "100%" },
+  { value: "1.25", label: "125%" },
+  { value: "1.5", label: "150%" },
+  { value: "2", label: "200%" },
+  { value: "3", label: "300%" }
+], xe = {
+  maxWidth: 104,
+  format: "image/jpeg",
+  quality: 0.85
+}, Q = 15, we = "application/pdf", ye = ".pdf", ge = ({
+  pdf: t,
+  highlights: a,
+  selectedHighlightId: i,
+  autoFocusFirstHighlight: n = !1,
+  selectedPageNumber: u,
+  zoom: s,
+  containerClassName: d,
+  onTotalPagesChange: f,
+  onViewerReady: g,
+  selectedPages: m
+}) => {
+  const h = F(null), r = F(null), [o, T] = E(!1), [_, b] = E(!1), D = F(f), z = F(g);
+  y(() => {
+    D.current = f;
+  }, [f]), y(() => {
+    z.current = g;
+  }, [g]);
+  const N = O(
+    (l) => r.current?.goToHighlight(l),
+    []
+  );
+  return y(() => {
+    if (!h.current) return;
+    T(!1), b(!1), r.current && (r.current.destroy(), r.current = null);
+    let l = null, p = !0;
+    return (async () => {
+      try {
+        if (l = new ue(), await l.init(h.current, {
+          enableTextSelection: !0,
+          enableVirtualScrolling: !0,
+          bboxOrigin: "top-left"
+        }), !p) {
+          l.destroy();
+          return;
+        }
+        if (await l.loadPDF(t, { selectedPages: m }), !p) {
+          l.destroy();
+          return;
+        }
+        const x = l.getTotalPages?.();
+        typeof x == "number" && x > 0 && D.current?.(x), p && (r.current = l, T(!0));
+      } catch (x) {
+        if (!p)
+          return;
+        console.error("Error in initViewer:", x);
+      }
+    })(), () => {
+      p = !1, l && l.destroy();
+    };
+  }, [t, m]), y(() => {
+    !o || !r.current || (r.current.loadHighlights(a), n && a && a[0] && N(a[0].id));
+  }, [n, N, a, o]), y(() => {
+    b(!0);
+  }, [a]), y(() => {
+    o && _ && i && N(i);
+  }, [N, o, _, i]), y(() => {
+    if (!(!o || !s))
+      if (s === H)
+        r.current?.setZoom?.(Y.AUTO);
+      else if (s === G)
+        r.current?.setZoom?.(Y.PAGE_FIT);
+      else {
+        const l = parseFloat(s);
+        !Number.isNaN(l) && l > 0 && r.current?.setZoom?.(l);
+      }
+  }, [o, s]), y(() => {
+    o && u && r.current?.setPage?.(u);
+  }, [o, u]), y(() => {
+    if (!o || !r.current) return;
+    const l = r.current;
+    z.current?.({
+      getThumbnailsDataUrl: (p, P) => l.getThumbnailsDataUrl(p, P),
+      zoomIn: () => l.zoomIn(),
+      zoomOut: () => l.zoomOut(),
+      getZoom: () => l.getZoom(),
+      navigateToPage: (p) => l.setPage?.(p)
+    });
+  }, [o]), /* @__PURE__ */ e(
+    "div",
+    {
+      ref: h,
+      className: S(
+        "grow min-w-0 overflow-auto bg-layer-3",
+        d
+      )
+    }
+  );
+}, C = "h-4 rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave", Ne = ({
+  className: t,
+  ariaLabel: a = "pdf preview loading"
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    role: "status",
+    "aria-label": a,
+    "aria-live": "polite",
+    className: S("h-full w-full bg-layer-3", t),
+    children: /* @__PURE__ */ v("div", { className: "flex h-full w-full flex-col gap-10 px-[60px] pt-10", children: [
+      /* @__PURE__ */ e("div", { className: "mx-auto h-4 w-[208px] max-w-[40%] rounded-[120px] bg-gradient-to-r from-layer-4 via-layer-3 to-layer-4 bg-[length:200%_100%] animate-skeleton-wave" }),
+      /* @__PURE__ */ v("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: S(
+              C,
+              "w-[28%] max-w-[320px]"
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ v("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e("div", { className: C }),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: S(
+              C,
+              "w-[58%] max-w-[520px]"
+            )
+          }
+        )
+      ] })
+    ] })
+  }
+), te = me(null), Ie = () => de(te), Z = X.filter(({ value: t }) => {
+  const a = Number.parseFloat(t);
+  return !Number.isNaN(a) && a > 0;
+}), Te = [...Z].reverse(), Ce = (t, a, i) => {
+  if (Z.length === 0)
+    return t;
+  const n = Number.parseFloat(t), u = !Number.isNaN(n) && n > 0 ? n : i, s = typeof u == "number" && u > 0 ? u : Number.parseFloat(Z[0].value);
+  return a === 1 ? (Z.find(
+    ({ value: d }) => Number.parseFloat(d) > s
+  ) ?? Z[Z.length - 1]).value : (Te.find(
+    ({ value: d }) => Number.parseFloat(d) < s
+  ) ?? Z[0]).value;
+};
+function Pe(t, a) {
+  const i = (t ?? "").toLowerCase();
+  return (a ?? "").toLowerCase() === we || i.endsWith(ye);
+}
+const ee = X.map((t) => ({
+  value: t.value,
+  label: t.label
+})), Oe = ({
+  fileUrl: t,
+  fileName: a,
+  loadFileCb: i,
+  highlights: n,
+  selectedPageNumber: u,
+  onTotalPagesChange: s,
+  thumbnailPageNumbers: d,
+  onThumbnailsLoaded: f,
+  onViewerReady: g,
+  showLoaderOverlay: m = !1,
+  selectedPages: h
+}) => {
+  const r = Ie(), o = F(null), [T, _] = E(!1), [b, D] = E(0), [z, N] = E(!1), [l, p] = E(null), [P, x] = E(null), [I, A] = E(H), k = J(() => {
+    let c = a || t;
+    if (!a)
+      try {
+        c = new URL(t).pathname;
+      } catch {
+        c = t.split("?")[0].split("#")[0];
+      }
+    return Pe(c.toLowerCase());
+  }, [a, t]), M = O(
+    (c) => {
+      D(
+        (b + c + n.length) % n.length
+      );
+    },
+    [b, n.length]
+  ), R = O(
+    (c) => {
+      const w = o.current;
+      !w?.getZoom || !c || A(Ce(I, c, w.getZoom()));
+    },
+    [I]
+  ), $ = J(() => {
+    if (!(I === H || I === G || X.some((w) => w.value === I))) {
+      const w = parseFloat(I);
+      if (!Number.isNaN(w) && w > 0)
+        return [
+          ...ee,
+          { value: I, label: `${Math.round(w * 100)}%` }
+        ];
+    }
+    return ee;
+  }, [I]);
+  y(() => {
+    let c = !1;
+    if (p(!0), N(!1), x(null), _(!1), o.current = null, !k) {
+      N(!0), p(!1);
+      return;
+    }
+    return (async () => {
+      try {
+        const L = await (r ? r.getFile(t, () => i(t)) : i(t));
+        c || x(L);
+      } catch {
+        c || (N(!0), x(null));
+      } finally {
+        c || p(!1);
+      }
+    })(), () => {
+      c = !0;
+    };
+  }, [t, r, i, k]);
+  const U = O(
+    (c) => {
+      o.current = c, _(!0), g?.(c);
+    },
+    [g]
+  );
+  return y(() => {
+    const c = d ?? [], w = o.current?.getThumbnailsDataUrl;
+    if (!c.length || !w || !P || !f || !T)
+      return;
+    let L = !1;
+    return (async () => {
+      const q = /* @__PURE__ */ new Map();
+      for (let V = 0; V < c.length && !L; V += Q) {
+        const re = c.slice(V, V + Q);
+        try {
+          const W = await w(re, xe);
+          if (L) break;
+          W.forEach((ae, ne) => q.set(ne, ae)), f(new Map(q));
+        } catch (W) {
+          console.warn("Thumbnail batch load failed:", W);
+          break;
+        }
+      }
+    })(), () => {
+      L = !0;
+    };
+  }, [d, P, f, T]), {
+    file: P,
+    isLoading: l,
+    isError: z,
+    isSupportedFile: k,
+    activeHighlightIndex: b,
+    zoom: I,
+    setZoom: A,
+    zoomSelectOptions: $,
+    viewerApiRef: o,
+    showLoader: !z && (!!l || m),
+    changeIndex: M,
+    handleZoomChange: R,
+    handleViewerReady: U
+  };
+}, Ae = ({
+  fileUrl: t,
+  fileName: a,
+  errorLabel: i,
+  occurrencesLabel: n,
+  unsupportedLabel: u,
+  highlights: s,
+  loadFileCb: d,
+  showOccurrences: f = !0,
+  selectedPageNumber: g,
+  containerClassName: m,
+  pdfViewerClassName: h,
+  onTotalPagesChange: r,
+  title: o,
+  thumbnailPageNumbers: T,
+  onThumbnailsLoaded: _,
+  onViewerReady: b,
+  showLoaderOverlay: D = !1,
+  selectedPages: z
+}) => {
+  const {
+    file: N,
+    isError: l,
+    isSupportedFile: p,
+    activeHighlightIndex: P,
+    zoom: x,
+    setZoom: I,
+    zoomSelectOptions: A,
+    showLoader: k,
+    changeIndex: M,
+    handleZoomChange: R,
+    handleViewerReady: $
+  } = Oe({
+    fileUrl: t,
+    fileName: a,
+    loadFileCb: d,
+    highlights: s,
+    selectedPageNumber: g,
+    onTotalPagesChange: r,
+    thumbnailPageNumbers: T,
+    onThumbnailsLoaded: _,
+    onViewerReady: b,
+    showLoaderOverlay: D,
+    selectedPages: z
+  });
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: S(
+        "flex flex-col self-center gap-4 py-3 px-6 h-full w-full bg-layer-2",
+        m
+      ),
+      children: [
+        a && /* @__PURE__ */ e(
+          K,
+          {
+            className: "dial-tiny-text text-secondary",
+            text: a
+          }
+        ),
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: S(
+              "flex w-full justify-between items-center",
+              f && o ? "gap-2" : ""
+            ),
+            children: [
+              /* @__PURE__ */ e("div", { children: f ? /* @__PURE__ */ v("div", { className: "flex gap-1 py-0.5 px-1.5 min-h-[26px] items-center bg-layer-4 rounded w-fit", children: [
+                /* @__PURE__ */ v("span", { className: "dial-small-text", children: [
+                  n ?? "Occurrences",
+                  ":",
+                  /* @__PURE__ */ e("span", { className: "pl-0.5 min-w-3 inline-block text-right", children: s.length > 0 ? `${P + 1}/${s.length}` : "0" })
+                ] }),
+                s.length > 0 && /* @__PURE__ */ v(le, { children: [
+                  /* @__PURE__ */ e(
+                    j,
+                    {
+                      className: "p-0 text-primary !h-6.5",
+                      size: B.Small,
+                      iconAfter: /* @__PURE__ */ e(fe, { size: 16 }),
+                      "aria-label": "Next occurrence",
+                      onClick: () => M(1)
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    j,
+                    {
+                      className: "p-0 text-primary !h-6.5",
+                      size: B.Small,
+                      iconAfter: /* @__PURE__ */ e(pe, { size: 16 }),
+                      "aria-label": "Previous occurrence",
+                      onClick: () => M(-1)
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ e("div", {}) }),
+              /* @__PURE__ */ v(
+                "div",
+                {
+                  className: S(
+                    "flex flex-1 items-center gap-4 min-w-0",
+                    o != null && o !== "" ? "justify-between" : "justify-end"
+                  ),
+                  children: [
+                    o != null && o !== "" && /* @__PURE__ */ e(
+                      K,
+                      {
+                        text: o,
+                        className: "dial-body-semi-text text-primary min-w-0"
+                      }
+                    ),
+                    /* @__PURE__ */ v("div", { className: "flex gap-0.5 items-center shrink-0", children: [
+                      /* @__PURE__ */ e("div", { className: "h-6", children: /* @__PURE__ */ e(
+                        oe,
+                        {
+                          size: se.Sm,
+                          className: "bg-layer-4 !py-0 h-6 min-h-6 dial-small-text max-h-full border-transparent hover:border-hover rounded",
+                          options: A,
+                          value: x,
+                          onChange: (U) => I(U)
+                        }
+                      ) }),
+                      /* @__PURE__ */ e(
+                        j,
+                        {
+                          className: "py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",
+                          iconAfter: /* @__PURE__ */ e(ve, { size: 16 }),
+                          "aria-label": "Zoom out",
+                          size: B.Small,
+                          onClick: () => R(-1)
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        j,
+                        {
+                          className: "py-0 flex items-center justify-center rounded text-primary bg-layer-4 border border-transparent hover:border-hover",
+                          iconAfter: /* @__PURE__ */ e(be, { size: 16 }),
+                          "aria-label": "Zoom in",
+                          size: B.Small,
+                          onClick: () => R(1)
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ v("div", { className: "relative flex min-h-0 flex-1", children: [
+          N && /* @__PURE__ */ e(
+            ge,
+            {
+              pdf: N,
+              highlights: s,
+              selectedHighlightId: s[P]?.id,
+              selectedPageNumber: g,
+              zoom: x,
+              onTotalPagesChange: r,
+              onViewerReady: $,
+              containerClassName: h,
+              selectedPages: z
+            }
+          ),
+          k && /* @__PURE__ */ e(Ne, { className: "absolute inset-0 z-10" }),
+          l && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-20 flex items-center justify-center bg-layer-3", children: /* @__PURE__ */ v("div", { className: "flex flex-col items-center gap-6 p-10", children: [
+            /* @__PURE__ */ e(
+              he,
+              {
+                size: 60,
+                stroke: 2,
+                className: "text-secondary"
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "text-center dial-small-text whitespace-pre-wrap", children: !p && u ? u : i ?? "Failed to load document." })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+}, _e = 1200 * 1e3, De = 20, Me = ({
+  children: t,
+  ttlMs: a = _e,
+  maxEntries: i = De
+}) => {
+  const n = F(/* @__PURE__ */ new Map()), u = O((m, h) => {
+    n.current.delete(m), n.current.set(m, h);
+  }, []), s = O(() => {
+    const m = Date.now();
+    for (const [h, r] of n.current.entries())
+      r.file && m - r.timestamp > a && n.current.delete(h);
+  }, [a]), d = O(() => {
+    for (; n.current.size > i; ) {
+      const m = n.current.keys().next().value;
+      m && n.current.delete(m);
+    }
+  }, [i]), f = O(() => {
+    n.current.clear();
+  }, []), g = O(
+    async (m, h) => {
+      s();
+      const r = n.current.get(m);
+      if (r) {
+        if (u(m, { ...r, timestamp: Date.now() }), r.file)
+          return r.file;
+        if (r.promise)
+          return r.promise;
+      }
+      const o = Date.now(), T = h().then((b) => {
+        const D = { file: b, timestamp: Date.now() };
+        return u(m, D), d(), b;
+      }).catch((b) => {
+        throw n.current.delete(m), b;
+      });
+      return u(m, { promise: T, timestamp: o }), d(), T;
+    },
+    [d, s, u]
+  );
+  return y(() => () => f(), [f]), /* @__PURE__ */ e(te.Provider, { value: { getFile: g, clearCache: f }, children: t });
+}, Re = ({
+  pageNum: t,
+  onSelectPage: a,
+  isSelected: i,
+  isLoading: n,
+  isMultiselect: u,
+  thumbnailUrl: s,
+  className: d
+}) => /* @__PURE__ */ v(
+  "button",
+  {
+    type: "button",
+    "aria-label": `Page ${t}`,
+    "aria-pressed": i,
+    onClick: (f) => {
+      u && f.target.closest("[data-checkbox-wrapper]") || a(t);
+    },
+    className: S(
+      "flex flex-col gap-2 p-2 h-[186px] w-[120px] items-center justify-center cursor-pointer transition-colors hover:bg-layer-4 rounded-sm",
+      i && (u ? "border border-accent-primary bg-accent-primary-alpha" : "border border-primary"),
+      d
+    ),
+    children: [
+      /* @__PURE__ */ v("div", { className: "relative w-[104px] h-[146px] bg-model-icon rounded-sm overflow-hidden", children: [
+        s ? /* @__PURE__ */ e(
+          "img",
+          {
+            src: s,
+            alt: `Page ${t} thumbnail`,
+            className: "w-full h-full object-cover rounded-sm"
+          }
+        ) : null,
+        u && /* @__PURE__ */ e("div", { className: "absolute left-1 top-1 z-10", "data-checkbox-wrapper": !0, children: /* @__PURE__ */ e(
+          ce,
+          {
+            id: `page-thumbnail-${t}`,
+            checked: i,
+            onChange: () => a(t),
+            className: "before:border-primary before:bg-model-icon bg-model-icon"
+          }
+        ) }),
+        n && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-blackout rounded-sm", children: /* @__PURE__ */ e(
+          ie,
+          {
+            size: 24,
+            fullWidth: !1,
+            ariaLabel: `Loading page ${t}`
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ e("span", { className: "dial-tiny-text text-primary", children: t })
+    ]
+  }
+);
+export {
+  H as AUTO_ZOOM_ID,
+  Ae as DocumentPreview,
+  Me as DocumentPreviewCacheProvider,
+  G as FIT_ZOOM_ID,
+  ge as PDFViewer,
+  Re as PageThumbnail,
+  Ne as PdfPreviewLoader,
+  Q as THUMBNAIL_BATCH_SIZE,
+  xe as THUMBNAIL_IMAGE_OPTIONS,
+  X as ZOOM_OPTIONS,
+  Ce as getStepZoomOptionValue,
+  Pe as isPdfFile,
+  Oe as useDocumentPreview,
+  Ie as useDocumentPreviewCache
+};

package/dist/index.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.left-1{left:.25rem}.top-1{top:.25rem}.z-10{z-index:10}.z-20{z-index:20}.mx-auto{margin-left:auto;margin-right:auto}.inline-block{display:inline-block}.flex{display:flex}.h-4{height:1rem}.h-6{height:1.5rem}.h-\[146px\]{height:146px}.h-\[186px\]{height:186px}.h-\[600px\]{height:600px}.h-\[700px\]{height:700px}.h-full{height:100%}.max-h-full{max-height:100%}.min-h-0{min-height:0}.min-h-6{min-height:1.5rem}.min-h-\[26px\]{min-height:26px}.w-\[104px\]{width:104px}.w-\[120px\]{width:120px}.w-\[208px\]{width:208px}.w-\[28\%\]{width:28%}.w-\[500px\]{width:500px}.w-\[58\%\]{width:58%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-3{min-width:.75rem}.max-w-\[320px\]{max-width:320px}.max-w-\[40\%\]{max-width:40%}.max-w-\[520px\]{max-width:520px}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.grow{flex-grow:1}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}.animate-skeleton-wave{animation:skeleton-wave 3.5s ease-in-out infinite}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.self-center{align-self:center}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:4px}.rounded-\[120px\]{border-radius:120px}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-accent-primary{border-color:var(--stroke-accent-primary,#7da4ff)}.border-primary{border-color:var(--stroke-primary,#696e7c)}.border-transparent{border-color:transparent}.bg-accent-primary-alpha{background-color:var(--bg-accent-primary-alpha,#7da4ff26)}.bg-blackout{background-color:var(--bg-blackout,#0c101db3)}.bg-layer-1{background-color:var(--bg-layer-1,#0c101d)}.bg-layer-2{background-color:var(--bg-layer-2,#161b2d)}.bg-layer-3{background-color:var(--bg-layer-3,#1d2439)}.bg-layer-4{background-color:var(--bg-layer-4,#242c42)}.bg-model-icon{background-color:var(--bg-model-icon,#fff)}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-layer-4{--tw-gradient-from:var(--bg-layer-4,#242c42) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-layer-3{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--bg-layer-3,#1d2439) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-layer-4{--tw-gradient-to:var(--bg-layer-4,#242c42) var(--tw-gradient-to-position)}.bg-\[length\:200\%_100\%\]{background-size:200% 100%}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-4{padding:1rem}.\!py-0{padding-top:0!important;padding-bottom:0!important}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-\[60px\]{padding-left:60px;padding-right:60px}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-10{padding-top:2.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.text-primary{color:var(--text-primary,#eef1f7)}.text-secondary{color:var(--text-secondary,#9fa6bd)}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:border-primary:before{content:var(--tw-content);border-color:var(--stroke-primary,#696e7c)}.before\:bg-model-icon:before{content:var(--tw-content);background-color:var(--bg-model-icon,#fff)}.hover\:border-hover:hover{border-color:var(--stroke-hover,#eef1f7)}.hover\:bg-layer-4:hover{background-color:var(--bg-layer-4,#242c42)}

package/dist/src/components/DocumentPreview/DocumentPreview.d.ts

@@ -0,0 +1,55 @@
+import { InputHighlightData } from '@epam/pdf-highlighter-kit';
+import { FC, ReactNode } from 'react';
+import { PdfViewerApi } from '../../models/pdf-viewer.models';
+/**
+ * Props for the high-level document preview component.
+ *
+ * The component handles file loading, optional cache integration, toolbar controls,
+ * highlight navigation, and thumbnail generation.
+ */
+export interface DocumentPreviewProps {
+    /** URL passed to {@link loadFileCb} to fetch the PDF file. */
+    fileUrl: string;
+    /** Display name used for PDF type detection. Falls back to {@link fileUrl}. */
+    fileName?: string;
+    /**
+     * Caller-provided file loader.
+     * If the cache provider is mounted, this callback is used as the cache miss loader.
+     */
+    loadFileCb: (url: string) => Promise<Blob>;
+    /** Highlight data rendered by the underlying PDF viewer. */
+    highlights: InputHighlightData[];
+    /** Custom label shown when file loading fails. */
+    errorLabel?: ReactNode;
+    /** Label used before the highlights occurrence counter. */
+    occurrencesLabel?: ReactNode;
+    /** Label shown when the file type is not a supported PDF. */
+    unsupportedLabel?: ReactNode;
+    /** Show occurrence counter in the toolbar. Default: `true`. */
+    showOccurrences?: boolean;
+    /** Navigate viewer to this page when provided. */
+    selectedPageNumber?: number;
+    /** Additional class name for the inner {@link PDFViewer} container. */
+    pdfViewerClassName?: string;
+    /** Additional class name for the outer wrapper container. */
+    containerClassName?: string;
+    /** Callback invoked when total page count is known. */
+    onTotalPagesChange?: (totalPages: number) => void;
+    /** Optional title shown in the toolbar center. */
+    title?: string;
+    /** Page numbers for which thumbnails should be generated in batches. */
+    thumbnailPageNumbers?: number[];
+    /** Called incrementally after each thumbnail batch resolves. */
+    onThumbnailsLoaded?: (map: Map<number, string>) => void;
+    /** Called when the underlying viewer is ready and its imperative API is available. */
+    onViewerReady?: (api: PdfViewerApi) => void;
+    /** Forces the loading overlay visible while parent-level work is in progress. */
+    showLoaderOverlay?: boolean;
+    /** Restricts viewer loading to selected pages only. */
+    selectedPages?: number[];
+}
+/**
+ * High-level PDF preview component with toolbar, highlight navigation, zoom controls,
+ * loading and error overlays, and optional thumbnail generation.
+ */
+export declare const DocumentPreview: FC<DocumentPreviewProps>;

package/dist/src/components/PageThumbnail/PageThumbnail.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+/**
+ * Props for a selectable page thumbnail tile.
+ */
+export interface PageThumbnailProps {
+    /** 1-based page number displayed by the tile. */
+    pageNum: number;
+    /** Called when the tile or its checkbox selects/deselects the page. */
+    onSelectPage: (pageNum: number) => void;
+    /** Whether this page is currently selected. */
+    isSelected: boolean;
+    /** Whether thumbnail content is currently loading. */
+    isLoading: boolean;
+    /** Enables checkbox-driven multi-select mode. */
+    isMultiselect?: boolean;
+    /** Optional thumbnail image URL for the page. */
+    thumbnailUrl?: string | null;
+    /** Optional additional class name for the root element. */
+    className?: string;
+}
+/**
+ * Page thumbnail tile with optional multi-select support and loading overlay.
+ */
+export declare const PageThumbnail: FC<PageThumbnailProps>;

package/dist/src/components/PdfPreviewLoader/PdfPreviewLoader.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+/**
+ * Props for the PDF preview loading skeleton overlay.
+ */
+export interface PdfPreviewLoaderProps {
+    /** Additional class name for the loader wrapper. */
+    className?: string;
+    /** Accessible label announced by assistive technologies. */
+    ariaLabel?: string;
+}
+/**
+ * Skeleton placeholder used while PDF content is loading.
+ */
+export declare const PdfPreviewLoader: FC<PdfPreviewLoaderProps>;