@peeekpage/viewer 0.3.13 → 0.3.15

package/dist/index.js

@@ -1,7 +1,7 @@
-import { jsxs as v, jsx as o, Fragment as Ue } from "react/jsx-runtime";
-import { useState as T, useRef as U, useEffect as $, useCallback as S, useMemo as Be } from "react";
-const De = /* @__PURE__ */ new Set(["http:", "https:"]);
-function Z(t) {
+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 F, useMemo as Ue } from "react";
+const je = /* @__PURE__ */ new Set(["http:", "https:"]);
+function B(t) {
   if (typeof t != "string") return null;
   const e = t.trim();
   if (e === "" || e.includes(" ")) return null;
@@ -12,23 +12,23 @@ function Z(t) {
   } catch {
     return null;
   }
-  return De.has(r.protocol) ? r.href : null;
+  return je.has(r.protocol) ? r.href : null;
 }
-const je = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, Xe = /^rgba?\([ \t]*\d{1,3}[ \t]*,[ \t]*\d{1,3}[ \t]*,[ \t]*\d{1,3}[ \t]*(?:,[ \t]*(?:0|1|0?\.\d+)[ \t]*)?\)$/;
-function me(t) {
+const He = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/, Ve = /^rgba?\([ \t]*\d{1,3}[ \t]*,[ \t]*\d{1,3}[ \t]*,[ \t]*\d{1,3}[ \t]*(?:,[ \t]*(?:0|1|0?\.\d+)[ \t]*)?\)$/;
+function ge(t) {
   if (typeof t != "string") return null;
   const e = t.trim();
-  return je.test(e) || Xe.test(e) ? e : null;
+  return He.test(e) || Ve.test(e) ? e : null;
 }
-const He = /url\(|image\(|image-set\(|element\(|expression|@|\/\*|;|\{|\}|<|>|\\/i, Ge = /^(repeating-)?(linear|radial|conic)-gradient\([a-z0-9#.,%()\/\s-]*\)$/i, Ye = /^hsla?\([a-z0-9.,%\/\s-]*\)$/i;
-function Ve(t) {
+const Xe = /url\(|image\(|image-set\(|element\(|expression|@|\/\*|;|\{|\}|<|>|\\/i, Ge = /^(repeating-)?(linear|radial|conic)-gradient\([a-z0-9#.,%()\/\s-]*\)$/i, Ye = /^hsla?\([a-z0-9.,%\/\s-]*\)$/i;
+function We(t) {
   if (typeof t != "string") return null;
   const e = t.trim();
-  if (e === "" || He.test(e)) return null;
-  const n = me(e);
+  if (e === "" || Xe.test(e)) return null;
+  const n = ge(e);
   return n !== null ? n : Ye.test(e) || Ge.test(e) ? e : null;
 }
-const We = ["en", "pt-BR"], ge = {
+const qe = ["en", "pt-BR"], pe = {
   prev: "Previous page",
   next: "Next page",
   zoom: "Zoom level",
@@ -41,8 +41,16 @@ const We = ["en", "pt-BR"], ge = {
   page: "page",
   pages: "pages",
   loading: "Loading document…",
-  error: "Could not load this document."
-}, qe = {
+  error: "Could not load this document.",
+  about: "About",
+  aboutTagline: "Embeddable document viewer by Peeek Page",
+  aboutDescription: "Peeek Viewer shows document pages that live in your own storage, so your files stay yours.",
+  aboutLearnMore: "Learn more",
+  aboutDocs: "Documentation",
+  aboutReport: "Report a problem",
+  aboutLegal: "Legal",
+  aboutClose: "Close"
+}, Ke = {
   prev: "Página anterior",
   next: "Próxima página",
   zoom: "Nível de zoom",
@@ -55,88 +63,97 @@ const We = ["en", "pt-BR"], ge = {
   page: "página",
   pages: "páginas",
   loading: "Carregando documento…",
-  error: "Não foi possível carregar este documento."
-}, Je = { en: ge, "pt-BR": qe };
-function Ke(t) {
-  return Je[t] ?? ge;
+  error: "Não foi possível carregar este documento.",
+  about: "Sobre",
+  aboutTagline: "Visualizador de documentos incorporável do Peeek Page",
+  aboutDescription: "O Peeek Viewer exibe as páginas de documentos que ficam no seu próprio armazenamento, então seus arquivos continuam seus.",
+  aboutLearnMore: "Saiba mais",
+  aboutDocs: "Documentação",
+  aboutReport: "Relatar um problema",
+  aboutLegal: "Aviso legal",
+  aboutClose: "Fechar"
+}, Je = { en: pe, "pt-BR": Ke };
+function Qe(t) {
+  return Je[t] ?? pe;
 }
-const Qe = "#6E79D6";
-function C(t, e) {
+const et = "#6E79D6";
+function I(t, e) {
   return typeof t == "boolean" ? t : e;
 }
-function j(t, e, n) {
+function H(t, e, n) {
   return e.includes(t) ? t : n;
 }
-function et(t) {
+function tt(t) {
   return {
     src: typeof t.src == "string" ? t.src : "",
-    mode: j(t.mode, ["flip", "coverflow"], "flip"),
-    logo: Z(t.logo),
-    logoLink: Z(t.logoLink),
-    accentColor: me(t.accentColor) ?? Qe,
-    background: j(t.background, ["color", "image", "transparent"], "color"),
-    backgroundColor: Ve(t.backgroundColor),
-    backgroundImage: Z(t.backgroundImage),
-    layout: j(t.layout, ["single", "double"], "double"),
-    fillHeight: C(t.fillHeight, !1),
-    pageShadows: C(t.pageShadows, !0),
-    rtl: C(t.rtl, !1),
-    animateInteractions: C(t.animateInteractions, !0),
-    skin: j(t.skin, ["classic", "minimal", "showcase"], "classic"),
-    language: j(t.language, We, "en"),
-    autoTransition: C(t.autoTransition, !1),
+    mode: H(t.mode, ["flip", "coverflow"], "flip"),
+    logo: B(t.logo),
+    logoLink: B(t.logoLink),
+    accentColor: ge(t.accentColor) ?? et,
+    background: H(t.background, ["color", "image", "transparent"], "color"),
+    backgroundColor: We(t.backgroundColor),
+    backgroundImage: B(t.backgroundImage),
+    layout: H(t.layout, ["single", "double"], "double"),
+    fillHeight: I(t.fillHeight, !1),
+    pageShadows: I(t.pageShadows, !0),
+    rtl: I(t.rtl, !1),
+    animateInteractions: I(t.animateInteractions, !0),
+    skin: H(t.skin, ["classic", "minimal", "showcase"], "classic"),
+    language: H(t.language, qe, "en"),
+    autoTransition: I(t.autoTransition, !1),
     autoTransitionInterval: typeof t.autoTransitionInterval == "number" && t.autoTransitionInterval > 0 ? t.autoTransitionInterval : 5e3,
-    navigationControls: C(t.navigationControls, !0),
-    fullscreen: C(t.fullscreen, !0),
-    arrows: C(t.arrows, !0),
-    navigationBar: C(t.navigationBar, !0),
-    pagesOverview: C(t.pagesOverview, !0),
-    downloadUrl: Z(t.downloadUrl),
+    navigationControls: I(t.navigationControls, !0),
+    fullscreen: I(t.fullscreen, !0),
+    arrows: I(t.arrows, !0),
+    navigationBar: I(t.navigationBar, !0),
+    pagesOverview: I(t.pagesOverview, !0),
+    downloadUrl: B(t.downloadUrl),
+    aboutButton: I(t.aboutButton, !0),
     pollInterval: typeof t.pollInterval == "number" && t.pollInterval > 0 ? t.pollInterval : 2e3,
     className: typeof t.className == "string" ? t.className : ""
   };
 }
-const ne = 5e3;
-function X(t) {
+const ae = 5e3;
+function V(t) {
   return typeof t == "string" ? t : "";
 }
-function tt(t) {
+function nt(t) {
   if (t === null || typeof t != "object" || Array.isArray(t))
     return { ok: !1, error: "manifest is not an object" };
   const e = t;
   if (!Array.isArray(e.pages))
     return { ok: !1, error: "manifest.pages is missing or not an array" };
-  if (e.pages.length > ne)
+  if (e.pages.length > ae)
     return { ok: !1, error: "manifest.pages exceeds the maximum" };
   const n = e.total_pages, r = typeof n == "number" && Number.isFinite(n) && n >= 0 ? n : e.pages.length;
-  if (r > ne)
+  if (r > ae)
     return { ok: !1, error: "manifest.total_pages exceeds the maximum" };
   const l = [];
-  for (const g of e.pages) {
-    if (g === null || typeof g != "object") continue;
-    const s = Z(g.url);
-    s && l.push(s);
+  for (const d of e.pages) {
+    if (d === null || typeof d != "object") continue;
+    const c = B(d.url);
+    c && l.push(c);
   }
   if (l.length === 0)
     return { ok: !1, error: "manifest has no usable pages" };
-  const c = e.status === "wip" ? "wip" : "done", f = e.metadata && typeof e.metadata == "object" ? e.metadata : {}, h = {
-    fileId: X(f.file_id),
-    filename: X(f.filename),
-    creationDate: X(f.creation_date),
-    fileSize: X(f.file_size),
-    mimeType: X(f.mime_type)
+  const i = e.status === "wip" ? "wip" : "done", p = e.metadata && typeof e.metadata == "object" ? e.metadata : {}, b = {
+    fileId: V(p.file_id),
+    filename: V(p.filename),
+    creationDate: V(p.creation_date),
+    fileSize: V(p.file_size),
+    mimeType: V(p.mime_type)
   };
   return {
     ok: !0,
-    value: { status: c, totalPages: r, pages: l, metadata: h }
+    value: { status: i, totalPages: r, pages: l, metadata: b }
   };
 }
-function nt(t, e) {
-  if (!Array.isArray(t) || t.length > ne) return null;
+function at(t, e) {
+  if (!Array.isArray(t) || t.length > ae) return null;
   const n = [];
   for (const l of t) {
-    const c = Z(l);
-    c && n.push(c);
+    const i = B(l);
+    i && n.push(i);
   }
   return n.length === 0 ? null : {
     status: "done",
@@ -152,43 +169,43 @@ function nt(t, e) {
   };
 }
 function rt(t, e) {
-  const [n, r] = T("loading"), [l, c] = T(null), [f, h] = T(null), g = U(null);
-  return $(() => {
-    let s = !1;
-    if (r("loading"), c(null), h(null), !t) return;
-    const b = () => {
-      g.current !== null && (clearTimeout(g.current), g.current = null);
-    }, p = async () => {
+  const [n, r] = w("loading"), [l, i] = w(null), [p, b] = w(null), d = O(null);
+  return T(() => {
+    let c = !1;
+    if (r("loading"), i(null), b(null), !t) return;
+    const h = () => {
+      d.current !== null && (clearTimeout(d.current), d.current = null);
+    }, _ = async () => {
       let u;
       try {
-        const _ = await fetch(t);
-        if (!_.ok) throw new Error(`HTTP ${_.status}`);
-        u = await _.json();
-      } catch (_) {
-        if (s) return;
-        h(_ instanceof Error ? _.message : "fetch failed"), r("error");
+        const s = await fetch(t);
+        if (!s.ok) throw new Error(`HTTP ${s.status}`);
+        u = await s.json();
+      } catch (s) {
+        if (c) return;
+        b(s instanceof Error ? s.message : "fetch failed"), r("error");
         return;
       }
-      if (s) return;
-      const i = tt(u);
-      if (!i.ok) {
-        h(i.error), r("error");
+      if (c) return;
+      const f = nt(u);
+      if (!f.ok) {
+        b(f.error), r("error");
         return;
       }
-      c(i.value), r("ready"), i.value.status === "wip" && (g.current = setTimeout(p, e));
+      i(f.value), r("ready"), f.value.status === "wip" && (d.current = setTimeout(_, e));
     };
-    return p(), () => {
-      s = !0, b();
+    return _(), () => {
+      c = !0, h();
     };
-  }, [t, e]), { state: n, manifest: l, error: f };
+  }, [t, e]), { state: n, manifest: l, error: p };
 }
-function at(t) {
-  const [e, n] = T(!1);
-  $(() => {
+function ot(t) {
+  const [e, n] = w(!1);
+  T(() => {
     const l = () => n(document.fullscreenElement != null);
     return document.addEventListener("fullscreenchange", l), () => document.removeEventListener("fullscreenchange", l);
   }, []);
-  const r = S(async () => {
+  const r = F(async () => {
     const l = t.current;
     if (l)
       try {
@@ -199,12 +216,12 @@ function at(t) {
   return { isFullscreen: e, toggle: r };
 }
 const fe = "(prefers-reduced-motion: reduce)";
-function pe() {
-  const [t, e] = T(() => {
+function be() {
+  const [t, e] = w(() => {
     var n;
     return ((n = matchMedia == null ? void 0 : matchMedia(fe)) == null ? void 0 : n.matches) ?? !1;
   });
-  return $(() => {
+  return T(() => {
     const n = typeof matchMedia == "function" ? matchMedia(fe) : void 0;
     if (!(n != null && n.addEventListener)) return;
     const r = () => e(n.matches);
@@ -214,7 +231,7 @@ function pe() {
 function re(t, e) {
   return t <= 0 ? 0 : e === "single" ? t : 1 + Math.ceil((t - 1) / 2);
 }
-function ot(t, e) {
+function lt(t, e) {
   return e === "single" ? t : t <= 0 ? 0 : Math.floor((t - 1) / 2) + 1;
 }
 function Y(t, e, n) {
@@ -227,84 +244,85 @@ function Y(t, e, n) {
   return { left: r < e ? r : -1, right: l < e ? l : -1 };
 }
 function he(t, e, n) {
-  const { left: r, right: l } = Y(t, e, n), c = [];
-  return r >= 0 && c.push(r), l >= 0 && c.push(l), c;
+  const { left: r, right: l } = Y(t, e, n), i = [];
+  return r >= 0 && i.push(r), l >= 0 && i.push(l), i;
 }
-function Q(t, e, n) {
+function ee(t, e, n) {
   const r = re(e, n) - 1;
   return t < 0 ? 0 : t > r ? r : t;
 }
-function lt(t) {
+function st(t) {
   const {
     strings: e,
     label: n,
     progress: r,
     zoom: l,
-    minZoom: c,
-    maxZoom: f,
-    thumbsOpen: h,
-    isFullscreen: g,
-    downloadUrl: s,
-    show: b,
-    onZoomIn: p,
+    minZoom: i,
+    maxZoom: p,
+    thumbsOpen: b,
+    isFullscreen: d,
+    downloadUrl: c,
+    show: h,
+    onZoomIn: _,
     onZoomOut: u,
-    onZoomSet: i,
-    onToggleThumbs: _,
-    onToggleFullscreen: L
+    onZoomSet: f,
+    onToggleThumbs: s,
+    onToggleFullscreen: P,
+    onAbout: Z
   } = t;
-  return /* @__PURE__ */ v("div", { className: "peeek__toolbar", children: [
-    /* @__PURE__ */ o("span", { className: "peeek__label", children: n }),
-    b.bar && /* @__PURE__ */ o("div", { className: "peeek__scrubber", "aria-hidden": !0, children: /* @__PURE__ */ o("div", { className: "peeek__scrubber-fill", style: { width: `${r}%` } }) }),
-    /* @__PURE__ */ o(
+  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(
       "button",
       {
         type: "button",
         className: "peeek__btn",
         "aria-label": e.zoomOut,
-        disabled: l <= c,
+        disabled: l <= i,
         onClick: u,
         children: "−"
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ a(
       "input",
       {
         type: "range",
         "aria-label": e.zoom,
-        min: c,
-        max: f,
+        min: i,
+        max: p,
         step: 0.25,
         value: l,
-        onChange: (w) => i(Number(w.target.value))
+        onChange: (N) => f(Number(N.target.value))
       }
     ),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         className: "peeek__btn",
         "aria-label": e.zoomIn,
-        disabled: l >= f,
-        onClick: p,
+        disabled: l >= p,
+        onClick: _,
         children: "+"
       }
     ),
-    b.thumbnails && /* @__PURE__ */ o(
+    h.thumbnails && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        className: `peeek__btn${h ? " peeek__btn--active" : ""}`,
+        className: `peeek__btn${b ? " peeek__btn--active" : ""}`,
         "aria-label": e.thumbnails,
-        "aria-pressed": h,
-        onClick: _,
+        "aria-pressed": b,
+        onClick: s,
         children: "▦"
       }
     ),
-    s && /* @__PURE__ */ o(
+    c && /* @__PURE__ */ a(
       "a",
       {
         className: "peeek__btn",
-        href: s,
+        href: c,
         "aria-label": e.download,
         target: "_blank",
         rel: "noopener noreferrer",
@@ -312,200 +330,211 @@ function lt(t) {
         children: "↓"
       }
     ),
-    b.fullscreen && /* @__PURE__ */ o(
+    h.fullscreen && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
-        className: `peeek__btn${g ? " peeek__btn--active" : ""}`,
+        className: `peeek__btn${d ? " peeek__btn--active" : ""}`,
         "aria-label": e.fullscreen,
-        "aria-pressed": g,
-        onClick: L,
+        "aria-pressed": d,
+        onClick: P,
         children: "⛶"
       }
+    ),
+    h.about && /* @__PURE__ */ a(
+      "button",
+      {
+        type: "button",
+        className: "peeek__btn",
+        "aria-label": e.about,
+        onClick: Z,
+        children: "?"
+      }
     )
   ] });
 }
-function st({ pages: t, layout: e, rtl: n, activePages: r, onJump: l }) {
-  const c = t.length, f = new Set(r), h = re(c, e);
-  return /* @__PURE__ */ o("div", { className: "peeek__thumbs", role: "group", "aria-label": "Pages", children: Array.from({ length: h }, (g, s) => {
-    const b = he(s, c, e), p = b.length === 2;
-    return /* @__PURE__ */ v("div", { className: "peeek__thumb-group", children: [
-      b.map((u, i) => {
-        let _ = "";
-        return p && (_ = (n ? i === 1 : i === 0) ? " peeek__thumb--flat-right" : " peeek__thumb--flat-left"), /* @__PURE__ */ o(
+function it({ pages: t, layout: e, rtl: n, activePages: r, onJump: l }) {
+  const i = t.length, p = new Set(r), b = re(i, e);
+  return /* @__PURE__ */ a("div", { className: "peeek__thumbs", role: "group", "aria-label": "Pages", children: Array.from({ length: b }, (d, c) => {
+    const h = he(c, i, e), _ = h.length === 2;
+    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(
           "button",
           {
             type: "button",
             "aria-label": `Go to page ${u + 1}`,
-            "aria-current": f.has(u),
-            className: `peeek__thumb${f.has(u) ? " peeek__thumb--active" : ""}${_}`,
+            "aria-current": p.has(u),
+            className: `peeek__thumb${p.has(u) ? " peeek__thumb--active" : ""}${s}`,
             onClick: () => l(u),
-            children: /* @__PURE__ */ o("img", { src: t[u], alt: "", loading: "lazy", referrerPolicy: "no-referrer" })
+            children: /* @__PURE__ */ a("img", { src: t[u], alt: "", loading: "lazy", referrerPolicy: "no-referrer" })
           },
           u
         );
       }),
-      /* @__PURE__ */ o("span", { className: "peeek__thumb-badge", "aria-hidden": !0, children: b.map((u) => u + 1).join("-") })
-    ] }, s);
+      /* @__PURE__ */ a("span", { className: "peeek__thumb-badge", "aria-hidden": !0, children: h.map((u) => u + 1).join("-") })
+    ] }, c);
   }) });
 }
-const ee = 1, te = 2, de = 0.25;
-function it(t) {
+const te = 1, ne = 2, me = 0.25;
+function ct(t) {
   const {
     pages: e,
     strings: n,
     layout: r,
     rtl: l,
-    pageShadows: c,
-    animateInteractions: f,
-    autoTransition: h,
-    autoTransitionInterval: g,
-    show: s,
-    downloadUrl: b,
-    isFullscreen: p,
-    onToggleFullscreen: u
-  } = t, i = e.length, _ = re(i, r), w = pe() || !f, [V, z] = T(0), [N, B] = T(1), [H, y] = T(!1), [m, x] = T({ x: 0, y: 0 }), [F, O] = T(!1), G = U(null), ae = U(null), [k, oe] = T(null), le = U(null), [be, _e] = T(0.707);
-  $(() => {
+    pageShadows: i,
+    animateInteractions: p,
+    autoTransition: b,
+    autoTransitionInterval: d,
+    show: c,
+    downloadUrl: h,
+    isFullscreen: _,
+    onToggleFullscreen: u,
+    onAbout: f
+  } = t, s = e.length, P = re(s, r), N = be() || !p, [W, S] = w(0), [C, U] = w(1), [X, v] = w(!1), [g, $] = w({ x: 0, y: 0 }), [M, 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 a = new globalThis.Image();
-    a.onload = () => {
-      a.naturalWidth && a.naturalHeight && _e(a.naturalWidth / a.naturalHeight);
-    }, a.src = e[0];
+    const o = new globalThis.Image();
+    o.onload = () => {
+      o.naturalWidth && o.naturalHeight && ke(o.naturalWidth / o.naturalHeight);
+    }, o.src = e[0];
   }, [e]);
-  const P = Q(V, i, r), ke = P <= 0, W = P >= _ - 1, A = S(
-    (a) => {
-      k || z((d) => {
-        const I = Q(d + a, i, r);
-        return I === d ? d : w ? I : (oe({ dir: a, to: I }), d);
+  const L = ee(W, s, r), ye = L <= 0, q = L >= P - 1, z = F(
+    (o) => {
+      k || S((m) => {
+        const x = ee(m + o, s, r);
+        return x === m ? m : N ? x : (le({ dir: o, to: x }), m);
       });
     },
-    [i, r, w, k]
-  ), ye = S(() => {
-    oe((a) => (a && z(a.to), null));
+    [s, r, N, k]
+  ), ve = F(() => {
+    le((o) => (o && S(o.to), null));
   }, []);
-  $(() => {
+  T(() => {
     if (!k) return;
-    const a = le.current;
-    if (!a) return;
-    a.style.transform = "rotateY(0deg)";
-    let d = 0;
-    const I = requestAnimationFrame(() => {
-      d = requestAnimationFrame(() => {
-        a.style.transform = `rotateY(${k.dir === 1 ? -180 : 180}deg)`;
+    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)`;
       });
     });
     return () => {
-      cancelAnimationFrame(I), cancelAnimationFrame(d);
+      cancelAnimationFrame(x), cancelAnimationFrame(m);
     };
   }, [k]);
-  const ve = S(
-    (a) => {
-      z(Q(ot(a, r), i, r));
+  const we = F(
+    (o) => {
+      S(ee(lt(o, r), s, r));
     },
-    [i, r]
-  ), we = S(
-    (a) => {
-      a.key === "ArrowRight" ? A(l ? -1 : 1) : a.key === "ArrowLeft" && A(l ? 1 : -1);
+    [s, r]
+  ), Ne = F(
+    (o) => {
+      o.key === "ArrowRight" ? z(l ? -1 : 1) : o.key === "ArrowLeft" && z(l ? 1 : -1);
     },
-    [A, l]
+    [z, l]
   );
-  $(() => {
-    if (!h || W) return;
-    const a = setTimeout(() => A(1), g);
-    return () => clearTimeout(a);
-  }, [h, g, W, P, A]);
-  const Te = () => B((a) => Math.min(te, a + de)), Ne = () => B((a) => Math.max(ee, a - de)), q = S((a, d, I) => {
-    const K = ae.current;
-    if (!K || I <= 1) return { x: 0, y: 0 };
-    const ce = (I - 1) * K.clientWidth / 2, ue = (I - 1) * K.clientHeight / 2;
-    return { x: Math.max(-ce, Math.min(ce, a)), y: Math.max(-ue, Math.min(ue, d)) };
+  T(() => {
+    if (!b || q) return;
+    const o = setTimeout(() => z(1), d);
+    return () => clearTimeout(o);
+  }, [b, d, q, L, z]);
+  const Te = () => U((o) => Math.min(ne, o + me)), Ce = () => U((o) => Math.max(te, o - me)), K = F((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)) };
   }, []);
-  $(() => x((a) => q(a.x, a.y, N)), [N, q]), $(() => x({ x: 0, y: 0 }), [P]);
-  const Ie = (a) => {
-    N <= 1 || (G.current = { x: a.clientX, y: a.clientY, px: m.x, py: m.y }, O(!0), a.currentTarget.setPointerCapture(a.pointerId));
-  }, xe = (a) => {
-    const d = G.current;
-    d && x(q(d.px + (a.clientX - d.x), d.py + (a.clientY - d.y), N));
-  }, se = (a) => {
+  T(() => $((o) => K(o.x, o.y, C)), [C, K]), T(() => $({ x: 0, y: 0 }), [L]);
+  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));
+  }, ie = (o) => {
     if (G.current) {
-      G.current = null, O(!1);
+      G.current = null, R(!1);
       try {
-        a.currentTarget.releasePointerCapture(a.pointerId);
+        o.currentTarget.releasePointerCapture(o.pointerId);
       } catch {
       }
     }
-  }, D = he(P, i, r), J = D[0] ?? 0, Ce = r === "double" && D.length === 2 ? `${D[0] + 1} - ${D[1] + 1} / ${i}` : `${J + 1} / ${i}`, $e = _ <= 1 ? 100 : P / (_ - 1) * 100, Fe = n.prev, Pe = n.next, Me = k ? k.to : P, E = Y(Me, i, r), Se = E.left < 0 && E.right >= 0, ze = E.left >= 0 && E.right < 0, Ae = E.left >= 0 && E.right >= 0, Ee = Se ? "-25%" : ze ? "25%" : "0%", M = Y(P, i, r), R = k ? Y(k.to, i, r) : M, Le = k ? k.dir === 1 ? M.right >= 0 ? M.right : M.left : M.left >= 0 ? M.left : M.right : J, Oe = k ? k.dir === 1 ? R.left >= 0 ? R.left : R.right : R.right >= 0 ? R.right : R.left : J, Re = k ? k.dir === 1 ? "left" : "right" : null, ie = (a) => a === Re ? M[a] : E[a], Ze = [
-    ["left", ie("left")],
-    ["right", ie("right")]
+  }, j = he(L, 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 : L / (P - 1) * 100, Me = n.prev, Le = n.next, Ae = k ? k.to : L, E = Y(Ae, s, r), Fe = E.left < 0 && E.right >= 0, Se = E.left >= 0 && E.right < 0, ze = E.left >= 0 && E.right >= 0, Ee = Fe ? "-25%" : Se ? "25%" : "0%", A = Y(L, s, r), D = k ? Y(k.to, s, r) : A, Oe = k ? k.dir === 1 ? A.right >= 0 ? A.right : A.left : A.left >= 0 ? A.left : A.right : J, Re = k ? k.dir === 1 ? D.left >= 0 ? D.left : D.right : D.right >= 0 ? D.right : D.left : J, De = k ? k.dir === 1 ? "left" : "right" : null, ce = (o) => o === De ? A[o] : E[o], Be = [
+    ["left", ce("left")],
+    ["right", ce("right")]
   ];
-  return /* @__PURE__ */ v(Ue, { children: [
-    /* @__PURE__ */ v(
+  return /* @__PURE__ */ y(Ze, { children: [
+    /* @__PURE__ */ y(
       "div",
       {
-        ref: ae,
+        ref: oe,
         className: "peeek__stage",
         tabIndex: 0,
-        onKeyDown: we,
-        style: { "--peeek-aspect": `${be}` },
+        onKeyDown: Ne,
+        style: { "--peeek-aspect": `${_e}` },
         children: [
-          s.arrows && /* @__PURE__ */ o(
+          c.arrows && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--prev",
-              "aria-label": Fe,
-              disabled: ke,
-              onClick: () => A(-1),
+              "aria-label": Me,
+              disabled: ye,
+              onClick: () => z(-1),
               children: "‹"
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ a(
             "div",
             {
-              className: `peeek__zoom${N > 1 ? " peeek__zoom--pannable" : ""}`,
+              className: `peeek__zoom${C > 1 ? " peeek__zoom--pannable" : ""}`,
               style: {
-                transform: `translate(${m.x}px, ${m.y}px) scale(${N})`,
-                transition: w || F ? "none" : void 0
+                transform: `translate(${g.x}px, ${g.y}px) scale(${C})`,
+                transition: N || M ? "none" : void 0
               },
-              onPointerDown: Ie,
-              onPointerMove: xe,
-              onPointerUp: se,
-              onPointerCancel: se,
-              children: /* @__PURE__ */ v(
+              onPointerDown: xe,
+              onPointerMove: Ie,
+              onPointerUp: ie,
+              onPointerCancel: ie,
+              children: /* @__PURE__ */ y(
                 "div",
                 {
-                  className: `peeek__spread${c ? " peeek--shadows" : ""}${Ae ? " peeek__spread--pair" : ""}`,
+                  className: `peeek__spread${i ? " peeek--shadows" : ""}${ze ? " peeek__spread--pair" : ""}`,
                   style: { transform: `translateX(${Ee})` },
                   children: [
-                    Ze.map(([a, d]) => {
-                      const I = d >= 0 && s.fullscreen && !p && !k && N === 1;
-                      return /* @__PURE__ */ o(
+                    Be.map(([o, m]) => {
+                      const x = m >= 0 && c.fullscreen && !_ && !k && C === 1;
+                      return /* @__PURE__ */ a(
                         "div",
                         {
-                          className: `peeek__page peeek__page--${a}${d < 0 ? " peeek__page--empty" : ""}`,
-                          children: d >= 0 && (I ? /* @__PURE__ */ o(
+                          className: `peeek__page peeek__page--${o}${m < 0 ? " peeek__page--empty" : ""}`,
+                          children: m >= 0 && (x ? /* @__PURE__ */ a(
                             "button",
                             {
                               type: "button",
                               className: "peeek__page-btn",
                               "aria-label": n.openFullscreen,
                               onClick: u,
-                              children: /* @__PURE__ */ o("img", { src: e[d], alt: `Page ${d + 1}`, loading: "lazy", referrerPolicy: "no-referrer" })
+                              children: /* @__PURE__ */ a("img", { src: e[m], alt: `Page ${m + 1}`, loading: "lazy", referrerPolicy: "no-referrer" })
                             }
-                          ) : /* @__PURE__ */ o("img", { src: e[d], alt: `Page ${d + 1}`, loading: "lazy", referrerPolicy: "no-referrer" }))
+                          ) : /* @__PURE__ */ a("img", { src: e[m], alt: `Page ${m + 1}`, loading: "lazy", referrerPolicy: "no-referrer" }))
                         },
-                        a
+                        o
                       );
                     }),
-                    k && /* @__PURE__ */ v(
+                    k && /* @__PURE__ */ y(
                       "div",
                       {
-                        ref: le,
+                        ref: se,
                         className: `peeek__leaf peeek__leaf--${k.dir === 1 ? "fwd" : "back"}`,
-                        onTransitionEnd: ye,
+                        onTransitionEnd: ve,
                         children: [
-                          /* @__PURE__ */ o("div", { className: "peeek__leaf-face peeek__leaf-face--front", children: /* @__PURE__ */ o("img", { src: e[Le], alt: "", referrerPolicy: "no-referrer" }) }),
-                          /* @__PURE__ */ o("div", { className: "peeek__leaf-face peeek__leaf-face--back", children: /* @__PURE__ */ o("img", { src: e[Oe], alt: "", referrerPolicy: "no-referrer" }) })
+                          /* @__PURE__ */ a("div", { className: "peeek__leaf-face peeek__leaf-face--front", children: /* @__PURE__ */ a("img", { src: e[Oe], alt: "", referrerPolicy: "no-referrer" }) }),
+                          /* @__PURE__ */ a("div", { className: "peeek__leaf-face peeek__leaf-face--back", children: /* @__PURE__ */ a("img", { src: e[Re], alt: "", referrerPolicy: "no-referrer" }) })
                         ]
                       }
                     )
@@ -514,44 +543,45 @@ function it(t) {
               )
             }
           ),
-          s.arrows && /* @__PURE__ */ o(
+          c.arrows && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--next",
-              "aria-label": Pe,
-              disabled: W,
-              onClick: () => A(1),
+              "aria-label": Le,
+              disabled: q,
+              onClick: () => z(1),
               children: "›"
             }
           )
         ]
       }
     ),
-    s.toolbar && /* @__PURE__ */ o(
-      lt,
+    c.toolbar && /* @__PURE__ */ a(
+      st,
       {
         strings: n,
-        label: Ce,
+        label: Pe,
         progress: $e,
-        zoom: N,
-        minZoom: ee,
-        maxZoom: te,
-        thumbsOpen: H,
-        isFullscreen: p,
-        downloadUrl: b,
-        show: { bar: s.bar, fullscreen: s.fullscreen, thumbnails: s.thumbnails && s.overview },
+        zoom: C,
+        minZoom: te,
+        maxZoom: ne,
+        thumbsOpen: X,
+        isFullscreen: _,
+        downloadUrl: h,
+        show: { bar: c.bar, fullscreen: c.fullscreen, thumbnails: c.thumbnails && c.overview, about: c.about },
         onZoomIn: Te,
-        onZoomOut: Ne,
-        onZoomSet: (a) => B(Math.min(te, Math.max(ee, a))),
-        onToggleThumbs: () => y((a) => !a),
-        onToggleFullscreen: u
+        onZoomOut: Ce,
+        onZoomSet: (o) => U(Math.min(ne, Math.max(te, o))),
+        onToggleThumbs: () => v((o) => !o),
+        onToggleFullscreen: u,
+        onAbout: f
       }
     ),
-    s.overview && H && /* @__PURE__ */ o(st, { pages: e, layout: r, rtl: l, activePages: D, onJump: ve })
+    c.overview && X && /* @__PURE__ */ a(it, { pages: e, layout: r, rtl: l, activePages: j, onJump: we })
   ] });
 }
-function ct(t, e) {
+function ut(t, e) {
   const n = e.toLowerCase();
   if (n.includes("pdf")) return "PDF";
   if (n.includes("wordprocessingml")) return "DOCX";
@@ -559,7 +589,7 @@ function ct(t, e) {
   const r = t.toLowerCase().split(".").pop() ?? "";
   return r ? r.toUpperCase().slice(0, 4) : "FILE";
 }
-function ut(t, e) {
+function dt(t, e) {
   if (t === 0) return { transform: "translateX(0) scale(1)", zIndex: 30, opacity: 1 };
   const n = t < 0 ? -1 : 1, r = e ? -1 : 1;
   return {
@@ -574,52 +604,53 @@ function ft(t) {
     strings: n,
     filename: r,
     mimeType: l,
-    rtl: c,
-    autoTransition: f,
-    autoTransitionInterval: h,
-    downloadUrl: g,
-    isFullscreen: s,
-    onToggleFullscreen: b,
-    show: p
-  } = t, u = e.length, [i, _] = T(0), L = pe(), w = S(
-    (y) => _((m) => Math.max(0, Math.min(u - 1, m + y))),
-    [u]
-  ), V = i <= 0, z = i >= u - 1, N = U([]);
-  $(() => {
-    var y, m;
-    (m = (y = N.current[i]) == null ? void 0 : y.scrollIntoView) == null || m.call(y, { behavior: "smooth", inline: "center", block: "nearest" });
-  }, [i]), $(() => {
-    if (!f || L || z) return;
-    const y = setTimeout(() => w(1), h);
-    return () => clearTimeout(y);
-  }, [f, h, L, z, i, w]);
-  const B = S(
-    (y) => {
-      y.key === "ArrowRight" ? w(c ? -1 : 1) : y.key === "ArrowLeft" && w(c ? 1 : -1);
+    rtl: i,
+    autoTransition: p,
+    autoTransitionInterval: b,
+    downloadUrl: d,
+    isFullscreen: c,
+    onToggleFullscreen: h,
+    onAbout: _,
+    show: u
+  } = t, f = e.length, [s, P] = w(0), Z = be(), N = F(
+    (v) => P((g) => Math.max(0, Math.min(f - 1, g + v))),
+    [f]
+  ), W = s <= 0, S = s >= f - 1, C = O([]);
+  T(() => {
+    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 || S) return;
+    const v = setTimeout(() => N(1), b);
+    return () => clearTimeout(v);
+  }, [p, b, Z, S, s, N]);
+  const U = F(
+    (v) => {
+      v.key === "ArrowRight" ? N(i ? -1 : 1) : v.key === "ArrowLeft" && N(i ? 1 : -1);
     },
-    [w, c]
-  ), H = ct(r, l);
-  return /* @__PURE__ */ v("div", { className: "peeek__cf", children: [
-    /* @__PURE__ */ v("div", { className: "peeek__cf-header", children: [
-      /* @__PURE__ */ o("span", { className: "peeek__cf-badge", children: H }),
-      /* @__PURE__ */ v("div", { className: "peeek__cf-meta", children: [
-        /* @__PURE__ */ o("span", { className: "peeek__cf-name", children: r }),
-        /* @__PURE__ */ v("span", { className: "peeek__cf-count", children: [
-          u,
+    [N, i]
+  ), X = ut(r, l);
+  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__ */ y("div", { className: "peeek__cf-meta", children: [
+        /* @__PURE__ */ a("span", { className: "peeek__cf-name", children: r }),
+        /* @__PURE__ */ y("span", { className: "peeek__cf-count", children: [
+          f,
           " ",
-          u === 1 ? n.page : n.pages
+          f === 1 ? n.page : n.pages
         ] })
       ] }),
-      /* @__PURE__ */ v("span", { className: "peeek__cf-indicator", children: [
-        i + 1,
+      /* @__PURE__ */ y("span", { className: "peeek__cf-indicator", children: [
+        s + 1,
         " / ",
-        u
+        f
       ] }),
-      g && /* @__PURE__ */ o(
+      d && /* @__PURE__ */ a(
         "a",
         {
           className: "peeek__btn",
-          href: g,
+          href: d,
           "aria-label": n.download,
           target: "_blank",
           rel: "noopener noreferrer",
@@ -627,113 +658,206 @@ function ft(t) {
           children: "↓"
         }
       ),
-      p.fullscreen && /* @__PURE__ */ o(
+      u.fullscreen && /* @__PURE__ */ a(
         "button",
         {
           type: "button",
-          className: `peeek__btn${s ? " peeek__btn--active" : ""}`,
+          className: `peeek__btn${c ? " peeek__btn--active" : ""}`,
           "aria-label": n.fullscreen,
-          "aria-pressed": s,
-          onClick: b,
+          "aria-pressed": c,
+          onClick: h,
           children: "⛶"
         }
+      ),
+      u.about && /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          className: "peeek__btn",
+          "aria-label": n.about,
+          onClick: _,
+          children: "?"
+        }
       )
     ] }),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ y(
       "div",
       {
         className: "peeek__cf-stage",
         tabIndex: 0,
-        onKeyDown: B,
+        onKeyDown: U,
         children: [
-          p.arrows && /* @__PURE__ */ o(
+          u.arrows && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--prev",
               "aria-label": n.prev,
-              disabled: V,
-              onClick: () => w(-1),
+              disabled: W,
+              onClick: () => N(-1),
               children: "‹"
             }
           ),
-          e.map((y, m) => {
-            const x = m - i;
-            if (Math.abs(x) > 1) return null;
-            const F = x === 0, O = F && p.fullscreen;
-            return /* @__PURE__ */ o(
+          e.map((v, g) => {
+            const $ = g - s;
+            if (Math.abs($) > 1) return null;
+            const M = $ === 0, R = M && u.fullscreen;
+            return /* @__PURE__ */ a(
               "button",
               {
                 type: "button",
-                className: `peeek__cf-card${F ? " peeek__cf-card--center" : ""}${O ? " peeek__cf-card--zoom" : ""}`,
-                style: ut(x, c),
-                tabIndex: F ? 0 : -1,
-                "aria-label": O ? n.openFullscreen : `Go to page ${m + 1}`,
-                onClick: () => O ? b() : _(m),
-                children: /* @__PURE__ */ o("img", { src: y, alt: F ? `Page ${m + 1}` : "", loading: "lazy", referrerPolicy: "no-referrer" })
+                className: `peeek__cf-card${M ? " peeek__cf-card--center" : ""}${R ? " peeek__cf-card--zoom" : ""}`,
+                style: dt($, i),
+                tabIndex: M ? 0 : -1,
+                "aria-label": R ? n.openFullscreen : `Go to page ${g + 1}`,
+                onClick: () => R ? h() : P(g),
+                children: /* @__PURE__ */ a("img", { src: v, alt: M ? `Page ${g + 1}` : "", loading: "lazy", referrerPolicy: "no-referrer" })
               },
-              m
+              g
             );
           }),
-          p.arrows && /* @__PURE__ */ o(
+          u.arrows && /* @__PURE__ */ a(
             "button",
             {
               type: "button",
               className: "peeek__arrow peeek__arrow--next",
               "aria-label": n.next,
-              disabled: z,
-              onClick: () => w(1),
+              disabled: S,
+              onClick: () => N(1),
               children: "›"
             }
           )
         ]
       }
     ),
-    p.thumbnails && /* @__PURE__ */ o("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((y, m) => {
-      const x = m === i;
-      return /* @__PURE__ */ v(
+    u.thumbnails && /* @__PURE__ */ a("div", { className: "peeek__cf-thumbs", role: "group", "aria-label": "Pages", children: e.map((v, g) => {
+      const $ = g === s;
+      return /* @__PURE__ */ y(
         "button",
         {
-          ref: (F) => {
-            N.current[m] = F;
+          ref: (M) => {
+            C.current[g] = M;
           },
           type: "button",
-          className: `peeek__cf-thumb${x ? " peeek__cf-thumb--active" : ""}`,
-          "aria-label": `Go to page ${m + 1}`,
-          "aria-current": x ? "page" : void 0,
-          onClick: () => _(m),
+          className: `peeek__cf-thumb${$ ? " peeek__cf-thumb--active" : ""}`,
+          "aria-label": `Go to page ${g + 1}`,
+          "aria-current": $ ? "page" : void 0,
+          onClick: () => P(g),
           children: [
-            /* @__PURE__ */ o("img", { src: y, alt: "", loading: "lazy", referrerPolicy: "no-referrer" }),
-            /* @__PURE__ */ o("span", { className: "peeek__cf-thumb-num", children: String(m + 1).padStart(2, "0") })
+            /* @__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") })
           ]
         },
-        m
+        g
       );
     }) })
   ] });
 }
-function dt({ logo: t, logoLink: e }) {
+function mt({ logo: t, logoLink: e }) {
   if (!t) return null;
-  const n = /* @__PURE__ */ o("img", { src: t, alt: "Logo", loading: "lazy", referrerPolicy: "no-referrer" });
-  return /* @__PURE__ */ o("div", { className: "peeek__branding", children: e ? /* @__PURE__ */ o("a", { href: e, target: "_blank", rel: "noopener noreferrer", children: n }) : n });
+  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 pt(t) {
-  const e = et(t), n = Ke(e.language), r = U(null), { isFullscreen: l, toggle: c } = at(r), f = t.pages !== void 0, h = Be(
-    () => f ? nt(t.pages, { filename: t.filename, mimeType: t.mimeType }) : null,
-    [f, t.pages, t.filename, t.mimeType]
-  ), g = rt(f ? null : e.src, e.pollInterval), s = f ? h : g.manifest, b = f ? h ? "ready" : "loading" : g.state, p = {
+function gt({ strings: t, onClose: e }) {
+  const n = O(null);
+  T(() => {
+    var l;
+    (l = n.current) == null || l.focus();
+  }, []), T(() => {
+    const l = (i) => {
+      i.key === "Escape" && e();
+    };
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [e]);
+  const r = [
+    { label: t.aboutLearnMore, href: "https://peeek.page" },
+    { label: t.aboutDocs, href: "https://peeek.page/docs" },
+    { label: t.aboutReport, href: "mailto:hello@cidral.dev" },
+    { label: t.aboutLegal, href: "https://peeek.page/legal/tos" }
+  ];
+  return /* @__PURE__ */ a("div", { className: "peeek__about-backdrop", onClick: e, children: /* @__PURE__ */ y(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Peeek Viewer",
+      className: "peeek__about",
+      onClick: (l) => l.stopPropagation(),
+      children: [
+        /* @__PURE__ */ a(
+          "button",
+          {
+            ref: n,
+            type: "button",
+            className: "peeek__about-close",
+            "aria-label": t.aboutClose,
+            onClick: e,
+            children: "×"
+          }
+        ),
+        /* @__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",
+            "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__ */ y("div", { className: "peeek__about-version", children: [
+          "v",
+          "0.3.15"
+        ] }),
+        /* @__PURE__ */ a("p", { className: "peeek__about-desc", children: t.aboutDescription }),
+        /* @__PURE__ */ a("div", { className: "peeek__about-links", children: r.map((l) => /* @__PURE__ */ y(
+          "a",
+          {
+            className: "peeek__about-link",
+            href: l.href,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: [
+              /* @__PURE__ */ a("span", { children: l.label }),
+              /* @__PURE__ */ a("span", { className: "peeek__about-link-arrow", "aria-hidden": "true", children: "›" })
+            ]
+          },
+          l.href
+        )) })
+      ]
+    }
+  ) });
+}
+function ht(t) {
+  const e = tt(t), n = Qe(e.language), r = O(null), { isFullscreen: l, toggle: i } = ot(r), [p, b] = w(!1), d = t.pages !== void 0, c = Ue(
+    () => d ? at(t.pages, { filename: t.filename, mimeType: t.mimeType }) : null,
+    [d, t.pages, t.filename, t.mimeType]
+  ), h = rt(d ? null : e.src, e.pollInterval), _ = d ? c : h.manifest, u = d ? c ? "ready" : "loading" : h.state, f = {
     "--peeek-accent": e.accentColor
   };
-  e.background === "transparent" ? p["--peeek-bg"] = "transparent" : e.background === "color" && e.backgroundColor ? p["--peeek-bg"] = e.backgroundColor : e.background === "image" && e.backgroundImage && (p["--peeek-bg"] = `center / cover no-repeat url("${e.backgroundImage}")`);
-  const u = {
+  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}")`);
+  const s = {
     toolbar: e.navigationControls,
     bar: e.navigationBar,
     fullscreen: e.fullscreen,
     thumbnails: e.pagesOverview,
     arrows: e.arrows,
-    overview: e.pagesOverview
+    overview: e.pagesOverview,
+    about: e.aboutButton
   };
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ y(
     "div",
     {
       ref: r,
@@ -741,31 +865,32 @@ function pt(t) {
       "data-skin": e.skin,
       "data-layout": e.layout,
       dir: e.rtl ? "rtl" : void 0,
-      style: p,
+      style: f,
       children: [
-        /* @__PURE__ */ o(dt, { logo: e.logo, logoLink: e.logoLink }),
-        b === "loading" && /* @__PURE__ */ o("div", { className: "peeek__state", children: n.loading }),
-        b === "error" && /* @__PURE__ */ o("div", { className: "peeek__state", children: n.error }),
-        b === "ready" && s && e.mode === "coverflow" && /* @__PURE__ */ o(
+        /* @__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(
           ft,
           {
-            pages: s.pages,
+            pages: _.pages,
             strings: n,
-            filename: s.metadata.filename,
-            mimeType: s.metadata.mimeType,
+            filename: _.metadata.filename,
+            mimeType: _.metadata.mimeType,
             rtl: e.rtl,
             autoTransition: e.autoTransition,
             autoTransitionInterval: e.autoTransitionInterval,
             downloadUrl: e.downloadUrl,
             isFullscreen: l,
-            onToggleFullscreen: c,
-            show: { arrows: e.arrows, thumbnails: e.pagesOverview, fullscreen: e.fullscreen }
+            onToggleFullscreen: i,
+            onAbout: () => b(!0),
+            show: { arrows: e.arrows, thumbnails: e.pagesOverview, fullscreen: e.fullscreen, about: e.aboutButton }
           }
         ),
-        b === "ready" && s && e.mode === "flip" && /* @__PURE__ */ o(
-          it,
+        u === "ready" && _ && e.mode === "flip" && /* @__PURE__ */ a(
+          ct,
           {
-            pages: s.pages,
+            pages: _.pages,
             strings: n,
             layout: e.layout,
             rtl: e.rtl,
@@ -773,16 +898,18 @@ function pt(t) {
             animateInteractions: e.animateInteractions,
             autoTransition: e.autoTransition,
             autoTransitionInterval: e.autoTransitionInterval,
-            show: u,
+            show: s,
             downloadUrl: e.downloadUrl,
             isFullscreen: l,
-            onToggleFullscreen: c
+            onToggleFullscreen: i,
+            onAbout: () => b(!0)
           }
-        )
+        ),
+        p && /* @__PURE__ */ a(gt, { strings: n, onClose: () => b(!1) })
       ]
     }
   );
 }
 export {
-  pt as PeeekViewer
+  ht as PeeekViewer
 };