@peeekpage/viewer 0.3.16 → 0.3.18

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 h, 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) {
@@ -165,9 +165,9 @@ function at(t, e) {
   return T(() => {
     let i = !1;
     if (r("loading"), c(null), b(null), !t) return;
-    const h = () => {
+    const _ = () => {
       d.current !== null && (clearTimeout(d.current), d.current = null);
-    }, _ = async () => {
+    }, k = async () => {
       let u;
       try {
         const s = await fetch(t);
@@ -184,10 +184,10 @@ function at(t, e) {
         b(f.error), r("error");
         return;
       }
-      c(f.value), r("ready"), f.value.status === "wip" && (d.current = setTimeout(_, e));
+      c(f.value), r("ready"), f.value.status === "wip" && (d.current = setTimeout(k, e));
     };
-    return _(), () => {
-      i = !0, h();
+    return k(), () => {
+      i = !0, _();
     };
   }, [t, e]), { state: n, manifest: l, error: p };
 }
@@ -254,17 +254,17 @@ function st(t) {
     thumbsOpen: b,
     isFullscreen: d,
     downloadUrl: i,
-    show: h,
-    onZoomIn: _,
+    show: _,
+    onZoomIn: k,
     onZoomOut: u,
     onZoomSet: f,
     onToggleThumbs: s,
-    onToggleFullscreen: P,
+    onToggleFullscreen: z,
     onAbout: Z
   } = t;
-  return /* @__PURE__ */ v("div", { className: "peeek__toolbar", children: [
+  return /* @__PURE__ */ h("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}%` } }) }),
+    _.bar && /* @__PURE__ */ a("div", { className: "peeek__scrubber", "aria-hidden": !0, children: /* @__PURE__ */ a("div", { className: "peeek__scrubber-fill", style: { width: `${r}%` } }) }),
     /* @__PURE__ */ a(
       "button",
       {
@@ -295,11 +295,11 @@ function st(t) {
         className: "peeek__btn",
         "aria-label": e.zoomIn,
         disabled: l >= p,
-        onClick: _,
+        onClick: k,
         children: "+"
       }
     ),
-    h.thumbnails && /* @__PURE__ */ a(
+    _.thumbnails && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -322,18 +322,18 @@ function st(t) {
         children: "↓"
       }
     ),
-    h.fullscreen && /* @__PURE__ */ a(
+    _.fullscreen && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         className: `peeek__btn${d ? " peeek__btn--active" : ""}`,
         "aria-label": e.fullscreen,
         "aria-pressed": d,
-        onClick: P,
+        onClick: z,
         children: "⛶"
       }
     ),
-    h.about && /* @__PURE__ */ a(
+    _.about && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -348,11 +348,11 @@ function st(t) {
 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: [
-      h.map((u, f) => {
+    const _ = he(i, c, e), k = _.length === 2;
+    return /* @__PURE__ */ h("div", { className: "peeek__thumb-group", children: [
+      _.map((u, f) => {
         let s = "";
-        return _ && (s = (n ? f === 1 : f === 0) ? " peeek__thumb--flat-right" : " peeek__thumb--flat-left"), /* @__PURE__ */ a(
+        return k && (s = (n ? f === 1 : f === 0) ? " peeek__thumb--flat-right" : " peeek__thumb--flat-left"), /* @__PURE__ */ a(
           "button",
           {
             type: "button",
@@ -365,7 +365,7 @@ function it({ pages: t, layout: e, rtl: n, activePages: r, onJump: l }) {
           u
         );
       }),
-      /* @__PURE__ */ a("span", { className: "peeek__thumb-badge", "aria-hidden": !0, children: h.map((u) => u + 1).join("-") })
+      /* @__PURE__ */ a("span", { className: "peeek__thumb-badge", "aria-hidden": !0, children: _.map((u) => u + 1).join("-") })
     ] }, i);
   }) });
 }
@@ -381,11 +381,11 @@ function ct(t) {
     autoTransition: b,
     autoTransitionInterval: d,
     show: i,
-    downloadUrl: h,
-    isFullscreen: _,
+    downloadUrl: _,
+    isFullscreen: k,
     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, z = ae(s, r), N = be() || !p, [W, M] = w(0), [C, U] = w(1), [X, v] = w(!1), [g, P] = w({ x: 0, y: 0 }), [A, R] = w(!1), G = O(null), oe = O(null), [y, le] = w(null), se = O(null), [_e, ke] = w(0.707);
   T(() => {
     if (!e[0]) return;
     const o = new globalThis.Image();
@@ -393,35 +393,35 @@ 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 $ = ee(W, s, r), ye = $ <= 0, q = $ >= z - 1, E = S(
     (o) => {
-      k || z((m) => {
+      y || M((m) => {
         const x = ee(m + o, s, r);
         return x === m ? m : N ? x : (le({ dir: o, to: x }), m);
       });
     },
-    [s, r, N, k]
+    [s, r, N, y]
   ), ve = S(() => {
-    le((o) => (o && z(o.to), null));
+    le((o) => (o && M(o.to), null));
   }, []);
   T(() => {
-    if (!k) return;
+    if (!y) return;
     const o = se.current;
     if (!o) return;
     o.style.transform = "rotateY(0deg)";
     let m = 0;
     const x = requestAnimationFrame(() => {
       m = requestAnimationFrame(() => {
-        o.style.transform = `rotateY(${k.dir === 1 ? -180 : 180}deg)`;
+        o.style.transform = `rotateY(${y.dir === 1 ? -180 : 180}deg)`;
       });
     });
     return () => {
       cancelAnimationFrame(x), cancelAnimationFrame(m);
     };
-  }, [k]);
+  }, [y]);
   const we = S(
     (o) => {
-      z(ee(lt(o, r), s, r));
+      M(ee(lt(o, r), s, r));
     },
     [s, r]
   ), Ne = S(
@@ -434,19 +434,19 @@ function ct(t) {
     if (!b || q) return;
     const o = setTimeout(() => E(1), d);
     return () => clearTimeout(o);
-  }, [b, d, q, A, E]);
+  }, [b, d, q, $, 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(() => P((o) => K(o.x, o.y, C)), [C, K]), T(() => P({ x: 0, y: 0 }), [$]);
   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) => {
     const m = G.current;
-    m && $(K(m.px + (o.clientX - m.x), m.py + (o.clientY - m.y), C));
+    m && P(K(m.px + (o.clientX - m.x), m.py + (o.clientY - m.y), C));
   }, ie = (o) => {
     if (G.current) {
       G.current = null, R(!1);
@@ -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($, s, r), J = j[0] ?? 0, ze = r === "double" && j.length === 2 ? `${j[0] + 1} - ${j[1] + 1} / ${s}` : `${J + 1} / ${s}`, Pe = z <= 1 ? 100 : $ / (z - 1) * 100, Ae = n.prev, $e = n.next, Fe = y ? y.to : $, L = Y(Fe, s, r), Se = L.left < 0 && L.right >= 0, Me = L.left >= 0 && L.right < 0, Ee = L.left >= 0 && L.right >= 0, Le = Se ? "-25%" : Me ? "25%" : "0%", F = Y($, s, r), B = y ? Y(y.to, s, r) : F, Oe = y ? y.dir === 1 ? F.right >= 0 ? F.right : F.left : F.left >= 0 ? F.left : F.right : J, Re = y ? y.dir === 1 ? B.left >= 0 ? B.left : B.right : B.right >= 0 ? B.right : B.left : J, Be = y ? y.dir === 1 ? "left" : "right" : null, ce = (o) => o === Be ? F[o] : L[o], De = [
     ["left", ce("left")],
     ["right", ce("right")]
   ];
-  return /* @__PURE__ */ v(Ze, { children: [
-    /* @__PURE__ */ v(
+  return /* @__PURE__ */ h(Ze, { children: [
+    /* @__PURE__ */ h(
       "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,20 +486,20 @@ 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__ */ h(
                 "div",
                 {
                   className: `peeek__spread${c ? " peeek--shadows" : ""}${Ee ? " peeek__spread--pair" : ""}`,
                   style: { transform: `translateX(${Le})` },
                   children: [
                     De.map(([o, m]) => {
-                      const x = m >= 0 && i.fullscreen && !_ && !k && C === 1;
+                      const x = m >= 0 && i.fullscreen && !k && !y && C === 1;
                       return /* @__PURE__ */ a(
                         "div",
                         {
@@ -518,11 +518,11 @@ function ct(t) {
                         o
                       );
                     }),
-                    k && /* @__PURE__ */ v(
+                    y && /* @__PURE__ */ h(
                       "div",
                       {
                         ref: se,
-                        className: `peeek__leaf peeek__leaf--${k.dir === 1 ? "fwd" : "back"}`,
+                        className: `peeek__leaf peeek__leaf--${y.dir === 1 ? "fwd" : "back"}`,
                         onTransitionEnd: ve,
                         children: [
                           /* @__PURE__ */ a("div", { className: "peeek__leaf-face peeek__leaf-face--front", children: /* @__PURE__ */ a("img", { src: e[Oe], alt: "", referrerPolicy: "no-referrer" }) }),
@@ -540,7 +540,7 @@ function ct(t) {
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--next",
-              "aria-label": Ae,
+              "aria-label": $e,
               disabled: q,
               onClick: () => E(1),
               children: "›"
@@ -553,19 +553,19 @@ function ct(t) {
       st,
       {
         strings: n,
-        label: Pe,
-        progress: $e,
+        label: ze,
+        progress: Pe,
         zoom: C,
         minZoom: te,
         maxZoom: ne,
         thumbsOpen: X,
-        isFullscreen: _,
-        downloadUrl: h,
+        isFullscreen: k,
+        downloadUrl: _,
         show: { bar: i.bar, fullscreen: i.fullscreen, thumbnails: i.thumbnails && i.overview, about: i.about },
         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
       }
@@ -601,39 +601,39 @@ function ft(t) {
     autoTransitionInterval: b,
     downloadUrl: d,
     isFullscreen: i,
-    onToggleFullscreen: h,
-    onAbout: _,
+    onToggleFullscreen: _,
+    onAbout: k,
     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))),
+  } = t, f = e.length, [s, z] = w(0), Z = be(), N = S(
+    (v) => z((g) => Math.max(0, Math.min(f - 1, g + v))),
     [f]
-  ), W = s <= 0, z = s >= f - 1, C = O([]);
+  ), W = s <= 0, M = 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);
-  }, [p, b, Z, z, s, N]);
+    if (!p || Z || M) return;
+    const v = setTimeout(() => N(1), b);
+    return () => clearTimeout(v);
+  }, [p, b, Z, M, 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__ */ h("div", { className: "peeek__cf", children: [
+    /* @__PURE__ */ h("div", { className: "peeek__cf-header", children: [
       /* @__PURE__ */ a("span", { className: "peeek__cf-badge", children: X }),
-      /* @__PURE__ */ v("div", { className: "peeek__cf-meta", children: [
+      /* @__PURE__ */ h("div", { className: "peeek__cf-meta", children: [
         /* @__PURE__ */ a("span", { className: "peeek__cf-name", children: r }),
-        /* @__PURE__ */ v("span", { className: "peeek__cf-count", children: [
+        /* @__PURE__ */ h("span", { className: "peeek__cf-count", children: [
           f,
           " ",
           f === 1 ? n.page : n.pages
         ] })
       ] }),
-      /* @__PURE__ */ v("span", { className: "peeek__cf-indicator", children: [
+      /* @__PURE__ */ h("span", { className: "peeek__cf-indicator", children: [
         s + 1,
         " / ",
         f
@@ -657,7 +657,7 @@ function ft(t) {
           className: `peeek__btn${i ? " peeek__btn--active" : ""}`,
           "aria-label": n.fullscreen,
           "aria-pressed": i,
-          onClick: h,
+          onClick: _,
           children: "⛶"
         }
       ),
@@ -667,12 +667,12 @@ function ft(t) {
           type: "button",
           className: "peeek__btn",
           "aria-label": n.about,
-          onClick: _,
+          onClick: k,
           children: "?"
         }
       )
     ] }),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ h(
       "div",
       {
         className: "peeek__cf-stage",
@@ -690,20 +690,20 @@ function ft(t) {
               children: "‹"
             }
           ),
-          e.map((y, g) => {
-            const $ = g - s;
-            if (Math.abs($) > 1) return null;
-            const F = $ === 0, R = F && u.fullscreen;
+          e.map((v, g) => {
+            const P = g - s;
+            if (Math.abs(P) > 1) return null;
+            const A = P === 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" : ""}`,
-                style: dt($, c),
-                tabIndex: F ? 0 : -1,
+                className: `peeek__cf-card${A ? " peeek__cf-card--center" : ""}${R ? " peeek__cf-card--zoom" : ""}`,
+                style: dt(P, c),
+                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" })
+                onClick: () => R ? _() : z(g),
+                children: /* @__PURE__ */ a("img", { src: v, alt: A ? `Page ${g + 1}` : "", loading: "lazy", referrerPolicy: "no-referrer" })
               },
               g
             );
@@ -714,7 +714,7 @@ function ft(t) {
               type: "button",
               className: "peeek__arrow peeek__arrow--next",
               "aria-label": n.next,
-              disabled: z,
+              disabled: M,
               onClick: () => N(1),
               children: "›"
             }
@@ -722,21 +722,21 @@ function ft(t) {
         ]
       }
     ),
-    u.thumbnails && /* @__PURE__ */ a("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((y, g) => {
-      const $ = g === s;
-      return /* @__PURE__ */ v(
+    u.thumbnails && /* @__PURE__ */ a("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((v, g) => {
+      const P = g === s;
+      return /* @__PURE__ */ h(
         "button",
         {
-          ref: (F) => {
-            C.current[g] = F;
+          ref: (A) => {
+            C.current[g] = A;
           },
           type: "button",
-          className: `peeek__cf-thumb${$ ? " peeek__cf-thumb--active" : ""}`,
+          className: `peeek__cf-thumb${P ? " peeek__cf-thumb--active" : ""}`,
           "aria-label": `Go to page ${g + 1}`,
-          "aria-current": $ ? "page" : void 0,
-          onClick: () => P(g),
+          "aria-current": P ? "page" : void 0,
+          onClick: () => z(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") })
           ]
         },
@@ -750,7 +750,21 @@ function mt({ logo: t, logoLink: e }) {
   const n = /* @__PURE__ */ a("img", { src: t, alt: "Logo", loading: "lazy", referrerPolicy: "no-referrer" });
   return /* @__PURE__ */ a("div", { className: "peeek__branding", children: e ? /* @__PURE__ */ a("a", { href: e, target: "_blank", rel: "noopener noreferrer", children: n }) : n });
 }
-function gt({ strings: t, onClose: e }) {
+const gt = [
+  { top: "12%", left: "10%", size: 3, v: "A", dur: 13, delay: 0 },
+  { top: "22%", left: "82%", size: 2, v: "B", dur: 16, delay: 2 },
+  { top: "40%", left: "16%", size: 2, v: "C", dur: 12, delay: 1 },
+  { top: "68%", left: "8%", size: 3, v: "A", dur: 18, delay: 3 },
+  { top: "78%", left: "24%", size: 2, v: "B", dur: 15, delay: 0 },
+  { top: "58%", left: "88%", size: 3, v: "C", dur: 14, delay: 4 },
+  { top: "84%", left: "70%", size: 2, v: "A", dur: 17, delay: 1 },
+  { top: "34%", left: "92%", size: 2, v: "B", dur: 13, delay: 2 },
+  { top: "50%", left: "50%", size: 2, v: "C", dur: 16, delay: 5 },
+  { top: "88%", left: "46%", size: 3, v: "A", dur: 15, delay: 0 },
+  { top: "16%", left: "50%", size: 2, v: "B", dur: 14, delay: 3 },
+  { top: "62%", left: "34%", size: 2, v: "C", dur: 12, delay: 2 }
+];
+function pt({ strings: t, onClose: e }) {
   const n = O(null);
   return T(() => {
     var r;
@@ -760,7 +774,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__ */ h(
     "div",
     {
       role: "dialog",
@@ -769,6 +783,20 @@ function gt({ strings: t, onClose: e }) {
       className: "peeek__about",
       onClick: (r) => r.stopPropagation(),
       children: [
+        /* @__PURE__ */ a("span", { className: "peeek__about-particles", "aria-hidden": "true", children: gt.map((r, l) => /* @__PURE__ */ a(
+          "span",
+          {
+            className: "peeek__about-particle",
+            style: {
+              top: r.top,
+              left: r.left,
+              width: r.size,
+              height: r.size,
+              animation: `peeekAboutDrift${r.v} ${r.dur}s ease-in-out ${r.delay}s infinite`
+            }
+          },
+          l
+        )) }),
         /* @__PURE__ */ a(
           "button",
           {
@@ -780,42 +808,56 @@ function gt({ strings: t, onClose: e }) {
             children: "×"
           }
         ),
-        /* @__PURE__ */ v(
-          "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",
-            "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("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: [
-          "v",
-          "0.3.16"
-        ] }),
-        /* @__PURE__ */ a("p", { className: "peeek__about-desc", children: t.aboutDescription })
+        /* @__PURE__ */ h("div", { className: "peeek__about-content", children: [
+          /* @__PURE__ */ h("div", { className: "peeek__about-orbwrap", children: [
+            /* @__PURE__ */ a("span", { className: "peeek__about-ring", "aria-hidden": "true" }),
+            /* @__PURE__ */ h(
+              "svg",
+              {
+                className: "peeek__about-mark",
+                width: "48",
+                height: "48",
+                viewBox: "0 0 256 256",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ a("defs", { children: /* @__PURE__ */ h("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__ */ h("div", { className: "peeek__about-version", children: [
+            "v",
+            "0.3.18"
+          ] }),
+          /* @__PURE__ */ a("p", { className: "peeek__about-desc", children: t.aboutDescription })
+        ] })
       ]
     }
   ) });
 }
-function ht(t) {
+function _t(t) {
   const e = tt(t), n = Qe(e.language), r = O(null), { isFullscreen: l, toggle: c } = ot(r), [p, b] = w(!1), d = t.pages !== void 0, i = Ue(
     () => d ? rt(t.pages, { filename: t.filename, mimeType: t.mimeType }) : null,
     [d, t.pages, t.filename, t.mimeType]
-  ), h = at(d ? null : e.src, e.pollInterval), _ = d ? i : h.manifest, u = d ? i ? "ready" : "loading" : h.state, f = {
+  ), _ = at(d ? null : e.src, e.pollInterval), k = d ? i : _.manifest, u = d ? i ? "ready" : "loading" : _.state, f = {
     "--peeek-accent": e.accentColor
   };
   e.background === "transparent" ? f["--peeek-bg"] = "transparent" : e.background === "color" && e.backgroundColor ? f["--peeek-bg"] = e.backgroundColor : e.background === "image" && e.backgroundImage && (f["--peeek-bg"] = `center / cover no-repeat url("${e.backgroundImage}")`);
@@ -828,7 +870,7 @@ function ht(t) {
     overview: e.pagesOverview,
     about: e.aboutButton
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ h(
     "div",
     {
       ref: r,
@@ -841,13 +883,13 @@ function ht(t) {
         /* @__PURE__ */ a(mt, { logo: e.logo, logoLink: e.logoLink }),
         u === "loading" && /* @__PURE__ */ a("div", { className: "peeek__state", children: n.loading }),
         u === "error" && /* @__PURE__ */ a("div", { className: "peeek__state", children: n.error }),
-        u === "ready" && _ && e.mode === "coverflow" && /* @__PURE__ */ a(
+        u === "ready" && k && e.mode === "coverflow" && /* @__PURE__ */ a(
           ft,
           {
-            pages: _.pages,
+            pages: k.pages,
             strings: n,
-            filename: _.metadata.filename,
-            mimeType: _.metadata.mimeType,
+            filename: k.metadata.filename,
+            mimeType: k.metadata.mimeType,
             rtl: e.rtl,
             autoTransition: e.autoTransition,
             autoTransitionInterval: e.autoTransitionInterval,
@@ -858,10 +900,10 @@ function ht(t) {
             show: { arrows: e.arrows, thumbnails: e.pagesOverview, fullscreen: e.fullscreen, about: e.aboutButton }
           }
         ),
-        u === "ready" && _ && e.mode === "flip" && /* @__PURE__ */ a(
+        u === "ready" && k && e.mode === "flip" && /* @__PURE__ */ a(
           ct,
           {
-            pages: _.pages,
+            pages: k.pages,
             strings: n,
             layout: e.layout,
             rtl: e.rtl,
@@ -876,11 +918,11 @@ function ht(t) {
             onAbout: () => b(!0)
           }
         ),
-        p && /* @__PURE__ */ a(gt, { strings: n, onClose: () => b(!1) })
+        p && /* @__PURE__ */ a(pt, { strings: n, onClose: () => b(!1) })
       ]
     }
   );
 }
 export {
-  ht as PeeekViewer
+  _t as PeeekViewer
 };

package/dist/peeekviewer.css

@@ -1 +1 @@
-.peeek{--peeek-accent: #6E79D6;--peeek-bg: #0b0b10;--peeek-surface: rgba(255, 255, 255, .06);--peeek-text: #f5f5fa;--peeek-radius: 16px;position:relative;display:flex;flex-direction:column;width:100%;color:var(--peeek-text);background:var(--peeek-bg);border-radius:var(--peeek-radius);overflow:hidden;font-family:ui-sans-serif,system-ui,sans-serif}.peeek__stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:24rem;padding:1.75rem 3rem;overflow:hidden;perspective:2000px}.peeek__zoom{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform-origin:center center}.peeek__zoom--pannable{cursor:grab;touch-action:none}.peeek__zoom--pannable:active{cursor:grabbing}.peeek__zoom--pannable img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.peeek__spread{position:relative;display:flex;width:100%;transition:transform .5s cubic-bezier(.6,.05,.3,.95);transform-style:preserve-3d}.peeek__page{position:relative;width:50%;aspect-ratio:var(--peeek-aspect, .707);background:#fff;overflow:hidden}.peeek__page--empty{background:transparent;box-shadow:none}.peeek__page--left{border-top-left-radius:8px;border-bottom-left-radius:8px}.peeek__page--right{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek__spread:not(.peeek__spread--pair) .peeek__page{border-radius:8px}.peeek__page img{display:block;width:100%;height:100%;object-fit:contain}.peeek__page-btn{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}.peeek--shadows .peeek__spread{box-shadow:0 24px 60px -24px #000000b3}.peeek--shadows.peeek__spread--pair .peeek__page--left{box-shadow:inset -30px 0 36px -22px #0009}.peeek--shadows.peeek__spread--pair .peeek__page--right{box-shadow:inset 30px 0 36px -22px #0009}.peeek--shadows.peeek__spread--pair .peeek__page--left:after,.peeek--shadows.peeek__spread--pair .peeek__page--right:after{content:"";position:absolute;top:0;bottom:0;width:14px;pointer-events:none}.peeek--shadows.peeek__spread--pair .peeek__page--left:after{right:0;background:linear-gradient(to right,#0000,#00000047)}.peeek--shadows.peeek__spread--pair .peeek__page--right:after{left:0;background:linear-gradient(to left,#0000,#00000047)}.peeek__leaf{position:absolute;top:0;width:50%;height:100%;z-index:3;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.55,.06,.3,.98);will-change:transform}.peeek__leaf--fwd{left:50%;transform-origin:left center}.peeek__leaf--back{right:50%;transform-origin:right center}.peeek__leaf-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;background:#fff;overflow:hidden}.peeek__leaf-face img{display:block;width:100%;height:100%;object-fit:contain}.peeek__leaf-face--back{transform:rotateY(180deg)}.peeek__leaf-face:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.15;animation:peeek-curl .62s cubic-bezier(.55,.06,.3,.98) forwards;background:linear-gradient(var(--peeek-curl-dir, to right),rgba(0,0,0,.34),rgba(0,0,0,0) 58%,rgba(255,255,255,.05))}.peeek__leaf--fwd .peeek__leaf-face:after{--peeek-curl-dir: to right}.peeek__leaf--back .peeek__leaf-face:after{--peeek-curl-dir: to left}.peeek__leaf-face--back:after{transform:scaleX(-1)}@keyframes peeek-curl{0%{opacity:.15}45%{opacity:1}to{opacity:.55}}.peeek__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;border-radius:9999px;background:#00000059;color:#fff;cursor:pointer}.peeek__arrow:disabled{opacity:.3;cursor:default}.peeek__arrow--prev{left:.75rem}.peeek__arrow--next{right:.75rem}.peeek__toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);font-size:14px}.peeek__scrubber{flex:1;height:2px;background:#ffffff26;border-radius:9999px;overflow:hidden}.peeek__scrubber-fill{height:100%;background:var(--peeek-accent)}.peeek__btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:8px;background:transparent;color:var(--peeek-text);cursor:pointer}.peeek__btn:disabled{opacity:.3;cursor:default}.peeek__btn--active{color:var(--peeek-accent)}.peeek__thumbs{display:flex;gap:.4rem;overflow-x:auto;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08)}.peeek__thumb-group{flex:0 0 auto;display:flex;gap:2px;position:relative}.peeek__thumb{flex:0 0 auto;width:4rem;height:5rem;padding:0;border:2px solid transparent;border-radius:6px;background:#fff;cursor:pointer;overflow:hidden}.peeek__thumb img{width:100%;height:100%;object-fit:contain}.peeek__thumb--active{border-color:var(--peeek-accent)}.peeek__thumb--flat-right{border-top-right-radius:0;border-bottom-right-radius:0}.peeek__thumb--flat-left{border-top-left-radius:0;border-bottom-left-radius:0}.peeek__branding{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem}.peeek__branding img{height:1.5rem;width:auto}.peeek__state{display:flex;align-items:center;justify-content:center;min-height:24rem;font-size:16px;color:var(--peeek-text)}.peeek[data-skin=minimal] .peeek__toolbar,.peeek[data-skin=minimal] .peeek__thumbs{border-top:none;background:#00000040}.peeek[data-skin=minimal] .peeek__arrow{background:#0003}.peeek[dir=rtl] .peeek__leaf{transform-origin:right center}.peeek__cf{display:flex;flex:1;flex-direction:column;min-height:0}.peeek__cf-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}.peeek__cf-badge{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.75rem;flex:0 0 auto;border-radius:6px;background:var(--peeek-accent);color:#fff;font-size:13px;font-weight:700}.peeek__cf-meta{display:flex;min-width:0;flex:1;flex-direction:column}.peeek__cf-name{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.peeek__cf-count{font-size:14px;opacity:.6}.peeek__cf-indicator{padding:.25rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-family:ui-monospace,monospace;font-size:14px}.peeek__cf-stage{position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-height:20rem;overflow:hidden;perspective:1400px}.peeek__cf-card{position:absolute;display:flex;max-width:55%;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;transition:transform .3s ease-out,opacity .3s ease-out}.peeek__cf-card--center{max-width:70%}.peeek__cf-card--zoom{cursor:zoom-in}.peeek__cf-card img{max-width:100%;max-height:19rem;border-radius:8px;background:#fff;object-fit:contain;box-shadow:0 18px 40px -12px #0009}.peeek__cf-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);scrollbar-width:none}.peeek__cf-thumbs::-webkit-scrollbar{display:none}.peeek__cf-thumb{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:.25rem;padding:.25rem;border:2px solid transparent;border-radius:8px;background:transparent;cursor:pointer}.peeek__cf-thumb img{width:3rem;height:4rem;border-radius:4px;background:#fff;object-fit:cover;opacity:.8}.peeek__cf-thumb--active{border-color:var(--peeek-accent);background:#ffffff0f}.peeek__cf-thumb--active img{opacity:1}.peeek__cf-thumb-num{font-family:ui-monospace,monospace;font-size:14px;opacity:.6}.peeek__cf-thumb--active .peeek__cf-thumb-num{color:var(--peeek-accent);opacity:1}.peeek:fullscreen .peeek__cf-card img{max-height:78vh}.peeek:fullscreen .peeek__spread{width:auto;height:100%}.peeek:fullscreen .peeek__page{width:auto;height:100%}.peeek[data-skin=minimal] .peeek__cf-header,.peeek[data-skin=minimal] .peeek__cf-thumbs{border-color:transparent;background:#00000040}.peeek[data-skin=showcase] .peeek__label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.peeek[data-skin=showcase] .peeek__scrubber{height:2px}.peeek[data-skin=showcase] .peeek__scrubber-fill{background:var(--peeek-accent)}.peeek[data-skin=showcase] .peeek__arrow{width:2.5rem;height:2.5rem;border-radius:9999px;background:#0000004d;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.peeek[data-skin=showcase] .peeek__arrow:hover{background:#00000080}.peeek__thumb-badge{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:4px;background:#000000b3;color:#fff;font-size:14px;font-weight:500;pointer-events:none}.peeek--fill-height{height:100%}.peeek--fill-height .peeek__stage{min-height:0}.peeek--fill-height .peeek__spread,.peeek--fill-height .peeek__page{width:auto;height:100%}.peeek[data-layout=double] .peeek__spread:not(.peeek__spread--pair) .peeek__page--right{border-radius:0 8px 8px 0}.peeek[data-layout=double] .peeek__spread:not(.peeek__spread--pair) .peeek__page--left{border-radius:8px 0 0 8px}.peeek[data-layout=double] .peeek__leaf--fwd .peeek__leaf-face--front{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek[data-layout=double] .peeek__leaf--fwd .peeek__leaf-face--back,.peeek[data-layout=double] .peeek__leaf--back .peeek__leaf-face--front{border-top-left-radius:8px;border-bottom-left-radius:8px}.peeek[data-layout=double] .peeek__leaf--back .peeek__leaf-face--back{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek[data-layout=single] .peeek__leaf-face{border-radius:8px}.peeek__about-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;align-items:safe center;justify-content:center;overflow-y:auto;padding:1rem;background:#06060c9e;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.peeek__about{position:relative;width:100%;max-width:360px;box-sizing:border-box;padding:1.75rem 1.5rem 1.25rem;text-align:center;color:var(--peeek-text);background:#16161f;border:1px solid rgba(255,255,255,.1);border-radius:var(--peeek-radius);box-shadow:0 24px 60px #00000080}.peeek__about-close{position:absolute;top:.5rem;right:.5rem;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:8px;background:transparent;color:var(--peeek-text);font-size:20px;line-height:1;cursor:pointer}.peeek__about-close:hover{background:#ffffff14}.peeek__about-mark{display:block;margin-inline:auto;color:var(--peeek-accent)}.peeek__about-name{margin-top:.5rem;font-size:20px;font-weight:700;letter-spacing:.01em}.peeek__about-tagline{margin-top:.25rem;font-size:14px;color:#f5f5fab3}.peeek__about-version{display:inline-block;margin-top:.75rem;padding:.15rem .6rem;font-size:14px;font-weight:600;color:var(--peeek-accent);background:#6e79d629;border-radius:9999px}.peeek__about-desc{margin:.9rem 0 0;font-size:14px;line-height:1.5;color:#f5f5fad1}
+.peeek{--peeek-accent: #6E79D6;--peeek-bg: #0b0b10;--peeek-surface: rgba(255, 255, 255, .06);--peeek-text: #f5f5fa;--peeek-radius: 16px;position:relative;display:flex;flex-direction:column;width:100%;color:var(--peeek-text);background:var(--peeek-bg);border-radius:var(--peeek-radius);overflow:hidden;font-family:ui-sans-serif,system-ui,sans-serif}.peeek__stage{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:24rem;padding:1.75rem 3rem;overflow:hidden;perspective:2000px}.peeek__zoom{display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform-origin:center center}.peeek__zoom--pannable{cursor:grab;touch-action:none}.peeek__zoom--pannable:active{cursor:grabbing}.peeek__zoom--pannable img{pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.peeek__spread{position:relative;display:flex;width:100%;transition:transform .5s cubic-bezier(.6,.05,.3,.95);transform-style:preserve-3d}.peeek__page{position:relative;width:50%;aspect-ratio:var(--peeek-aspect, .707);background:#fff;overflow:hidden}.peeek__page--empty{background:transparent;box-shadow:none}.peeek__page--left{border-top-left-radius:8px;border-bottom-left-radius:8px}.peeek__page--right{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek__spread:not(.peeek__spread--pair) .peeek__page{border-radius:8px}.peeek__page img{display:block;width:100%;height:100%;object-fit:contain}.peeek__page-btn{all:unset;display:block;width:100%;height:100%;cursor:zoom-in}.peeek--shadows .peeek__spread{box-shadow:0 24px 60px -24px #000000b3}.peeek--shadows.peeek__spread--pair .peeek__page--left{box-shadow:inset -30px 0 36px -22px #0009}.peeek--shadows.peeek__spread--pair .peeek__page--right{box-shadow:inset 30px 0 36px -22px #0009}.peeek--shadows.peeek__spread--pair .peeek__page--left:after,.peeek--shadows.peeek__spread--pair .peeek__page--right:after{content:"";position:absolute;top:0;bottom:0;width:14px;pointer-events:none}.peeek--shadows.peeek__spread--pair .peeek__page--left:after{right:0;background:linear-gradient(to right,#0000,#00000047)}.peeek--shadows.peeek__spread--pair .peeek__page--right:after{left:0;background:linear-gradient(to left,#0000,#00000047)}.peeek__leaf{position:absolute;top:0;width:50%;height:100%;z-index:3;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.55,.06,.3,.98);will-change:transform}.peeek__leaf--fwd{left:50%;transform-origin:left center}.peeek__leaf--back{right:50%;transform-origin:right center}.peeek__leaf-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;background:#fff;overflow:hidden}.peeek__leaf-face img{display:block;width:100%;height:100%;object-fit:contain}.peeek__leaf-face--back{transform:rotateY(180deg)}.peeek__leaf-face:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.15;animation:peeek-curl .62s cubic-bezier(.55,.06,.3,.98) forwards;background:linear-gradient(var(--peeek-curl-dir, to right),rgba(0,0,0,.34),rgba(0,0,0,0) 58%,rgba(255,255,255,.05))}.peeek__leaf--fwd .peeek__leaf-face:after{--peeek-curl-dir: to right}.peeek__leaf--back .peeek__leaf-face:after{--peeek-curl-dir: to left}.peeek__leaf-face--back:after{transform:scaleX(-1)}@keyframes peeek-curl{0%{opacity:.15}45%{opacity:1}to{opacity:.55}}.peeek__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:none;border-radius:9999px;background:#00000059;color:#fff;cursor:pointer}.peeek__arrow:disabled{opacity:.3;cursor:default}.peeek__arrow--prev{left:.75rem}.peeek__arrow--next{right:.75rem}.peeek__toolbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);font-size:14px}.peeek__scrubber{flex:1;height:2px;background:#ffffff26;border-radius:9999px;overflow:hidden}.peeek__scrubber-fill{height:100%;background:var(--peeek-accent)}.peeek__btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:8px;background:transparent;color:var(--peeek-text);cursor:pointer}.peeek__btn:disabled{opacity:.3;cursor:default}.peeek__btn--active{color:var(--peeek-accent)}.peeek__thumbs{display:flex;gap:.4rem;overflow-x:auto;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08)}.peeek__thumb-group{flex:0 0 auto;display:flex;gap:2px;position:relative}.peeek__thumb{flex:0 0 auto;width:4rem;height:5rem;padding:0;border:2px solid transparent;border-radius:6px;background:#fff;cursor:pointer;overflow:hidden}.peeek__thumb img{width:100%;height:100%;object-fit:contain}.peeek__thumb--active{border-color:var(--peeek-accent)}.peeek__thumb--flat-right{border-top-right-radius:0;border-bottom-right-radius:0}.peeek__thumb--flat-left{border-top-left-radius:0;border-bottom-left-radius:0}.peeek__branding{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem}.peeek__branding img{height:1.5rem;width:auto}.peeek__state{display:flex;align-items:center;justify-content:center;min-height:24rem;font-size:16px;color:var(--peeek-text)}.peeek[data-skin=minimal] .peeek__toolbar,.peeek[data-skin=minimal] .peeek__thumbs{border-top:none;background:#00000040}.peeek[data-skin=minimal] .peeek__arrow{background:#0003}.peeek[dir=rtl] .peeek__leaf{transform-origin:right center}.peeek__cf{display:flex;flex:1;flex-direction:column;min-height:0}.peeek__cf-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.08);font-size:14px}.peeek__cf-badge{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.75rem;flex:0 0 auto;border-radius:6px;background:var(--peeek-accent);color:#fff;font-size:13px;font-weight:700}.peeek__cf-meta{display:flex;min-width:0;flex:1;flex-direction:column}.peeek__cf-name{overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.peeek__cf-count{font-size:14px;opacity:.6}.peeek__cf-indicator{padding:.25rem .75rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-family:ui-monospace,monospace;font-size:14px}.peeek__cf-stage{position:relative;display:flex;flex:1;align-items:center;justify-content:center;min-height:20rem;overflow:hidden;perspective:1400px}.peeek__cf-card{position:absolute;display:flex;max-width:55%;align-items:center;justify-content:center;padding:0;border:none;background:transparent;cursor:pointer;transition:transform .3s ease-out,opacity .3s ease-out}.peeek__cf-card--center{max-width:70%}.peeek__cf-card--zoom{cursor:zoom-in}.peeek__cf-card img{max-width:100%;max-height:19rem;border-radius:8px;background:#fff;object-fit:contain;box-shadow:0 18px 40px -12px #0009}.peeek__cf-thumbs{display:flex;gap:.5rem;overflow-x:auto;padding:.75rem 1rem;border-top:1px solid rgba(255,255,255,.08);scrollbar-width:none}.peeek__cf-thumbs::-webkit-scrollbar{display:none}.peeek__cf-thumb{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:.25rem;padding:.25rem;border:2px solid transparent;border-radius:8px;background:transparent;cursor:pointer}.peeek__cf-thumb img{width:3rem;height:4rem;border-radius:4px;background:#fff;object-fit:cover;opacity:.8}.peeek__cf-thumb--active{border-color:var(--peeek-accent);background:#ffffff0f}.peeek__cf-thumb--active img{opacity:1}.peeek__cf-thumb-num{font-family:ui-monospace,monospace;font-size:14px;opacity:.6}.peeek__cf-thumb--active .peeek__cf-thumb-num{color:var(--peeek-accent);opacity:1}.peeek:fullscreen .peeek__cf-card img{max-height:78vh}.peeek:fullscreen .peeek__spread{width:auto;height:100%}.peeek:fullscreen .peeek__page{width:auto;height:100%}.peeek[data-skin=minimal] .peeek__cf-header,.peeek[data-skin=minimal] .peeek__cf-thumbs{border-color:transparent;background:#00000040}.peeek[data-skin=showcase] .peeek__label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px}.peeek[data-skin=showcase] .peeek__scrubber{height:2px}.peeek[data-skin=showcase] .peeek__scrubber-fill{background:var(--peeek-accent)}.peeek[data-skin=showcase] .peeek__arrow{width:2.5rem;height:2.5rem;border-radius:9999px;background:#0000004d;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.peeek[data-skin=showcase] .peeek__arrow:hover{background:#00000080}.peeek__thumb-badge{position:absolute;right:2px;bottom:2px;padding:0 4px;border-radius:4px;background:#000000b3;color:#fff;font-size:14px;font-weight:500;pointer-events:none}.peeek--fill-height{height:100%}.peeek--fill-height .peeek__stage{min-height:0}.peeek--fill-height .peeek__spread,.peeek--fill-height .peeek__page{width:auto;height:100%}.peeek[data-layout=double] .peeek__spread:not(.peeek__spread--pair) .peeek__page--right{border-radius:0 8px 8px 0}.peeek[data-layout=double] .peeek__spread:not(.peeek__spread--pair) .peeek__page--left{border-radius:8px 0 0 8px}.peeek[data-layout=double] .peeek__leaf--fwd .peeek__leaf-face--front{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek[data-layout=double] .peeek__leaf--fwd .peeek__leaf-face--back,.peeek[data-layout=double] .peeek__leaf--back .peeek__leaf-face--front{border-top-left-radius:8px;border-bottom-left-radius:8px}.peeek[data-layout=double] .peeek__leaf--back .peeek__leaf-face--back{border-top-right-radius:8px;border-bottom-right-radius:8px}.peeek[data-layout=single] .peeek__leaf-face{border-radius:8px}.peeek__about-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;align-items:safe center;justify-content:center;overflow-y:auto;padding:1rem;background:#06060c9e;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.peeek__about{position:relative;width:100%;max-width:360px;box-sizing:border-box;padding:1.75rem 1.5rem 1.25rem;text-align:center;color:var(--peeek-text);background:#16161f;border:1px solid rgba(255,255,255,.1);border-radius:var(--peeek-radius);box-shadow:0 24px 60px #00000080;overflow:hidden}.peeek__about-particles{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.peeek__about-particle{position:absolute;border-radius:9999px;background:#6e79d673;box-shadow:0 0 9px #6e79d659}@keyframes peeekAboutDriftA{0%,to{transform:translate(0)}50%{transform:translate(6px,-8px)}}@keyframes peeekAboutDriftB{0%,to{transform:translate(0)}50%{transform:translate(-7px,6px)}}@keyframes peeekAboutDriftC{0%,to{transform:translate(0)}50%{transform:translate(5px,7px)}}.peeek__about-content{position:relative;z-index:1}.peeek__about-orbwrap{position:relative;width:48px;height:48px;margin-inline:auto;border-radius:9999px;animation:peeekAboutPulse 3.2s ease-in-out infinite}.peeek__about-ring{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:9999px;background:conic-gradient(from 0deg,transparent 0 66%,#828ce0 86%,transparent 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:peeekAboutSpin 2.6s linear infinite}@keyframes peeekAboutSpin{to{transform:rotate(360deg)}}@keyframes peeekAboutPulse{0%,to{box-shadow:0 0 26px -8px #6e79d699}50%{box-shadow:0 0 40px -4px #6e79d6e6}}@media (prefers-reduced-motion: reduce){.peeek__about-particle,.peeek__about-ring,.peeek__about-orbwrap{animation:none}}.peeek__about-close{position:absolute;top:.5rem;right:.5rem;display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:8px;background:transparent;color:var(--peeek-text);font-size:20px;line-height:1;cursor:pointer}.peeek__about-close:hover{background:#ffffff14}.peeek__about-mark{display:block;margin-inline:auto;color:var(--peeek-accent)}.peeek__about-name{margin-top:.5rem;font-size:20px;font-weight:700;letter-spacing:.01em}.peeek__about-tagline{margin-top:.25rem;font-size:14px;color:#f5f5fab3}.peeek__about-version{display:inline-block;margin-top:.75rem;padding:.15rem .6rem;font-size:14px;font-weight:600;color:var(--peeek-accent);background:#6e79d629;border-radius:9999px}.peeek__about-desc{margin:.9rem 0 0;font-size:14px;line-height:1.5;color:#f5f5fad1}

package/package.json

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