html-flip-book-react 0.0.0-alpha.23 → 0.0.0-alpha.24

package/dist/toolbar/index.js

@@ -1,6 +1,6 @@
-import { jsx as n, jsxs as E } from "react/jsx-runtime";
-import { createContext as K, useContext as W, useMemo as D, useCallback as f, useEffect as $, useState as y, useRef as H } from "react";
-const ee = {
+import { jsx as o, jsxs as L, Fragment as oe } from "react/jsx-runtime";
+import { createContext as _, useContext as Q, useMemo as J, useCallback as w, useEffect as W, useState as C, useRef as K, useLayoutEffect as ne } from "react";
+const re = {
   flipNext: [
     { key: "ArrowRight" },
     { key: "PageDown" },
@@ -12,7 +12,7 @@ const ee = {
   goToLast: [{ key: "End" }],
   goToToc: [{ key: "t" }],
   toggleFullscreen: [{ key: "f" }]
-}, te = [
+}, ae = [
   {
     id: "flipNext",
     name: "Next Page",
@@ -52,14 +52,14 @@ const ee = {
   {
     id: "goToToc",
     name: "Table of Contents",
-    description: "Jump to the table of contents",
+    description: "Go to the table of contents (with flip)",
     execute: ({ flipBookRef: e, data: t }) => {
-      const o = t?.tocPageIndex ?? 4;
-      e.current?.jumpToPage(o);
+      const n = t?.tocPageIndex ?? 4;
+      e.current?.goToPage(n);
     },
     canExecute: ({ currentPage: e, data: t }) => {
-      const o = t?.tocPageIndex ?? 4;
-      return e !== o;
+      const n = t?.tocPageIndex ?? 4;
+      return e !== n;
     }
   },
   {
@@ -71,108 +71,108 @@ const ee = {
       document.fullscreenElement ? document.exitFullscreen().catch(console.warn) : (t?.current ?? document.documentElement).requestFullscreen().catch(console.warn);
     }
   }
-], O = K(null);
-function ne(e, t) {
+], Z = _(null);
+function le(e, t) {
   if (t.key !== e.key) return !1;
-  const o = e.modifiers ?? {};
-  return !(!!o.ctrl !== t.ctrlKey || !!o.shift !== t.shiftKey || !!o.alt !== t.altKey || !!o.meta !== t.metaKey);
+  const n = e.modifiers ?? {};
+  return !(!!n.ctrl !== t.ctrlKey || !!n.shift !== t.shiftKey || !!n.alt !== t.altKey || !!n.meta !== t.metaKey);
 }
-const oe = ({
+const se = ({
   flipBookRef: e,
   currentPage: t,
-  totalPages: o,
-  direction: l = "ltr",
-  commands: s = [],
-  commandOptions: u = {},
-  disableHotkeys: h = !1,
-  children: g
+  totalPages: n,
+  direction: r = "ltr",
+  commands: i = [],
+  commandOptions: d = {},
+  disableHotkeys: g = !1,
+  children: m
 }) => {
-  const r = D(() => {
-    const i = {};
-    for (const a of te)
-      i[a.id] = {
-        command: a,
-        options: u[a.id] ?? {}
+  const c = J(() => {
+    const a = {};
+    for (const l of ae)
+      a[l.id] = {
+        command: l,
+        options: d[l.id] ?? {}
       };
-    for (const a of s)
-      i[a.id] = {
-        command: a,
-        options: u[a.id] ?? {}
+    for (const l of i)
+      a[l.id] = {
+        command: l,
+        options: d[l.id] ?? {}
       };
-    return i;
-  }, [s, u]), x = f(
-    (i) => {
-      const a = r[i]?.options ?? {};
+    return a;
+  }, [i, d]), p = w(
+    (a) => {
+      const l = c[a]?.options ?? {};
       return {
         flipBookRef: e,
         currentPage: t,
-        totalPages: o,
-        direction: l,
-        data: a.data
+        totalPages: n,
+        direction: r,
+        data: l.data
       };
     },
-    [e, t, o, l, r]
-  ), m = f(
-    (i) => {
-      const a = r[i];
-      if (!a) {
-        console.warn(`Command "${i}" not found`);
+    [e, t, n, r, c]
+  ), h = w(
+    (a) => {
+      const l = c[a];
+      if (!l) {
+        console.warn(`Command "${a}" not found`);
         return;
       }
-      const d = x(i);
-      a.command.canExecute && !a.command.canExecute(d) || a.command.execute(d);
+      const b = p(a);
+      l.command.canExecute && !l.command.canExecute(b) || l.command.execute(b);
     },
-    [r, x]
-  ), p = f(
-    (i) => {
-      const a = r[i];
-      if (!a) return !1;
-      const d = x(i);
-      return a.command.canExecute ? a.command.canExecute(d) : !0;
+    [c, p]
+  ), P = w(
+    (a) => {
+      const l = c[a];
+      if (!l) return !1;
+      const b = p(a);
+      return l.command.canExecute ? l.command.canExecute(b) : !0;
     },
-    [r, x]
-  ), k = f(
-    (i) => r[i]?.command,
-    [r]
-  ), b = f(
-    () => Object.values(r).map((i) => i.command),
-    [r]
-  ), w = f(
-    (i) => {
-      const a = i.target;
-      if (!(a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.isContentEditable))
-        for (const [d, F] of Object.entries(r)) {
-          if (F.options.disableHotkeys) continue;
-          const z = F.options.hotkeys ?? ee[d] ?? [];
-          for (const j of z)
-            if (ne(j, i)) {
-              i.preventDefault(), m(d);
+    [c, p]
+  ), y = w(
+    (a) => c[a]?.command,
+    [c]
+  ), N = w(
+    () => Object.values(c).map((a) => a.command),
+    [c]
+  ), x = w(
+    (a) => {
+      const l = a.target;
+      if (!(l.tagName === "INPUT" || l.tagName === "TEXTAREA" || l.isContentEditable))
+        for (const [b, v] of Object.entries(c)) {
+          if (v.options.disableHotkeys) continue;
+          const I = v.options.hotkeys ?? re[b] ?? [];
+          for (const R of I)
+            if (le(R, a)) {
+              a.preventDefault(), h(b);
               return;
             }
         }
     },
-    [r, m]
+    [c, h]
   );
-  $(() => {
-    if (!h)
-      return document.addEventListener("keydown", w), () => document.removeEventListener("keydown", w);
-  }, [h, w]);
-  const P = D(
+  W(() => {
+    if (!g)
+      return document.addEventListener("keydown", x), () => document.removeEventListener("keydown", x);
+  }, [g, x]);
+  const E = J(
     () => ({
-      executeCommand: m,
-      canExecute: p,
-      getCommand: k,
-      getAllCommands: b
+      executeCommand: h,
+      canExecute: P,
+      getCommand: y,
+      getAllCommands: N
     }),
-    [m, p, k, b]
+    [h, P, y, N]
   );
-  return /* @__PURE__ */ n(O.Provider, { value: P, children: g });
-}, ue = () => {
-  const e = W(O);
+  return /* @__PURE__ */ o(Z.Provider, { value: E, children: m });
+}, ve = () => {
+  const e = Q(Z);
   if (!e)
     throw new Error("useCommands must be used within a CommandProvider");
   return e;
-}, C = { size: 24 }, q = ({ size: e = C.size, className: t }) => /* @__PURE__ */ n(
+}, $ = { size: 24 }, ie = ({ size: e = $.size, className: t }) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -186,9 +186,9 @@ const oe = ({
     strokeLinejoin: "round",
     className: t,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ n("path", { d: "m15 18-6-6 6-6" })
+    children: /* @__PURE__ */ o("path", { d: "m15 18-6-6 6-6" })
   }
-), V = ({ size: e = C.size, className: t }) => /* @__PURE__ */ n(
+), ce = ({ size: e = $.size, className: t }) => /* @__PURE__ */ o(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -202,9 +202,9 @@ const oe = ({
     strokeLinejoin: "round",
     className: t,
     "aria-hidden": "true",
-    children: /* @__PURE__ */ n("path", { d: "m9 18 6-6-6-6" })
+    children: /* @__PURE__ */ o("path", { d: "m9 18 6-6-6-6" })
   }
-), J = ({ size: e = C.size, className: t }) => /* @__PURE__ */ E(
+), de = ({ size: e = $.size, className: t }) => /* @__PURE__ */ L(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -219,11 +219,11 @@ const oe = ({
     className: t,
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ n("path", { d: "m17 18-6-6 6-6" }),
-      /* @__PURE__ */ n("path", { d: "M7 6v12" })
+      /* @__PURE__ */ o("path", { d: "m17 18-6-6 6-6" }),
+      /* @__PURE__ */ o("path", { d: "M7 6v12" })
     ]
   }
-), U = ({ size: e = C.size, className: t }) => /* @__PURE__ */ E(
+), ue = ({ size: e = $.size, className: t }) => /* @__PURE__ */ L(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -238,11 +238,11 @@ const oe = ({
     className: t,
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ n("path", { d: "m7 18 6-6-6-6" }),
-      /* @__PURE__ */ n("path", { d: "M17 6v12" })
+      /* @__PURE__ */ o("path", { d: "m7 18 6-6-6-6" }),
+      /* @__PURE__ */ o("path", { d: "M17 6v12" })
     ]
   }
-), re = ({ size: e = C.size, className: t }) => /* @__PURE__ */ E(
+), ge = ({ size: e = $.size, className: t }) => /* @__PURE__ */ L(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -257,13 +257,13 @@ const oe = ({
     className: t,
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ n("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
-      /* @__PURE__ */ n("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
-      /* @__PURE__ */ n("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
-      /* @__PURE__ */ n("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
+      /* @__PURE__ */ o("path", { d: "M8 3H5a2 2 0 0 0-2 2v3" }),
+      /* @__PURE__ */ o("path", { d: "M21 8V5a2 2 0 0 0-2-2h-3" }),
+      /* @__PURE__ */ o("path", { d: "M3 16v3a2 2 0 0 0 2 2h3" }),
+      /* @__PURE__ */ o("path", { d: "M16 21h3a2 2 0 0 0 2-2v-3" })
     ]
   }
-), ie = ({ size: e = C.size, className: t }) => /* @__PURE__ */ E(
+), he = ({ size: e = $.size, className: t }) => /* @__PURE__ */ L(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -278,16 +278,16 @@ const oe = ({
     className: t,
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ n("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
-      /* @__PURE__ */ n("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
-      /* @__PURE__ */ n("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
-      /* @__PURE__ */ n("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
+      /* @__PURE__ */ o("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
+      /* @__PURE__ */ o("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
+      /* @__PURE__ */ o("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
+      /* @__PURE__ */ o("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
     ]
   }
-), ae = ({
-  size: e = C.size,
+), me = ({
+  size: e = $.size,
   className: t
-}) => /* @__PURE__ */ E(
+}) => /* @__PURE__ */ L(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -302,15 +302,15 @@ const oe = ({
     className: t,
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ n("path", { d: "M16 5H3" }),
-      /* @__PURE__ */ n("path", { d: "M16 12H3" }),
-      /* @__PURE__ */ n("path", { d: "M16 19H3" }),
-      /* @__PURE__ */ n("path", { d: "M21 5h.01" }),
-      /* @__PURE__ */ n("path", { d: "M21 12h.01" }),
-      /* @__PURE__ */ n("path", { d: "M21 19h.01" })
+      /* @__PURE__ */ o("path", { d: "M16 5H3" }),
+      /* @__PURE__ */ o("path", { d: "M16 12H3" }),
+      /* @__PURE__ */ o("path", { d: "M16 19H3" }),
+      /* @__PURE__ */ o("path", { d: "M21 5h.01" }),
+      /* @__PURE__ */ o("path", { d: "M21 12h.01" }),
+      /* @__PURE__ */ o("path", { d: "M21 19h.01" })
     ]
   }
-), de = ({ size: e = C.size, className: t }) => /* @__PURE__ */ E(
+), Pe = ({ size: e = $.size, className: t }) => /* @__PURE__ */ L(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -325,314 +325,537 @@ const oe = ({
     className: t,
     "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ n("path", { d: "M3 21h18" }),
-      /* @__PURE__ */ n("rect", { x: "4", y: "7", width: "3", height: "14", rx: "0.5" }),
-      /* @__PURE__ */ n("rect", { x: "8", y: "5", width: "3", height: "16", rx: "0.5" }),
-      /* @__PURE__ */ n("rect", { x: "12", y: "9", width: "3", height: "12", rx: "0.5" }),
-      /* @__PURE__ */ n("rect", { x: "16", y: "6", width: "4", height: "15", rx: "0.5" })
+      /* @__PURE__ */ o("path", { d: "M3 21h18" }),
+      /* @__PURE__ */ o("rect", { x: "4", y: "7", width: "3", height: "14", rx: "0.5" }),
+      /* @__PURE__ */ o("rect", { x: "8", y: "5", width: "3", height: "16", rx: "0.5" }),
+      /* @__PURE__ */ o("rect", { x: "12", y: "9", width: "3", height: "12", rx: "0.5" }),
+      /* @__PURE__ */ o("rect", { x: "16", y: "6", width: "4", height: "15", rx: "0.5" })
     ]
   }
-), L = ({
+), fe = ({ size: e = $.size, className: t }) => /* @__PURE__ */ L(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: e,
+    height: e,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: t,
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ o("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ o("polyline", { points: "7 10 12 15 17 10" }),
+      /* @__PURE__ */ o("line", { x1: "12", x2: "12", y1: "15", y2: "3" })
+    ]
+  }
+), z = ({
   onClick: e,
   ariaLabel: t,
-  disabled: o = !1,
-  children: l,
-  className: s = "",
-  title: u
-}) => /* @__PURE__ */ n(
+  disabled: n = !1,
+  children: r,
+  className: i = "",
+  title: d
+}) => /* @__PURE__ */ o(
   "button",
   {
     type: "button",
     onClick: e,
     "aria-label": t,
-    disabled: o,
-    title: u ?? t,
-    className: `flipbook-toolbar-button ${s}`.trim(),
-    children: l
+    disabled: n,
+    title: d ?? t,
+    className: `flipbook-toolbar-button ${i}`.trim(),
+    children: r
   }
-), he = ({
+), Ce = ({
   onClick: e,
   ariaLabel: t,
-  children: o,
-  disabled: l = !1,
-  className: s
-}) => /* @__PURE__ */ n(
-  L,
+  children: n,
+  disabled: r = !1,
+  className: i
+}) => /* @__PURE__ */ o(
+  z,
   {
     onClick: e,
     ariaLabel: t,
-    disabled: l,
-    className: `flipbook-toolbar-action ${s ?? ""}`.trim(),
-    children: o
+    disabled: r,
+    className: `flipbook-toolbar-action ${i ?? ""}`.trim(),
+    children: n
   }
-), G = K(null);
-function N() {
-  const e = W(G);
+), X = {
+  en: {
+    "toolbar.download": "Download",
+    "toolbar.downloadEntireBook": "Download entire book",
+    "toolbar.downloadPageRange": "Download page range…",
+    "toolbar.toc": "Table of contents",
+    "toolbar.firstPage": "First page",
+    "toolbar.lastPage": "Last page",
+    "toolbar.prevPage": "Previous page",
+    "toolbar.nextPage": "Next page",
+    "toolbar.goToPage": "Go to page",
+    "download.from": "From",
+    "download.to": "To",
+    "download.download": "Download"
+  },
+  "he-IL": {
+    "toolbar.download": "הורדה",
+    "toolbar.downloadEntireBook": "הורד את כל הספר",
+    "toolbar.downloadPageRange": "הורד טווח עמודים…",
+    "toolbar.toc": "תוכן העניינים",
+    "toolbar.firstPage": "עמוד ראשון",
+    "toolbar.lastPage": "עמוד אחרון",
+    "toolbar.prevPage": "עמוד קודם",
+    "toolbar.nextPage": "עמוד הבא",
+    "toolbar.goToPage": "מעבר לעמוד",
+    "download.from": "מ",
+    "download.to": "עד",
+    "download.download": "הורד"
+  }
+};
+function D(e, t = "en") {
+  return X[t]?.[e] ?? X.en[e] ?? e;
+}
+function pe(e) {
+  return e === "he-IL";
+}
+const ee = _(null);
+function S() {
+  const e = Q(ee);
   if (!e)
     throw new Error("Toolbar components must be used within a Toolbar");
   return e;
 }
-const me = ({ children: e, className: t }) => {
-  const { flipBookRef: o, isFirstPage: l, direction: s } = N(), u = () => {
-    o.current?.jumpToPage(0);
-  }, h = s === "rtl" ? /* @__PURE__ */ n(U, { size: 18 }) : /* @__PURE__ */ n(J, { size: 18 });
-  return /* @__PURE__ */ n(
-    L,
+function Y(e, t) {
+  try {
+    const n = atob(e.data), r = new Uint8Array(n.length);
+    for (let m = 0; m < n.length; m++)
+      r[m] = n.charCodeAt(m);
+    const i = new Blob([r]), d = URL.createObjectURL(i), g = document.createElement("a");
+    g.href = d, g.download = `${t}.${e.ext}`, g.click(), URL.revokeObjectURL(d);
+  } catch (n) {
+    console.error("Download failed:", n);
+  }
+}
+function be(e, t) {
+  const n = [];
+  for (let r = 0; r < e; r++) {
+    const i = t?.indexToSemanticName(r) ?? String(r + 1), d = t?.indexToTitle(r) ?? `Page ${r + 1}`;
+    n.push({ pageIndex: r, semanticName: i, title: d });
+  }
+  return n;
+}
+const ye = ({
+  onDownloadSefer: e,
+  onDownloadPageRange: t,
+  downloadContext: n,
+  ariaLabel: r = "Download",
+  entireBookFilename: i = "book",
+  rangeFilename: d = "pages",
+  className: g
+}) => {
+  const { totalPages: m, pageSemantics: c, locale: p } = S(), [h, P] = C(!1), [y, N] = C(!1), [x, E] = C(0), [a, l] = C(0), [b, v] = C(null), [I, R] = C(!1), k = K(null), H = K(null), B = be(m, c), j = !!e, A = !!t, q = j || A, F = w(() => {
+    P(!1), N(!1);
+  }, []);
+  ne(() => {
+    if (!h || !H.current || !k.current) return;
+    const s = H.current, M = k.current.querySelector(".flipbook-toolbar-download-trigger"), U = () => {
+      const f = M?.getBoundingClientRect();
+      if (!f) return;
+      const T = s.getBoundingClientRect().height, te = window.innerHeight - f.bottom;
+      R(te < T + 8);
+    };
+    U();
+    const u = new ResizeObserver(U);
+    return u.observe(s), () => u.disconnect();
+  }, [h]), W(() => {
+    if (!h) return;
+    const s = (M) => {
+      k.current && !k.current.contains(M.target) && F();
+    };
+    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+  }, [h, F]);
+  const O = w(async () => {
+    if (e) {
+      v("sefer");
+      try {
+        const s = await e();
+        s && Y(s, i), F();
+      } finally {
+        v(null);
+      }
+    }
+  }, [e, i, F]), V = w(() => {
+    E(0), l(Math.max(0, m - 1)), N(!0), P(!0);
+  }, [m]), G = w(async () => {
+    if (!t) return;
+    const s = Math.min(x, a), M = Math.max(x, a), U = [], u = [];
+    for (let f = s; f <= M; f++) {
+      U.push(f);
+      const T = B[f];
+      T && u.push(T);
+    }
+    v("range");
+    try {
+      const f = await t(U, u, n);
+      f && Y(f, `${d}-${s + 1}-${M + 1}`), F();
+    } finally {
+      v(null);
+    }
+  }, [
+    t,
+    x,
+    a,
+    B,
+    n,
+    d,
+    F
+  ]);
+  return q ? /* @__PURE__ */ L("div", { className: `flipbook-toolbar-download-wrap ${g ?? ""}`.trim(), ref: k, children: [
+    /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        className: "flipbook-toolbar-button flipbook-toolbar-download-trigger",
+        onClick: () => P((s) => !s),
+        "aria-label": r ?? D("toolbar.download", p),
+        "aria-expanded": h,
+        "aria-haspopup": "true",
+        disabled: b !== null,
+        children: /* @__PURE__ */ o(fe, { size: 18 })
+      }
+    ),
+    h && /* @__PURE__ */ L(
+      "div",
+      {
+        ref: H,
+        className: `flipbook-toolbar-download-menu ${I ? "flipbook-toolbar-download-menu--open-up" : ""}`.trim(),
+        role: "menu",
+        dir: pe(p) ? "rtl" : "ltr",
+        children: [
+          j && /* @__PURE__ */ o(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "flipbook-toolbar-download-menuitem",
+              onClick: O,
+              disabled: b !== null,
+              children: b === "sefer" ? "…" : D("toolbar.downloadEntireBook", p)
+            }
+          ),
+          A && /* @__PURE__ */ L(oe, { children: [
+            /* @__PURE__ */ o(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                className: "flipbook-toolbar-download-menuitem",
+                onClick: V,
+                disabled: b !== null,
+                children: D("toolbar.downloadPageRange", p)
+              }
+            ),
+            y && /* @__PURE__ */ L("div", { className: "flipbook-toolbar-download-range", children: [
+              /* @__PURE__ */ L("label", { className: "flipbook-toolbar-download-range-label", children: [
+                D("download.from", p),
+                /* @__PURE__ */ o(
+                  "select",
+                  {
+                    value: x,
+                    onChange: (s) => E(Number(s.target.value)),
+                    className: "flipbook-toolbar-download-range-select",
+                    children: B.map((s) => /* @__PURE__ */ o("option", { value: s.pageIndex, children: s.semanticName || s.title || `Page ${s.pageIndex + 1}` }, s.pageIndex))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ L("label", { className: "flipbook-toolbar-download-range-label", children: [
+                D("download.to", p),
+                /* @__PURE__ */ o(
+                  "select",
+                  {
+                    value: a,
+                    onChange: (s) => l(Number(s.target.value)),
+                    className: "flipbook-toolbar-download-range-select",
+                    children: B.map((s) => /* @__PURE__ */ o("option", { value: s.pageIndex, children: s.semanticName || s.title || `Page ${s.pageIndex + 1}` }, s.pageIndex))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ o(
+                "button",
+                {
+                  type: "button",
+                  className: "flipbook-toolbar-download-range-download",
+                  onClick: G,
+                  disabled: b !== null,
+                  children: b === "range" ? "…" : D("download.download", p)
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] }) : null;
+}, Le = ({ children: e, className: t }) => {
+  const { flipBookRef: n, isFirstPage: r } = S(), i = () => {
+    n.current?.jumpToPage(0);
+  }, d = /* @__PURE__ */ o(de, { size: 18 });
+  return /* @__PURE__ */ o(
+    z,
     {
-      onClick: u,
+      onClick: i,
       ariaLabel: "First page",
-      disabled: l,
+      disabled: r,
       className: `flipbook-toolbar-first ${t ?? ""}`.trim(),
-      children: e ?? h
+      children: e ?? d
     }
   );
-}, ge = ({
+}, Te = ({
   targetRef: e,
   enterIcon: t,
-  exitIcon: o,
-  ariaLabelEnter: l = "Enter fullscreen",
-  ariaLabelExit: s = "Exit fullscreen",
-  className: u
+  exitIcon: n,
+  ariaLabelEnter: r = "Enter fullscreen",
+  ariaLabelExit: i = "Exit fullscreen",
+  className: d
 }) => {
-  const [h, g] = y(!1), r = f(() => {
-    g(!!document.fullscreenElement);
+  const [g, m] = C(!1), c = w(() => {
+    m(!!document.fullscreenElement);
   }, []);
-  $(() => (document.addEventListener("fullscreenchange", r), () => {
-    document.removeEventListener("fullscreenchange", r);
-  }), [r]);
-  const x = async () => {
+  W(() => (document.addEventListener("fullscreenchange", c), () => {
+    document.removeEventListener("fullscreenchange", c);
+  }), [c]);
+  const p = async () => {
     try {
-      h ? await document.exitFullscreen() : await (e?.current ?? document.documentElement).requestFullscreen();
-    } catch (k) {
-      console.warn("Fullscreen request failed:", k);
+      g ? await document.exitFullscreen() : await (e?.current ?? document.documentElement).requestFullscreen();
+    } catch (y) {
+      console.warn("Fullscreen request failed:", y);
     }
-  }, m = h ? s : l, p = h ? o ?? /* @__PURE__ */ n(ie, { size: 18 }) : t ?? /* @__PURE__ */ n(re, { size: 18 });
-  return /* @__PURE__ */ n(
-    L,
+  }, h = g ? i : r, P = g ? n ?? /* @__PURE__ */ o(he, { size: 18 }) : t ?? /* @__PURE__ */ o(ge, { size: 18 });
+  return /* @__PURE__ */ o(
+    z,
     {
-      onClick: x,
-      ariaLabel: m,
-      className: `flipbook-toolbar-fullscreen ${h ? "flipbook-toolbar-fullscreen--active" : ""} ${u ?? ""}`.trim(),
-      children: p
+      onClick: p,
+      ariaLabel: h,
+      className: `flipbook-toolbar-fullscreen ${g ? "flipbook-toolbar-fullscreen--active" : ""} ${d ?? ""}`.trim(),
+      children: P
     }
   );
-}, fe = ({ children: e, className: t }) => {
-  const { flipBookRef: o, isLastPage: l, totalPages: s, direction: u } = N(), h = () => {
-    o.current?.jumpToPage(s - 1);
-  }, g = u === "rtl" ? /* @__PURE__ */ n(J, { size: 18 }) : /* @__PURE__ */ n(U, { size: 18 });
-  return /* @__PURE__ */ n(
-    L,
+}, Ne = ({ children: e, className: t }) => {
+  const { flipBookRef: n, isLastPage: r, totalPages: i } = S(), d = () => {
+    n.current?.jumpToPage(i - 1);
+  }, g = /* @__PURE__ */ o(ue, { size: 18 });
+  return /* @__PURE__ */ o(
+    z,
     {
-      onClick: h,
+      onClick: d,
       ariaLabel: "Last page",
-      disabled: l,
+      disabled: r,
       className: `flipbook-toolbar-last ${t ?? ""}`.trim(),
       children: e ?? g
     }
   );
-}, pe = ({ children: e, className: t }) => {
-  const { flipBookRef: o, isLastPage: l, direction: s } = N(), u = () => {
-    o.current?.flipNext();
-  }, h = s === "rtl" ? "Previous page" : "Next page", g = s === "rtl" ? /* @__PURE__ */ n(q, { size: 20 }) : /* @__PURE__ */ n(V, { size: 20 });
-  return /* @__PURE__ */ n(
-    L,
+}, Ee = ({ children: e, className: t }) => {
+  const { flipBookRef: n, isLastPage: r, direction: i } = S(), d = () => {
+    n.current?.flipNext();
+  }, g = i === "rtl" ? "Previous page" : "Next page", m = /* @__PURE__ */ o(ce, { size: 20 });
+  return /* @__PURE__ */ o(
+    z,
     {
-      onClick: u,
-      ariaLabel: h,
-      disabled: l,
+      onClick: d,
+      ariaLabel: g,
+      disabled: r,
       className: `flipbook-toolbar-next ${t ?? ""}`.trim(),
-      children: e ?? g
+      children: e ?? m
     }
   );
-}, xe = ({
+}, Ie = ({
   mode: e,
   showTotal: t = !0,
-  placeholder: o = "—",
-  editable: l,
-  className: s,
-  ariaLabel: u = "Go to page",
-  maxLength: h = 10
+  placeholder: n = "—",
+  editable: r,
+  className: i,
+  ariaLabel: d = "Go to page",
+  maxLength: g = 10
 }) => {
-  const { flipBookRef: g, pageSemantics: r, direction: x, currentPage: m, totalPages: p } = N(), k = e ?? (r ? "semantic" : "index"), b = l ?? (k === "semantic" && !!r), [w, P] = y(""), [i, a] = y(!1), d = H(!1), F = H(m), z = m, j = m + 1 < p ? m + 1 : null, S = f(
-    (c) => k === "semantic" && r ? r.indexToSemanticName(c) || "" : String(c + 1),
-    [k, r]
-  ), I = S(z), B = j != null ? S(j) : "", R = f(() => {
-    if (k === "semantic" && r) {
-      for (let c = p - 1; c >= 0; c--) {
-        const v = r.indexToSemanticName(c);
-        if (v) return v;
-      }
-      return String(p);
-    }
-    return String(p);
-  }, [k, r, p]), X = f(() => {
-    const c = x === "rtl" ? B : I, v = x === "rtl" ? I : B;
+  const { flipBookRef: m, pageSemantics: c, direction: p, currentPage: h, totalPages: P, of: y } = S(), N = e ?? (c ? "semantic" : "index"), x = r ?? (N === "semantic" && !!c), [E, a] = C(""), [l, b] = C(!1), v = K(!1), I = K(h), R = h, k = h + 1 < P ? h + 1 : null, H = w(
+    (u) => N === "semantic" && c ? c.indexToSemanticName(u) || "" : String(u + 1),
+    [N, c]
+  ), B = H(R), j = k != null ? H(k) : "", A = w(() => String(y), [y]), q = w(() => {
+    const u = B, f = j;
     let T;
-    return !c && !v ? T = o : c ? v ? c === v ? T = c : T = `${c} - ${v}` : T = c : T = v, t ? `${T} / ${R()}` : T;
-  }, [x, I, B, o, t, R]), A = x === "rtl" ? B || I : I || B, M = X();
-  $(() => {
-    const c = m !== F.current;
-    F.current = m, c && (d.current = !1), !i && !d.current && P(M);
-  }, [M, i, m]);
-  const Y = f(
-    (c) => {
-      b && (a(!0), P(A), d.current = !1, requestAnimationFrame(() => c.target.select()));
+    return !u && !f ? T = n : u ? f ? u === f ? T = u : T = `${u} - ${f}` : T = u : T = f, t ? `${T} / ${A()}` : T;
+  }, [B, j, n, t, A]), F = p === "rtl" ? j || B : B || j, O = q();
+  W(() => {
+    const u = h !== I.current;
+    I.current = h, u && (v.current = !1), !l && !v.current && a(O);
+  }, [O, l, h]);
+  const V = w(
+    (u) => {
+      x && (b(!0), a(F), v.current = !1, requestAnimationFrame(() => u.target.select()));
     },
-    [b, A]
-  ), _ = f(() => {
-    a(!1), d.current || P(M);
-  }, [M]), Q = f(
-    (c) => {
-      if (c.key === "Enter") {
-        if (r && w.trim()) {
-          const v = r.semanticNameToIndex(w.trim());
-          v != null && v >= 0 && v < p && (g.current?.jumpToPage(v), d.current = !0);
+    [x, F]
+  ), G = w(() => {
+    b(!1), v.current || a(O);
+  }, [O]), s = w(
+    (u) => {
+      if (u.key === "Enter") {
+        if (c && E.trim()) {
+          const f = c.semanticNameToIndex(E.trim());
+          f != null && f >= 0 && f < P && (m.current?.jumpToPage(f), v.current = !0);
         }
-        c.currentTarget.blur();
-      } else c.key === "Escape" && c.currentTarget.blur();
+        u.currentTarget.blur();
+      } else u.key === "Escape" && u.currentTarget.blur();
     },
-    [w, r, p, g]
-  ), Z = f((c) => {
-    P(c.target.value);
+    [E, c, P, m]
+  ), M = w((u) => {
+    a(u.target.value);
   }, []);
-  return b ? /* @__PURE__ */ n(
+  return x ? /* @__PURE__ */ o(
     "input",
     {
       type: "text",
-      className: `flipbook-toolbar-indicator ${i ? "flipbook-toolbar-indicator--editing" : ""} ${s ?? ""}`.trim(),
-      value: w,
-      onFocus: Y,
-      onBlur: _,
-      onKeyDown: Q,
-      onChange: Z,
-      "aria-label": u,
+      className: `flipbook-toolbar-indicator ${l ? "flipbook-toolbar-indicator--editing" : ""} ${i ?? ""}`.trim(),
+      value: E,
+      onFocus: V,
+      onBlur: G,
+      onKeyDown: s,
+      onChange: M,
+      "aria-label": d,
       "aria-live": "polite",
       "aria-atomic": "true",
-      maxLength: h,
-      readOnly: !b
+      maxLength: g,
+      readOnly: !x
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ o(
     "span",
     {
-      className: `flipbook-toolbar-indicator ${s ?? ""}`.trim(),
+      className: `flipbook-toolbar-indicator ${i ?? ""}`.trim(),
       "aria-live": "polite",
       "aria-atomic": "true",
-      children: M
+      children: O
     }
   );
-}, ke = ({ children: e, className: t }) => {
-  const { flipBookRef: o, isFirstPage: l, direction: s } = N(), u = () => {
-    o.current?.flipPrev();
-  }, h = s === "rtl" ? "Next page" : "Previous page", g = s === "rtl" ? /* @__PURE__ */ n(V, { size: 20 }) : /* @__PURE__ */ n(q, { size: 20 });
-  return /* @__PURE__ */ n(
-    L,
+}, Be = ({ children: e, className: t }) => {
+  const { flipBookRef: n, isFirstPage: r, direction: i } = S(), d = () => {
+    n.current?.flipPrev();
+  }, g = i === "rtl" ? "Next page" : "Previous page", m = /* @__PURE__ */ o(ie, { size: 20 });
+  return /* @__PURE__ */ o(
+    z,
     {
-      onClick: u,
-      ariaLabel: h,
-      disabled: l,
+      onClick: d,
+      ariaLabel: g,
+      disabled: r,
       className: `flipbook-toolbar-prev ${t ?? ""}`.trim(),
-      children: e ?? g
+      children: e ?? m
     }
   );
-}, ve = ({
+}, Fe = ({
   tocPageIndex: e = 4,
   children: t,
-  ariaLabel: o = "Table of contents",
-  className: l
+  ariaLabel: n,
+  className: r
 }) => {
-  const { flipBookRef: s, currentPage: u } = N();
-  return /* @__PURE__ */ n(
-    L,
+  const { flipBookRef: i, currentPage: d, locale: g } = S(), m = n ?? D("toolbar.toc", g);
+  return /* @__PURE__ */ o(
+    z,
     {
       onClick: () => {
-        s.current?.jumpToPage(e);
+        i.current?.goToPage(e);
       },
-      ariaLabel: o,
-      disabled: u === e,
-      className: `flipbook-toolbar-toc ${l ?? ""}`.trim(),
-      children: t ?? /* @__PURE__ */ n(ae, { size: 18 })
+      ariaLabel: m,
+      disabled: d === e,
+      className: `flipbook-toolbar-toc ${r ?? ""}`.trim(),
+      children: t ?? /* @__PURE__ */ o(me, { size: 18 })
     }
   );
-}, we = ({
+}, $e = ({
   flipBookRef: e,
   direction: t = "ltr",
-  pageSemantics: o,
-  className: l = "",
-  children: s,
-  enableHotkeys: u = !0,
-  commands: h,
-  commandOptions: g
+  locale: n,
+  pageSemantics: r,
+  className: i = "",
+  children: d,
+  enableHotkeys: g = !0,
+  commands: m,
+  commandOptions: c
 }) => {
-  const [r, x] = y(0), [m, p] = y(0), [k, b] = y(!0), [w, P] = y(!1), i = f(() => {
-    const d = e.current;
-    d && (x(d.getCurrentPageIndex()), p(d.getTotalPages()), b(d.isFirstPage()), P(d.isLastPage()));
+  const p = n ?? (t === "rtl" ? "he-IL" : "en"), [h, P] = C(0), [y, N] = C(0), [x, E] = C(0), [a, l] = C(!0), [b, v] = C(!1), I = w(() => {
+    const k = e.current;
+    k && (P(k.getCurrentPageIndex()), N(k.getTotalPages()), E(k.getOf()), l(k.isFirstPage()), v(k.isLastPage()));
   }, [e]);
-  $(() => {
-    i();
-    const d = setInterval(i, 100);
-    return () => clearInterval(d);
-  }, [i]);
-  const a = /* @__PURE__ */ n(
-    G.Provider,
+  W(() => {
+    I();
+    const k = setInterval(I, 200);
+    return () => clearInterval(k);
+  }, [I]);
+  const R = /* @__PURE__ */ o(
+    ee.Provider,
     {
       value: {
         flipBookRef: e,
         direction: t,
-        pageSemantics: o,
-        currentPage: r,
-        totalPages: m,
-        isFirstPage: k,
-        isLastPage: w
+        locale: p,
+        pageSemantics: r,
+        currentPage: h,
+        totalPages: y,
+        of: x,
+        isFirstPage: a,
+        isLastPage: b
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ o(
         "div",
         {
-          className: `flipbook-toolbar ${l}`.trim(),
+          className: `flipbook-toolbar ${t === "rtl" ? "flipbook-toolbar--rtl" : ""} ${i}`.trim(),
           role: "toolbar",
           "aria-label": "FlipBook navigation",
           dir: t,
-          children: s
+          children: d
         }
       )
     }
   );
-  return /* @__PURE__ */ n(
-    oe,
+  return /* @__PURE__ */ o(
+    se,
     {
       flipBookRef: e,
-      currentPage: r,
-      totalPages: m,
+      currentPage: h,
+      totalPages: y,
       direction: t,
-      commands: h,
-      commandOptions: g,
-      disableHotkeys: !u,
-      children: a
+      commands: m,
+      commandOptions: c,
+      disableHotkeys: !g,
+      children: R
     }
   );
 };
 export {
-  he as ActionButton,
-  de as BookshelfIcon,
-  J as ChevronFirstIcon,
-  U as ChevronLastIcon,
-  q as ChevronLeftIcon,
-  V as ChevronRightIcon,
-  ee as DEFAULT_HOTKEYS,
-  me as FirstPageButton,
-  ge as FullscreenButton,
-  fe as LastPageButton,
-  re as MaximizeIcon,
-  ie as MinimizeIcon,
-  pe as NextButton,
-  xe as PageIndicator,
-  ke as PrevButton,
-  xe as SemanticPageIndicator,
-  ae as TableOfContentsIcon,
-  ve as TocButton,
-  we as Toolbar,
-  L as ToolbarButton,
-  te as defaultCommands,
-  ue as useCommands,
-  N as useToolbar
+  Ce as ActionButton,
+  Pe as BookshelfIcon,
+  de as ChevronFirstIcon,
+  ue as ChevronLastIcon,
+  ie as ChevronLeftIcon,
+  ce as ChevronRightIcon,
+  re as DEFAULT_HOTKEYS,
+  ye as DownloadDropdown,
+  fe as DownloadIcon,
+  Le as FirstPageButton,
+  Te as FullscreenButton,
+  Ne as LastPageButton,
+  ge as MaximizeIcon,
+  he as MinimizeIcon,
+  Ee as NextButton,
+  Ie as PageIndicator,
+  Be as PrevButton,
+  Ie as SemanticPageIndicator,
+  me as TableOfContentsIcon,
+  Fe as TocButton,
+  $e as Toolbar,
+  z as ToolbarButton,
+  ae as defaultCommands,
+  ve as useCommands,
+  S as useToolbar
 };
 //# sourceMappingURL=index.js.map