@somecat/epub-reader 0.1.0

package/dist/react.cjs

@@ -0,0 +1,1144 @@
+'use strict';
+
+var react = require('react');
+require('foliate-js/view.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/react/EBookReader.tsx
+var getContentCSS = (fontSize, isDark, extraCSS) => `
+@namespace epub "http://www.idpf.org/2007/ops";
+html {
+  color-scheme: ${isDark ? "dark" : "light"} !important;
+}
+body {
+  background-color: transparent !important;
+  color: ${isDark ? "#e0e0e0" : "black"} !important;
+  font-size: ${fontSize}% !important;
+}
+p {
+  line-height: 1.6;
+  margin-bottom: 1em;
+}
+a {
+  color: ${isDark ? "#64b5f6" : "#2563eb"} !important;
+}
+img {
+  max-width: 100%;
+  height: auto;
+  object-fit: contain;
+  ${isDark ? "filter: brightness(0.8) contrast(1.2);" : ""}
+}
+${extraCSS ?? ""}
+`;
+function createEBookReader(container, options = {}) {
+  if (!container) throw new Error("container is required");
+  if (!customElements.get("foliate-view")) throw new Error("foliate-view is not defined");
+  const {
+    darkMode: initialDarkMode = false,
+    fontSize: initialFontSize = 100,
+    extraContentCSS,
+    onReady,
+    onError,
+    onProgress,
+    onToc,
+    onSearchProgress,
+    onContentLoad
+  } = options;
+  let destroyed = false;
+  let toc = [];
+  let fontSize = initialFontSize;
+  let darkMode = initialDarkMode;
+  let searchToken = 0;
+  container.innerHTML = "";
+  const viewer = document.createElement("foliate-view");
+  viewer.style.display = "block";
+  viewer.style.width = "100%";
+  viewer.style.height = "100%";
+  viewer.setAttribute("margin", "48");
+  viewer.setAttribute("gap", "0.07");
+  const applyStyles = () => {
+    if (destroyed) return;
+    if (!viewer.renderer?.setStyles) return;
+    viewer.renderer.setStyles(getContentCSS(fontSize, darkMode, extraContentCSS));
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        if (destroyed) return;
+        viewer.renderer?.render?.();
+        viewer.renderer?.expand?.();
+      }, 50);
+    });
+  };
+  const handleLoad = (e) => {
+    applyStyles();
+    const detail = e.detail;
+    if (detail?.doc) onContentLoad?.(detail.doc);
+  };
+  const handleRelocate = (e) => {
+    const detail = e.detail;
+    onProgress?.(detail);
+  };
+  viewer.addEventListener("load", handleLoad);
+  viewer.addEventListener("relocate", handleRelocate);
+  container.appendChild(viewer);
+  const handle = {
+    async open(file) {
+      if (destroyed) return;
+      if (!file) return;
+      try {
+        viewer.clearSearch?.();
+        searchToken++;
+        await viewer.open?.(file);
+        const nextToc = viewer.book?.toc ?? [];
+        toc = nextToc;
+        onToc?.(toc);
+        await viewer.init?.({ showTextStart: true });
+        applyStyles();
+      } catch (error) {
+        onError?.(error);
+        throw error;
+      }
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      searchToken++;
+      viewer.removeEventListener("load", handleLoad);
+      viewer.removeEventListener("relocate", handleRelocate);
+      container.innerHTML = "";
+    },
+    prevPage() {
+      viewer.goLeft?.();
+    },
+    nextPage() {
+      viewer.goRight?.();
+    },
+    prevSection() {
+      viewer.renderer?.prevSection?.();
+    },
+    nextSection() {
+      viewer.renderer?.nextSection?.();
+    },
+    goTo(target) {
+      if (!target) return;
+      viewer.goTo?.(target);
+    },
+    goToFraction(fraction) {
+      const safe = Math.min(1, Math.max(0, fraction));
+      viewer.goToFraction?.(safe);
+    },
+    setDarkMode(nextDarkMode) {
+      darkMode = nextDarkMode;
+      applyStyles();
+    },
+    setFontSize(nextFontSize) {
+      const safe = Math.min(300, Math.max(50, nextFontSize));
+      fontSize = safe;
+      applyStyles();
+    },
+    async search(query, opts = {}) {
+      const normalized = query.trim();
+      if (!normalized) {
+        viewer.clearSearch?.();
+        return [];
+      }
+      const token = ++searchToken;
+      const results = [];
+      try {
+        for await (const item of viewer.search?.({
+          query: normalized,
+          matchCase: Boolean(opts.matchCase),
+          matchWholeWords: Boolean(opts.wholeWords),
+          matchDiacritics: Boolean(opts.matchDiacritics)
+        }) ?? []) {
+          if (destroyed || token !== searchToken) return results;
+          if (item === "done") {
+            onSearchProgress?.({ done: true, progress: 1 });
+            break;
+          }
+          if (typeof item === "object" && item && "progress" in item) {
+            const progress = item.progress;
+            if (typeof progress === "number") onSearchProgress?.({ progress });
+            continue;
+          }
+          const anyItem = item;
+          if (anyItem?.subitems?.length) {
+            for (const sub of anyItem.subitems) {
+              results.push({
+                label: anyItem.label,
+                cfi: sub?.cfi,
+                excerpt: sub?.excerpt,
+                title: sub?.title
+              });
+            }
+          } else if (anyItem?.cfi) {
+            results.push({
+              cfi: anyItem.cfi,
+              excerpt: anyItem.excerpt,
+              title: anyItem.title
+            });
+          }
+        }
+      } catch (error) {
+        onError?.(error);
+        throw error;
+      }
+      return results;
+    },
+    cancelSearch() {
+      searchToken++;
+    },
+    clearSearch() {
+      viewer.clearSearch?.();
+    },
+    getToc() {
+      return toc;
+    }
+  };
+  onReady?.(handle);
+  return handle;
+}
+
+// src/core/icons.ts
+var icons = {
+  list: '<path d="M3 12h18M3 6h18M3 18h18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  search: '<path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  "chevron-left": '<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  "chevron-right": '<path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  "chevrons-left": '<path d="M11 17l-5-5 5-5M18 17l-5-5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  "chevrons-right": '<path d="M13 17l5-5-5-5M6 17l5-5-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  sun: '<circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>',
+  moon: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  plus: '<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  minus: '<path d="M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  x: '<path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  type: '<path d="M4 7V4h16v3M9 20h6M12 4v16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>',
+  sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'
+};
+var SvgIcon = ({ name, size = 24, color = "currentColor", className }) => {
+  const iconPath = icons[name] || "";
+  const style = react.useMemo(() => {
+    const sizeVal = typeof size === "number" ? `${size}px` : size;
+    return {
+      width: sizeVal,
+      height: sizeVal,
+      color,
+      minWidth: sizeVal,
+      display: "inline-block",
+      verticalAlign: "middle"
+    };
+  }, [size, color]);
+  if (!iconPath) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      style,
+      className,
+      dangerouslySetInnerHTML: { __html: iconPath }
+    }
+  );
+};
+var DesktopToolbar = ({
+  onToggleToc,
+  onToggleSearch,
+  onPrevSection,
+  onPrevPage,
+  onNextPage,
+  onNextSection,
+  darkMode,
+  onToggleDarkMode,
+  fontSize,
+  onFontSizeChange
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__toolbar", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__panel", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onToggleToc, title: "\u76EE\u5F55", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "list" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onToggleSearch, title: "\u641C\u7D22", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "search" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__divider" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onPrevSection, title: "\u4E0A\u4E00\u7AE0", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-left" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onPrevPage, title: "\u4E0A\u4E00\u9875", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevron-left" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onNextPage, title: "\u4E0B\u4E00\u9875", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevron-right" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onNextSection, title: "\u4E0B\u4E00\u7AE0", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-right" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__panel", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onToggleDarkMode, title: "\u4E3B\u9898", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: darkMode ? "sun" : "moon" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__divider" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onFontSizeChange(fontSize + 10), title: "\u589E\u5927\u5B57\u53F7", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "plus" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__font", children: [
+        fontSize,
+        "%"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onFontSizeChange(fontSize - 10), title: "\u51CF\u5C0F\u5B57\u53F7", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "minus" }) })
+    ] })
+  ] });
+};
+var DesktopBottomBar = ({
+  status,
+  errorText,
+  sectionLabel,
+  displayedPercent,
+  onSeekStart,
+  onSeekChange,
+  onSeekEnd,
+  onSeekCommit
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__bottom", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__bottom-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ebook-reader__status", children: status === "error" ? errorText || "\u9519\u8BEF" : status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "\u5C31\u7EEA" }),
+      sectionLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ebook-reader__section", children: sectionLabel }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__bottom-right", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          className: "ebook-reader__range",
+          type: "range",
+          min: 0,
+          max: 100,
+          step: 1,
+          value: displayedPercent,
+          onChange: (e) => {
+            onSeekStart();
+            onSeekChange(Number(e.target.value));
+          },
+          onPointerUp: (e) => {
+            const v = Number(e.target.value);
+            onSeekEnd(v);
+          },
+          onKeyUp: (e) => {
+            if (e.key !== "Enter") return;
+            const v = Number(e.target.value);
+            onSeekCommit(v);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ebook-reader__percent", children: [
+        displayedPercent,
+        "%"
+      ] })
+    ] })
+  ] });
+};
+var TocTree = ({ items, onSelect }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ebook-reader__toc-list", children: items.map((item, idx) => {
+    const key = item.href || `${item.label ?? "item"}-${idx}`;
+    const hasChildren = Boolean(item.subitems?.length);
+    const label = item.label || item.href || "\u672A\u547D\u540D";
+    if (!hasChildren) {
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ebook-reader__toc-item", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__toc-btn", onClick: () => onSelect(item.href), children: label }) }, key);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ebook-reader__toc-item", children: /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "ebook-reader__toc-details", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "ebook-reader__toc-summary", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(TocTree, { items: item.subitems ?? [], onSelect })
+    ] }) }, key);
+  }) });
+};
+var TocDrawer = ({ isOpen, onClose, toc, onSelect }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: `ebook-reader__drawer ${isOpen ? "is-open" : ""}`, "aria-hidden": !isOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__drawer-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__drawer-title", children: "\u76EE\u5F55" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "x" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__drawer-body", children: toc.length ? /* @__PURE__ */ jsxRuntime.jsx(
+      TocTree,
+      {
+        items: toc,
+        onSelect: (href) => {
+          onSelect(href);
+          onClose();
+        }
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__empty", children: "\u672A\u627E\u5230\u76EE\u5F55" }) })
+  ] });
+};
+var SearchResultList = ({ results, onSelect }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "ebook-reader__search-list", children: results.map((r, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "ebook-reader__search-item", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: "ebook-reader__search-btn",
+      onClick: () => {
+        if (r.cfi) onSelect(r.cfi);
+      },
+      children: [
+        r.label ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__search-label", children: r.label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__search-excerpt", children: typeof r.excerpt === "string" ? r.excerpt : `${r.excerpt?.pre ?? ""}${r.excerpt?.match ?? ""}${r.excerpt?.post ?? ""}` })
+      ]
+    }
+  ) }, `${r.cfi ?? "no-cfi"}-${idx}`)) });
+};
+var SearchDrawer = ({
+  isOpen,
+  onClose,
+  status,
+  search,
+  onSearch,
+  onQueryChange,
+  onOptionChange,
+  onCancelSearch,
+  onResultSelect
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: `ebook-reader__drawer right ${isOpen ? "is-open" : ""}`, "aria-hidden": !isOpen, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__drawer-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__drawer-title", children: "\u641C\u7D22" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "x" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__drawer-body", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            className: "ebook-reader__input",
+            placeholder: "\u8F93\u5165\u5173\u952E\u8BCD",
+            value: search.query,
+            onChange: (e) => {
+              const v = e.target.value;
+              onQueryChange(v);
+              if (!v.trim()) onSearch("");
+            },
+            disabled: status !== "ready",
+            onKeyDown: (e) => {
+              if (e.key === "Enter") onSearch(search.query);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onSearch(search.query), disabled: status !== "ready", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "search" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__checks", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ebook-reader__check", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: Boolean(search.options.matchCase),
+              onChange: (e) => onOptionChange({ matchCase: e.target.checked })
+            }
+          ),
+          "\u533A\u5206\u5927\u5C0F\u5199"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ebook-reader__check", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: Boolean(search.options.wholeWords),
+              onChange: (e) => onOptionChange({ wholeWords: e.target.checked })
+            }
+          ),
+          "\u5168\u8BCD\u5339\u914D"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ebook-reader__check", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: Boolean(search.options.matchDiacritics),
+              onChange: (e) => onOptionChange({ matchDiacritics: e.target.checked })
+            }
+          ),
+          "\u533A\u5206\u53D8\u97F3"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__meta", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "\u8FDB\u5EA6 ",
+          search.progressPercent,
+          "%"
+        ] }),
+        search.searching ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u641C\u7D22\u4E2D\u2026" }) : null,
+        search.searching ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__link", onClick: onCancelSearch, children: "\u53D6\u6D88" }) : null
+      ] }),
+      search.results.length ? /* @__PURE__ */ jsxRuntime.jsx(SearchResultList, { results: search.results, onSelect: onResultSelect }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__empty", children: search.query.trim() ? "\u65E0\u5339\u914D\u7ED3\u679C" : "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD" })
+    ] })
+  ] });
+};
+var MobileUI = ({
+  barVisible,
+  activePanel,
+  onTogglePanel,
+  onClosePanel,
+  toc,
+  search,
+  status,
+  errorText,
+  sectionLabel,
+  displayedPercent,
+  darkMode,
+  fontSize,
+  onTocSelect,
+  onSearch,
+  onSearchQueryChange,
+  onSearchOptionChange,
+  onCancelSearch,
+  onSearchResultSelect,
+  onSeekStart,
+  onSeekChange,
+  onSeekEnd,
+  onSeekCommit,
+  onToggleDarkMode,
+  onFontSizeChange
+}) => {
+  const mobileTitle = activePanel === "menu" ? "\u76EE\u5F55" : activePanel === "search" ? "\u641C\u7D22" : activePanel === "progress" ? "\u8FDB\u5EA6" : activePanel === "theme" ? "\u660E\u6697" : activePanel === "font" ? "\u5B57\u53F7" : "";
+  const [tooltip, setTooltip] = react.useState(null);
+  const timerRef = react.useRef(null);
+  const handleTouchStart = (e, text) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    timerRef.current = window.setTimeout(() => {
+      setTooltip({
+        text,
+        left: rect.left + rect.width / 2
+      });
+    }, 500);
+  };
+  const handleTouchEnd = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    setTooltip(null);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `ebook-reader__mbar ${barVisible ? "is-visible" : ""}`, children: [
+      tooltip && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "ebook-reader__tooltip",
+          style: {
+            position: "fixed",
+            bottom: "60px",
+            // 位于工具栏上方
+            left: tooltip.left,
+            transform: "translateX(-50%)",
+            background: "rgba(0,0,0,0.8)",
+            color: "#fff",
+            padding: "4px 8px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            pointerEvents: "none",
+            zIndex: 1e3,
+            whiteSpace: "nowrap"
+          },
+          children: tooltip.text
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ebook-reader__btn",
+          onClick: () => onTogglePanel("menu"),
+          "aria-pressed": activePanel === "menu",
+          onTouchStart: (e) => handleTouchStart(e, "\u76EE\u5F55"),
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          title: "\u76EE\u5F55",
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "list" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ebook-reader__btn",
+          onClick: () => onTogglePanel("search"),
+          "aria-pressed": activePanel === "search",
+          onTouchStart: (e) => handleTouchStart(e, "\u641C\u7D22"),
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          title: "\u641C\u7D22",
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "search" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ebook-reader__btn",
+          onClick: () => onTogglePanel("progress"),
+          "aria-pressed": activePanel === "progress",
+          onTouchStart: (e) => handleTouchStart(e, "\u8FDB\u5EA6"),
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          title: "\u8FDB\u5EA6",
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "sliders" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ebook-reader__btn",
+          onClick: () => onTogglePanel("theme"),
+          "aria-pressed": activePanel === "theme",
+          onTouchStart: (e) => handleTouchStart(e, "\u660E\u6697"),
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          title: "\u660E\u6697",
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "sun" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "ebook-reader__btn",
+          onClick: () => onTogglePanel("font"),
+          "aria-pressed": activePanel === "font",
+          onTouchStart: (e) => handleTouchStart(e, "\u5B57\u53F7"),
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          title: "\u5B57\u53F7",
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "type" })
+        }
+      )
+    ] }),
+    activePanel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__moverlay", onClick: onClosePanel }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `ebook-reader__msheet ${activePanel ? "is-open" : ""}`, "aria-hidden": !activePanel, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__msheet-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__msheet-title", children: mobileTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: onClosePanel, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "x" }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__msheet-body", children: [
+        activePanel === "menu" ? toc.length ? /* @__PURE__ */ jsxRuntime.jsx(
+          TocTree,
+          {
+            items: toc,
+            onSelect: (href) => {
+              onTocSelect(href);
+              onClosePanel();
+            }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__empty", children: "\u672A\u627E\u5230\u76EE\u5F55" }) : null,
+        activePanel === "search" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "ebook-reader__input",
+                placeholder: "\u8F93\u5165\u5173\u952E\u8BCD",
+                value: search.query,
+                onChange: (e) => {
+                  const v = e.target.value;
+                  onSearchQueryChange(v);
+                  if (!v.trim()) onSearch("");
+                },
+                disabled: status !== "ready",
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") onSearch(search.query);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onSearch(search.query), disabled: status !== "ready", children: "\u641C\u7D22" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__checks", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ebook-reader__check", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: Boolean(search.options.matchCase),
+                  onChange: (e) => onSearchOptionChange({ matchCase: e.target.checked })
+                }
+              ),
+              "\u533A\u5206\u5927\u5C0F\u5199"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ebook-reader__check", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: Boolean(search.options.wholeWords),
+                  onChange: (e) => onSearchOptionChange({ wholeWords: e.target.checked })
+                }
+              ),
+              "\u5168\u8BCD\u5339\u914D"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "ebook-reader__check", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: Boolean(search.options.matchDiacritics),
+                  onChange: (e) => onSearchOptionChange({ matchDiacritics: e.target.checked })
+                }
+              ),
+              "\u533A\u5206\u53D8\u97F3"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__meta", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "\u8FDB\u5EA6 ",
+              search.progressPercent,
+              "%"
+            ] }),
+            search.searching ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u641C\u7D22\u4E2D\u2026" }) : null,
+            search.searching ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__link", onClick: onCancelSearch, children: "\u53D6\u6D88" }) : null
+          ] }),
+          search.results.length ? /* @__PURE__ */ jsxRuntime.jsx(SearchResultList, { results: search.results, onSelect: onSearchResultSelect }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__empty", children: search.query.trim() ? "\u65E0\u5339\u914D\u7ED3\u679C" : "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD" })
+        ] }) : null,
+        activePanel === "progress" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__meta", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ebook-reader__status", children: status === "error" ? errorText || "\u9519\u8BEF" : status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "\u5C31\u7EEA" }),
+            sectionLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: sectionLabel }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__mprogress", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "ebook-reader__range",
+                type: "range",
+                min: 0,
+                max: 100,
+                step: 1,
+                value: displayedPercent,
+                onChange: (e) => {
+                  onSeekStart();
+                  onSeekChange(Number(e.target.value));
+                },
+                onPointerUp: (e) => {
+                  const v = Number(e.target.value);
+                  onSeekEnd(v);
+                },
+                onKeyUp: (e) => {
+                  if (e.key !== "Enter") return;
+                  const v = Number(e.target.value);
+                  onSeekCommit(v);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__mprogress-percent", children: [
+              displayedPercent,
+              "%"
+            ] })
+          ] })
+        ] }) : null,
+        activePanel === "theme" ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onToggleDarkMode(!darkMode), children: darkMode ? "\u5207\u6362\u5230\u4EAE\u8272" : "\u5207\u6362\u5230\u6697\u9ED1" }) : null,
+        activePanel === "font" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__mfont", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onFontSizeChange(fontSize - 10), children: "A-" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ebook-reader__font", children: [
+            fontSize,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "ebook-reader__btn", onClick: () => onFontSizeChange(fontSize + 10), children: "A+" })
+        ] }) : null
+      ] })
+    ] })
+  ] });
+};
+var MOBILE_MAX_WIDTH = 768;
+var WIDE_MIN_WIDTH = 1024;
+var clamp = (n, min, max) => Math.min(max, Math.max(min, n));
+var mergeClassName = (...parts) => parts.filter(Boolean).join(" ");
+var EBookReader = react.forwardRef(function EBookReader2({
+  file,
+  className,
+  style,
+  defaultFontSize = 100,
+  fontSize: controlledFontSize,
+  onFontSizeChange,
+  defaultDarkMode = false,
+  darkMode: controlledDarkMode,
+  onDarkModeChange,
+  enableKeyboardNav = true,
+  defaultSearchOptions = { matchCase: false, wholeWords: false, matchDiacritics: false },
+  onReady,
+  onError,
+  onProgress
+}, ref) {
+  const rootRef = react.useRef(null);
+  const viewerHostRef = react.useRef(null);
+  const readerRef = react.useRef(null);
+  const [status, setStatus] = react.useState("idle");
+  const [errorText, setErrorText] = react.useState("");
+  const [toc, setToc] = react.useState([]);
+  const [tocOpen, setTocOpen] = react.useState(false);
+  const [searchOpen, setSearchOpen] = react.useState(false);
+  const [progressInfo, setProgressInfo] = react.useState(null);
+  const [isSeeking, setIsSeeking] = react.useState(false);
+  const [seekPercent, setSeekPercent] = react.useState(0);
+  const [uncontrolledFontSize, setUncontrolledFontSize] = react.useState(defaultFontSize);
+  const [uncontrolledDarkMode, setUncontrolledDarkMode] = react.useState(defaultDarkMode);
+  const fontSize = controlledFontSize ?? uncontrolledFontSize;
+  const darkMode = controlledDarkMode ?? uncontrolledDarkMode;
+  const [search, setSearch] = react.useState({
+    query: "",
+    options: defaultSearchOptions,
+    progressPercent: 0,
+    searching: false,
+    results: []
+  });
+  const [layout, setLayout] = react.useState("default");
+  const [mobileBarVisible, setMobileBarVisible] = react.useState(false);
+  const [mobilePanel, setMobilePanel] = react.useState(null);
+  const layoutRef = react.useRef(layout);
+  const boundDocsRef = react.useRef(/* @__PURE__ */ new WeakSet());
+  const gestureRef = react.useRef({ startX: 0, startY: 0, startAt: 0, tracking: false, moved: false, actionTaken: false });
+  const percentage = react.useMemo(() => Math.round((progressInfo?.fraction ?? 0) * 100), [progressInfo]);
+  const displayedPercent = isSeeking ? seekPercent : percentage;
+  const sectionLabel = progressInfo?.tocItem?.label ?? "";
+  react.useEffect(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect?.width ?? el.getBoundingClientRect().width;
+      const next = w <= MOBILE_MAX_WIDTH ? "mobile" : w >= WIDE_MIN_WIDTH ? "wide" : "default";
+      setLayout((prev) => prev === next ? prev : next);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  react.useEffect(() => {
+    if (layout === "mobile") return;
+    setMobilePanel(null);
+    setMobileBarVisible(false);
+  }, [layout]);
+  react.useEffect(() => {
+    layoutRef.current = layout;
+  }, [layout]);
+  const closeMobileSheet = react.useCallback(() => setMobilePanel(null), []);
+  const toggleMobilePanel = react.useCallback((panel) => {
+    setMobileBarVisible(true);
+    setMobilePanel((prev) => prev === panel ? null : panel);
+  }, []);
+  const onPointerDown = react.useCallback((e) => {
+    if (layoutRef.current !== "mobile") return;
+    const t = e.target;
+    if (!t) return;
+    if (t.closest(".ebook-reader__mbar") || t.closest(".ebook-reader__msheet")) return;
+    if (t.closest('a,button,input,textarea,select,label,[role="button"],[contenteditable="true"]')) return;
+    gestureRef.current.tracking = true;
+    gestureRef.current.moved = false;
+    gestureRef.current.actionTaken = false;
+    gestureRef.current.startAt = e.timeStamp;
+    gestureRef.current.startX = e.screenX;
+    gestureRef.current.startY = e.screenY;
+  }, []);
+  const onPointerMove = react.useCallback((e) => {
+    if (!gestureRef.current.tracking) return;
+    const dx = e.screenX - gestureRef.current.startX;
+    const dy = e.screenY - gestureRef.current.startY;
+    if (Math.abs(dx) > 8 || Math.abs(dy) > 8) gestureRef.current.moved = true;
+    if (Math.abs(dy) < 8) return;
+    if (Math.abs(dy) < Math.abs(dx)) {
+      if (Math.abs(dx) >= 8) gestureRef.current.tracking = false;
+      return;
+    }
+    if (dy <= -24) {
+      gestureRef.current.actionTaken = true;
+      gestureRef.current.tracking = false;
+      setMobileBarVisible(true);
+      return;
+    }
+    if (dy >= 24) {
+      gestureRef.current.actionTaken = true;
+      gestureRef.current.tracking = false;
+      setMobileBarVisible(false);
+      setMobilePanel(null);
+    }
+  }, []);
+  const onPointerEnd = react.useCallback((e) => {
+    if (layoutRef.current !== "mobile") {
+      gestureRef.current.tracking = false;
+      return;
+    }
+    if (gestureRef.current.actionTaken) {
+      gestureRef.current.tracking = false;
+      gestureRef.current.moved = false;
+      gestureRef.current.actionTaken = false;
+      return;
+    }
+    if (!gestureRef.current.tracking) {
+      gestureRef.current.moved = false;
+      return;
+    }
+    const dx = e.screenX - gestureRef.current.startX;
+    const dy = e.screenY - gestureRef.current.startY;
+    const dt = e.timeStamp - gestureRef.current.startAt;
+    const isTap = !gestureRef.current.moved && Math.hypot(dx, dy) <= 10 && dt <= 300;
+    if (isTap) {
+      setMobileBarVisible((prev) => {
+        const next = !prev;
+        if (!next) setMobilePanel(null);
+        return next;
+      });
+    }
+    gestureRef.current.tracking = false;
+    gestureRef.current.moved = false;
+  }, []);
+  react.useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    root.addEventListener("pointerdown", onPointerDown);
+    root.addEventListener("pointermove", onPointerMove);
+    root.addEventListener("pointerup", onPointerEnd);
+    root.addEventListener("pointercancel", onPointerEnd);
+    return () => {
+      root.removeEventListener("pointerdown", onPointerDown);
+      root.removeEventListener("pointermove", onPointerMove);
+      root.removeEventListener("pointerup", onPointerEnd);
+      root.removeEventListener("pointercancel", onPointerEnd);
+    };
+  }, [onPointerDown, onPointerMove, onPointerEnd]);
+  const setDarkModeInternal = react.useCallback(
+    (next) => {
+      if (controlledDarkMode == null) setUncontrolledDarkMode(next);
+      onDarkModeChange?.(next);
+      readerRef.current?.setDarkMode(next);
+    },
+    [controlledDarkMode, onDarkModeChange]
+  );
+  const setFontSizeInternal = react.useCallback(
+    (next) => {
+      const safe = clamp(next, 50, 300);
+      if (controlledFontSize == null) setUncontrolledFontSize(safe);
+      onFontSizeChange?.(safe);
+      readerRef.current?.setFontSize(safe);
+    },
+    [controlledFontSize, onFontSizeChange]
+  );
+  const closeDrawers = react.useCallback(() => {
+    setTocOpen(false);
+    setSearchOpen(false);
+  }, []);
+  const handleOpenFile = react.useCallback(
+    async (nextFile) => {
+      const reader = readerRef.current;
+      if (!reader) return;
+      setStatus("opening");
+      setErrorText("");
+      setToc([]);
+      setProgressInfo(null);
+      setIsSeeking(false);
+      setSeekPercent(0);
+      setSearch((prev) => ({ ...prev, results: [], progressPercent: 0, searching: false }));
+      try {
+        await reader.open(nextFile);
+        setStatus("ready");
+      } catch (e) {
+        setStatus("error");
+        setErrorText(e?.message ? String(e.message) : "\u6253\u5F00\u5931\u8D25");
+        onError?.(e);
+      }
+    },
+    [onError]
+  );
+  const runSearch = react.useCallback(
+    async (query) => {
+      const reader = readerRef.current;
+      const normalized = query.trim();
+      setSearch((prev) => ({
+        ...prev,
+        query,
+        results: normalized ? prev.results : [],
+        progressPercent: 0,
+        searching: Boolean(normalized)
+      }));
+      if (!reader || !normalized) {
+        reader?.clearSearch();
+        return;
+      }
+      reader.cancelSearch();
+      try {
+        const results = await reader.search(normalized, search.options);
+        setSearch((prev) => ({ ...prev, results, searching: false, progressPercent: 100 }));
+      } catch (e) {
+        setSearch((prev) => ({ ...prev, searching: false }));
+        onError?.(e);
+      }
+    },
+    [onError, search.options]
+  );
+  react.useEffect(() => {
+    const host = viewerHostRef.current;
+    if (!host) return;
+    try {
+      const reader = createEBookReader(host, {
+        darkMode,
+        fontSize,
+        onReady: (h) => onReady?.(h),
+        onError: (e) => onError?.(e),
+        onProgress: (info) => {
+          setProgressInfo(info);
+          onProgress?.(info);
+        },
+        onToc: (items) => setToc(items),
+        onSearchProgress: (info) => {
+          const p = info.progress;
+          if (typeof p === "number") setSearch((prev) => ({ ...prev, progressPercent: Math.round(p * 100) }));
+        },
+        onContentLoad: (doc) => {
+          if (boundDocsRef.current.has(doc)) return;
+          boundDocsRef.current.add(doc);
+          doc.addEventListener("pointerdown", onPointerDown);
+          doc.addEventListener("pointermove", onPointerMove);
+          doc.addEventListener("pointerup", onPointerEnd);
+          doc.addEventListener("pointercancel", onPointerEnd);
+        }
+      });
+      readerRef.current = reader;
+      setStatus("ready");
+    } catch (e) {
+      setStatus("error");
+      setErrorText(e?.message ? String(e.message) : "\u521D\u59CB\u5316\u5931\u8D25");
+      onError?.(e);
+      return;
+    }
+    return () => {
+      readerRef.current?.destroy();
+      readerRef.current = null;
+    };
+  }, [onError, onProgress, onReady]);
+  react.useEffect(() => {
+    if (!file) return;
+    void handleOpenFile(file);
+  }, [file, handleOpenFile]);
+  react.useEffect(() => {
+    readerRef.current?.setDarkMode(darkMode);
+  }, [darkMode]);
+  react.useEffect(() => {
+    readerRef.current?.setFontSize(fontSize);
+  }, [fontSize]);
+  react.useEffect(() => {
+    if (!enableKeyboardNav) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowLeft") readerRef.current?.prevPage();
+      if (e.key === "ArrowRight") readerRef.current?.nextPage();
+      if (e.key === "Escape") closeDrawers();
+    };
+    root.addEventListener("keydown", handleKeyDown);
+    return () => {
+      root.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [closeDrawers, enableKeyboardNav]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      prevPage: () => readerRef.current?.prevPage(),
+      nextPage: () => readerRef.current?.nextPage(),
+      prevSection: () => readerRef.current?.prevSection(),
+      nextSection: () => readerRef.current?.nextSection(),
+      goTo: (target) => readerRef.current?.goTo(target),
+      goToFraction: (frac) => readerRef.current?.goToFraction(frac),
+      search: (q, o) => readerRef.current ? readerRef.current.search(q, o) : Promise.resolve([]),
+      cancelSearch: () => readerRef.current?.cancelSearch(),
+      clearSearch: () => readerRef.current?.clearSearch()
+    }),
+    []
+  );
+  const handleSeekStart = react.useCallback(() => setIsSeeking(true), []);
+  const handleSeekChange = react.useCallback((v) => setSeekPercent(v), []);
+  const handleSeekEnd = react.useCallback((v) => {
+    setIsSeeking(false);
+    readerRef.current?.goToFraction(v / 100);
+  }, []);
+  const handleTocSelect = react.useCallback((href) => {
+    if (href) readerRef.current?.goTo(href);
+  }, []);
+  const handleSearchResultSelect = react.useCallback((cfi) => {
+    if (cfi) readerRef.current?.goTo(cfi);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: mergeClassName("ebook-reader", className),
+      style,
+      "data-theme": darkMode ? "dark" : "light",
+      "data-layout": layout,
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__viewer", ref: viewerHostRef }),
+        layout === "mobile" ? /* @__PURE__ */ jsxRuntime.jsx(
+          MobileUI,
+          {
+            barVisible: mobileBarVisible,
+            activePanel: mobilePanel,
+            onTogglePanel: toggleMobilePanel,
+            onClosePanel: closeMobileSheet,
+            toc,
+            search,
+            status,
+            errorText,
+            sectionLabel,
+            displayedPercent,
+            darkMode,
+            fontSize,
+            onTocSelect: handleTocSelect,
+            onSearch: (q) => void runSearch(q),
+            onSearchQueryChange: (v) => setSearch((prev) => ({ ...prev, query: v })),
+            onSearchOptionChange: (opt) => setSearch((prev) => ({ ...prev, options: { ...prev.options, ...opt } })),
+            onCancelSearch: () => readerRef.current?.cancelSearch(),
+            onSearchResultSelect: handleSearchResultSelect,
+            onSeekStart: handleSeekStart,
+            onSeekChange: handleSeekChange,
+            onSeekEnd: handleSeekEnd,
+            onSeekCommit: handleSeekEnd,
+            onToggleDarkMode: setDarkModeInternal,
+            onFontSizeChange: setFontSizeInternal
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DesktopToolbar,
+            {
+              onToggleToc: () => setTocOpen(true),
+              onToggleSearch: () => setSearchOpen(true),
+              onPrevSection: () => readerRef.current?.prevSection(),
+              onPrevPage: () => readerRef.current?.prevPage(),
+              onNextPage: () => readerRef.current?.nextPage(),
+              onNextSection: () => readerRef.current?.nextSection(),
+              darkMode,
+              onToggleDarkMode: () => setDarkModeInternal(!darkMode),
+              fontSize,
+              onFontSizeChange: setFontSizeInternal
+            }
+          ),
+          (tocOpen || searchOpen) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ebook-reader__overlay", onClick: closeDrawers }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TocDrawer,
+            {
+              isOpen: tocOpen,
+              onClose: () => setTocOpen(false),
+              toc,
+              onSelect: handleTocSelect
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SearchDrawer,
+            {
+              isOpen: searchOpen,
+              onClose: () => setSearchOpen(false),
+              status,
+              search,
+              onSearch: (q) => void runSearch(q),
+              onQueryChange: (v) => setSearch((prev) => ({ ...prev, query: v })),
+              onOptionChange: (opt) => setSearch((prev) => ({ ...prev, options: { ...prev.options, ...opt } })),
+              onCancelSearch: () => readerRef.current?.cancelSearch(),
+              onResultSelect: handleSearchResultSelect
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            DesktopBottomBar,
+            {
+              status,
+              errorText,
+              sectionLabel,
+              displayedPercent,
+              onSeekStart: handleSeekStart,
+              onSeekChange: handleSeekChange,
+              onSeekEnd: handleSeekEnd,
+              onSeekCommit: handleSeekEnd
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+
+exports.EBookReader = EBookReader;
+//# sourceMappingURL=react.cjs.map
+//# sourceMappingURL=react.cjs.map