@peeekpage/viewer 0.3.16 → 0.3.17

package/dist/index.js

@@ -1,4 +1,4 @@
-import { jsxs as v, jsx as a, Fragment as Ze } from "react/jsx-runtime";
+import { jsxs as y, jsx as a, Fragment as Ze } from "react/jsx-runtime";
 import { useState as w, useRef as O, useEffect as T, useCallback as S, useMemo as Ue } from "react";
 const je = /* @__PURE__ */ new Set(["http:", "https:"]);
 function D(t) {
@@ -262,7 +262,7 @@ function st(t) {
     onToggleFullscreen: P,
     onAbout: Z
   } = t;
-  return /* @__PURE__ */ v("div", { className: "peeek__toolbar", children: [
+  return /* @__PURE__ */ y("div", { className: "peeek__toolbar", children: [
     /* @__PURE__ */ a("span", { className: "peeek__label", children: n }),
     h.bar && /* @__PURE__ */ a("div", { className: "peeek__scrubber", "aria-hidden": !0, children: /* @__PURE__ */ a("div", { className: "peeek__scrubber-fill", style: { width: `${r}%` } }) }),
     /* @__PURE__ */ a(
@@ -349,7 +349,7 @@ function it({ pages: t, layout: e, rtl: n, activePages: r, onJump: l }) {
   const c = t.length, p = new Set(r), b = ae(c, e);
   return /* @__PURE__ */ a("div", { className: "peeek__thumbs", role: "group", "aria-label": "Pages", children: Array.from({ length: b }, (d, i) => {
     const h = he(i, c, e), _ = h.length === 2;
-    return /* @__PURE__ */ v("div", { className: "peeek__thumb-group", children: [
+    return /* @__PURE__ */ y("div", { className: "peeek__thumb-group", children: [
       h.map((u, f) => {
         let s = "";
         return _ && (s = (n ? f === 1 : f === 0) ? " peeek__thumb--flat-right" : " peeek__thumb--flat-left"), /* @__PURE__ */ a(
@@ -385,7 +385,7 @@ function ct(t) {
     isFullscreen: _,
     onToggleFullscreen: u,
     onAbout: f
-  } = t, s = e.length, P = ae(s, r), N = be() || !p, [W, z] = w(0), [C, U] = w(1), [X, y] = w(!1), [g, $] = w({ x: 0, y: 0 }), [F, R] = w(!1), G = O(null), oe = O(null), [k, le] = w(null), se = O(null), [_e, ke] = w(0.707);
+  } = t, s = e.length, P = ae(s, r), N = be() || !p, [W, z] = w(0), [C, U] = w(1), [X, v] = w(!1), [g, $] = w({ x: 0, y: 0 }), [A, R] = w(!1), G = O(null), oe = O(null), [k, le] = w(null), se = O(null), [_e, ke] = w(0.707);
   T(() => {
     if (!e[0]) return;
     const o = new globalThis.Image();
@@ -393,7 +393,7 @@ function ct(t) {
       o.naturalWidth && o.naturalHeight && ke(o.naturalWidth / o.naturalHeight);
     }, o.src = e[0];
   }, [e]);
-  const A = ee(W, s, r), ye = A <= 0, q = A >= P - 1, E = S(
+  const F = ee(W, s, r), ye = F <= 0, q = F >= P - 1, E = S(
     (o) => {
       k || z((m) => {
         const x = ee(m + o, s, r);
@@ -434,14 +434,14 @@ function ct(t) {
     if (!b || q) return;
     const o = setTimeout(() => E(1), d);
     return () => clearTimeout(o);
-  }, [b, d, q, A, E]);
+  }, [b, d, q, F, E]);
   const Te = () => U((o) => Math.min(ne, o + me)), Ce = () => U((o) => Math.max(te, o - me)), K = S((o, m, x) => {
     const Q = oe.current;
     if (!Q || x <= 1) return { x: 0, y: 0 };
     const ue = (x - 1) * Q.clientWidth / 2, de = (x - 1) * Q.clientHeight / 2;
     return { x: Math.max(-ue, Math.min(ue, o)), y: Math.max(-de, Math.min(de, m)) };
   }, []);
-  T(() => $((o) => K(o.x, o.y, C)), [C, K]), T(() => $({ x: 0, y: 0 }), [A]);
+  T(() => $((o) => K(o.x, o.y, C)), [C, K]), T(() => $({ x: 0, y: 0 }), [F]);
   const xe = (o) => {
     C <= 1 || (G.current = { x: o.clientX, y: o.clientY, px: g.x, py: g.y }, R(!0), o.currentTarget.setPointerCapture(o.pointerId));
   }, Ie = (o) => {
@@ -455,12 +455,12 @@ function ct(t) {
       } catch {
       }
     }
-  }, j = he(A, s, r), J = j[0] ?? 0, Pe = r === "double" && j.length === 2 ? `${j[0] + 1} - ${j[1] + 1} / ${s}` : `${J + 1} / ${s}`, $e = P <= 1 ? 100 : A / (P - 1) * 100, Fe = n.prev, Ae = n.next, Me = k ? k.to : A, L = Y(Me, s, r), Se = L.left < 0 && L.right >= 0, ze = L.left >= 0 && L.right < 0, Ee = L.left >= 0 && L.right >= 0, Le = Se ? "-25%" : ze ? "25%" : "0%", M = Y(A, s, r), B = k ? Y(k.to, s, r) : M, Oe = k ? k.dir === 1 ? M.right >= 0 ? M.right : M.left : M.left >= 0 ? M.left : M.right : J, Re = k ? k.dir === 1 ? B.left >= 0 ? B.left : B.right : B.right >= 0 ? B.right : B.left : J, Be = k ? k.dir === 1 ? "left" : "right" : null, ce = (o) => o === Be ? M[o] : L[o], De = [
+  }, j = he(F, s, r), J = j[0] ?? 0, Pe = r === "double" && j.length === 2 ? `${j[0] + 1} - ${j[1] + 1} / ${s}` : `${J + 1} / ${s}`, $e = P <= 1 ? 100 : F / (P - 1) * 100, Ae = n.prev, Fe = n.next, Me = k ? k.to : F, L = Y(Me, s, r), Se = L.left < 0 && L.right >= 0, ze = L.left >= 0 && L.right < 0, Ee = L.left >= 0 && L.right >= 0, Le = Se ? "-25%" : ze ? "25%" : "0%", M = Y(F, s, r), B = k ? Y(k.to, s, r) : M, Oe = k ? k.dir === 1 ? M.right >= 0 ? M.right : M.left : M.left >= 0 ? M.left : M.right : J, Re = k ? k.dir === 1 ? B.left >= 0 ? B.left : B.right : B.right >= 0 ? B.right : B.left : J, Be = k ? k.dir === 1 ? "left" : "right" : null, ce = (o) => o === Be ? M[o] : L[o], De = [
     ["left", ce("left")],
     ["right", ce("right")]
   ];
-  return /* @__PURE__ */ v(Ze, { children: [
-    /* @__PURE__ */ v(
+  return /* @__PURE__ */ y(Ze, { children: [
+    /* @__PURE__ */ y(
       "div",
       {
         ref: oe,
@@ -474,7 +474,7 @@ function ct(t) {
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--prev",
-              "aria-label": Fe,
+              "aria-label": Ae,
               disabled: ye,
               onClick: () => E(-1),
               children: "‹"
@@ -486,13 +486,13 @@ function ct(t) {
               className: `peeek__zoom${C > 1 ? " peeek__zoom--pannable" : ""}`,
               style: {
                 transform: `translate(${g.x}px, ${g.y}px) scale(${C})`,
-                transition: N || F ? "none" : void 0
+                transition: N || A ? "none" : void 0
               },
               onPointerDown: xe,
               onPointerMove: Ie,
               onPointerUp: ie,
               onPointerCancel: ie,
-              children: /* @__PURE__ */ v(
+              children: /* @__PURE__ */ y(
                 "div",
                 {
                   className: `peeek__spread${c ? " peeek--shadows" : ""}${Ee ? " peeek__spread--pair" : ""}`,
@@ -518,7 +518,7 @@ function ct(t) {
                         o
                       );
                     }),
-                    k && /* @__PURE__ */ v(
+                    k && /* @__PURE__ */ y(
                       "div",
                       {
                         ref: se,
@@ -540,7 +540,7 @@ function ct(t) {
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--next",
-              "aria-label": Ae,
+              "aria-label": Fe,
               disabled: q,
               onClick: () => E(1),
               children: "›"
@@ -565,7 +565,7 @@ function ct(t) {
         onZoomIn: Te,
         onZoomOut: Ce,
         onZoomSet: (o) => U(Math.min(ne, Math.max(te, o))),
-        onToggleThumbs: () => y((o) => !o),
+        onToggleThumbs: () => v((o) => !o),
         onToggleFullscreen: u,
         onAbout: f
       }
@@ -605,35 +605,35 @@ function ft(t) {
     onAbout: _,
     show: u
   } = t, f = e.length, [s, P] = w(0), Z = be(), N = S(
-    (y) => P((g) => Math.max(0, Math.min(f - 1, g + y))),
+    (v) => P((g) => Math.max(0, Math.min(f - 1, g + v))),
     [f]
   ), W = s <= 0, z = s >= f - 1, C = O([]);
   T(() => {
-    var y, g;
-    (g = (y = C.current[s]) == null ? void 0 : y.scrollIntoView) == null || g.call(y, { behavior: "smooth", inline: "center", block: "nearest" });
+    var v, g;
+    (g = (v = C.current[s]) == null ? void 0 : v.scrollIntoView) == null || g.call(v, { behavior: "smooth", inline: "center", block: "nearest" });
   }, [s]), T(() => {
     if (!p || Z || z) return;
-    const y = setTimeout(() => N(1), b);
-    return () => clearTimeout(y);
+    const v = setTimeout(() => N(1), b);
+    return () => clearTimeout(v);
   }, [p, b, Z, z, s, N]);
   const U = S(
-    (y) => {
-      y.key === "ArrowRight" ? N(c ? -1 : 1) : y.key === "ArrowLeft" && N(c ? 1 : -1);
+    (v) => {
+      v.key === "ArrowRight" ? N(c ? -1 : 1) : v.key === "ArrowLeft" && N(c ? 1 : -1);
     },
     [N, c]
   ), X = ut(r, l);
-  return /* @__PURE__ */ v("div", { className: "peeek__cf", children: [
-    /* @__PURE__ */ v("div", { className: "peeek__cf-header", children: [
+  return /* @__PURE__ */ y("div", { className: "peeek__cf", children: [
+    /* @__PURE__ */ y("div", { className: "peeek__cf-header", children: [
       /* @__PURE__ */ a("span", { className: "peeek__cf-badge", children: X }),
-      /* @__PURE__ */ v("div", { className: "peeek__cf-meta", children: [
+      /* @__PURE__ */ y("div", { className: "peeek__cf-meta", children: [
         /* @__PURE__ */ a("span", { className: "peeek__cf-name", children: r }),
-        /* @__PURE__ */ v("span", { className: "peeek__cf-count", children: [
+        /* @__PURE__ */ y("span", { className: "peeek__cf-count", children: [
           f,
           " ",
           f === 1 ? n.page : n.pages
         ] })
       ] }),
-      /* @__PURE__ */ v("span", { className: "peeek__cf-indicator", children: [
+      /* @__PURE__ */ y("span", { className: "peeek__cf-indicator", children: [
         s + 1,
         " / ",
         f
@@ -672,7 +672,7 @@ function ft(t) {
         }
       )
     ] }),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ y(
       "div",
       {
         className: "peeek__cf-stage",
@@ -690,20 +690,20 @@ function ft(t) {
               children: "‹"
             }
           ),
-          e.map((y, g) => {
+          e.map((v, g) => {
             const $ = g - s;
             if (Math.abs($) > 1) return null;
-            const F = $ === 0, R = F && u.fullscreen;
+            const A = $ === 0, R = A && u.fullscreen;
             return /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
-                className: `peeek__cf-card${F ? " peeek__cf-card--center" : ""}${R ? " peeek__cf-card--zoom" : ""}`,
+                className: `peeek__cf-card${A ? " peeek__cf-card--center" : ""}${R ? " peeek__cf-card--zoom" : ""}`,
                 style: dt($, c),
-                tabIndex: F ? 0 : -1,
+                tabIndex: A ? 0 : -1,
                 "aria-label": R ? n.openFullscreen : `Go to page ${g + 1}`,
                 onClick: () => R ? h() : P(g),
-                children: /* @__PURE__ */ a("img", { src: y, alt: F ? `Page ${g + 1}` : "", loading: "lazy", referrerPolicy: "no-referrer" })
+                children: /* @__PURE__ */ a("img", { src: v, alt: A ? `Page ${g + 1}` : "", loading: "lazy", referrerPolicy: "no-referrer" })
               },
               g
             );
@@ -722,13 +722,13 @@ function ft(t) {
         ]
       }
     ),
-    u.thumbnails && /* @__PURE__ */ a("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((y, g) => {
+    u.thumbnails && /* @__PURE__ */ a("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((v, g) => {
       const $ = g === s;
-      return /* @__PURE__ */ v(
+      return /* @__PURE__ */ y(
         "button",
         {
-          ref: (F) => {
-            C.current[g] = F;
+          ref: (A) => {
+            C.current[g] = A;
           },
           type: "button",
           className: `peeek__cf-thumb${$ ? " peeek__cf-thumb--active" : ""}`,
@@ -736,7 +736,7 @@ function ft(t) {
           "aria-current": $ ? "page" : void 0,
           onClick: () => P(g),
           children: [
-            /* @__PURE__ */ a("img", { src: y, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }),
+            /* @__PURE__ */ a("img", { src: v, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }),
             /* @__PURE__ */ a("span", { className: "peeek__cf-thumb-num", children: String(g + 1).padStart(2, "0") })
           ]
         },
@@ -760,7 +760,7 @@ function gt({ strings: t, onClose: e }) {
       l.key === "Escape" && e();
     };
     return document.addEventListener("keydown", r), () => document.removeEventListener("keydown", r);
-  }, [e]), /* @__PURE__ */ a("div", { className: "peeek__about-backdrop", onClick: e, children: /* @__PURE__ */ v(
+  }, [e]), /* @__PURE__ */ a("div", { className: "peeek__about-backdrop", onClick: e, children: /* @__PURE__ */ y(
     "div",
     {
       role: "dialog",
@@ -780,31 +780,40 @@ function gt({ strings: t, onClose: e }) {
             children: "×"
           }
         ),
-        /* @__PURE__ */ v(
+        /* @__PURE__ */ y(
           "svg",
           {
             className: "peeek__about-mark",
-            width: "40",
-            height: "40",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "1.6",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
+            width: "44",
+            height: "44",
+            viewBox: "0 0 256 256",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ a("path", { d: "M7 3h7l4 4v11a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" }),
-              /* @__PURE__ */ a("path", { d: "M14 3v4h4" }),
-              /* @__PURE__ */ a("path", { d: "M4 7v13a1 1 0 0 0 1 1h11" })
+              /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ y("radialGradient", { id: "peeek-about-orb", cx: "38%", cy: "30%", r: "80%", children: [
+                /* @__PURE__ */ a("stop", { offset: "0%", stopColor: "#9aa2e6" }),
+                /* @__PURE__ */ a("stop", { offset: "55%", stopColor: "#6E79D6" }),
+                /* @__PURE__ */ a("stop", { offset: "100%", stopColor: "#535cc0" })
+              ] }) }),
+              /* @__PURE__ */ a("circle", { cx: "128", cy: "128", r: "128", fill: "url(#peeek-about-orb)" }),
+              /* @__PURE__ */ a(
+                "path",
+                {
+                  d: "M90 196 V70 H140 A38 38 0 0 1 140 146 H90",
+                  fill: "none",
+                  stroke: "#fff",
+                  strokeWidth: "30",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
             ]
           }
         ),
         /* @__PURE__ */ a("div", { className: "peeek__about-name", children: "Peeek Viewer" }),
         /* @__PURE__ */ a("div", { className: "peeek__about-tagline", children: t.aboutTagline }),
-        /* @__PURE__ */ v("div", { className: "peeek__about-version", children: [
+        /* @__PURE__ */ y("div", { className: "peeek__about-version", children: [
           "v",
-          "0.3.16"
+          "0.3.17"
         ] }),
         /* @__PURE__ */ a("p", { className: "peeek__about-desc", children: t.aboutDescription })
       ]
@@ -828,7 +837,7 @@ function ht(t) {
     overview: e.pagesOverview,
     about: e.aboutButton
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: r,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peeekpage/viewer",
-  "version": "0.3.16",
+  "version": "0.3.17",
   "description": "PeeekViewer: embeddable document viewer (flip and coverflow) for peeek.page.",
   "type": "module",
   "license": "UNLICENSED",