@somecat/epub-reader 0.1.4 → 0.1.5

package/dist/react.cjs

@@ -5,7 +5,7 @@ require('foliate-js/view.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/EBookReader.tsx
-var getContentCSS = (fontSize, isDark, extraCSS) => `
+var getContentCSS = (fontSize, isDark, lineHeight, letterSpacing, extraCSS) => `
 @namespace epub "http://www.idpf.org/2007/ops";
 html {
   color-scheme: ${isDark ? "dark" : "light"} !important;
@@ -14,9 +14,11 @@ body {
   background-color: transparent !important;
   color: ${isDark ? "#e0e0e0" : "black"} !important;
   font-size: ${fontSize}% !important;
+  line-height: ${lineHeight} !important;
+  letter-spacing: ${letterSpacing}em !important;
 }
 p {
-  line-height: 1.6;
+  line-height: inherit !important;
   margin-bottom: 1em;
 }
 a {
@@ -36,6 +38,8 @@ function createEBookReader(container, options = {}) {
   const {
     darkMode: initialDarkMode = false,
     fontSize: initialFontSize = 100,
+    lineHeight: initialLineHeight = 1.6,
+    letterSpacing: initialLetterSpacing = 0,
     extraContentCSS,
     onReady,
     onError,
@@ -48,6 +52,8 @@ function createEBookReader(container, options = {}) {
   let toc = [];
   let fontSize = initialFontSize;
   let darkMode = initialDarkMode;
+  let lineHeight = initialLineHeight;
+  let letterSpacing = initialLetterSpacing;
   let searchToken = 0;
   container.innerHTML = "";
   const viewer = document.createElement("foliate-view");
@@ -59,7 +65,7 @@ function createEBookReader(container, options = {}) {
   const applyStyles = () => {
     if (destroyed) return;
     if (!viewer.renderer?.setStyles) return;
-    viewer.renderer.setStyles(getContentCSS(fontSize, darkMode, extraContentCSS));
+    viewer.renderer.setStyles(getContentCSS(fontSize, darkMode, lineHeight, letterSpacing, extraContentCSS));
     requestAnimationFrame(() => {
       setTimeout(() => {
         if (destroyed) return;
@@ -135,6 +141,16 @@ function createEBookReader(container, options = {}) {
       fontSize = safe;
       applyStyles();
     },
+    setLineHeight(nextLineHeight) {
+      const safe = Math.min(3, Math.max(1, nextLineHeight));
+      lineHeight = safe;
+      applyStyles();
+    },
+    setLetterSpacing(nextLetterSpacing) {
+      const safe = Math.min(0.3, Math.max(0, nextLetterSpacing));
+      letterSpacing = safe;
+      applyStyles();
+    },
     async search(query, opts = {}) {
       const normalized = query.trim();
       if (!normalized) {
@@ -197,6 +213,36 @@ function createEBookReader(container, options = {}) {
   onReady?.(handle);
   return handle;
 }
+var TocTree = ({ items, onSelect }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "epub-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: "epub-reader__toc-item", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__toc-btn", onClick: () => onSelect(item.href), children: label }) }, key);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "epub-reader__toc-item", children: /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "epub-reader__toc-details", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "epub-reader__toc-summary", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(TocTree, { items: item.subitems ?? [], onSelect })
+    ] }) }, key);
+  }) });
+};
+var SearchResultList = ({ results, onSelect }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "epub-reader__search-list", children: results.map((r, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "epub-reader__search-item", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: "epub-reader__search-btn",
+      onClick: () => {
+        if (r.cfi) onSelect(r.cfi);
+      },
+      children: [
+        r.label ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__search-label", children: r.label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__search-excerpt", children: typeof r.excerpt === "string" ? r.excerpt : `${r.excerpt?.pre ?? ""}${r.excerpt?.match ?? ""}${r.excerpt?.post ?? ""}` })
+      ]
+    }
+  ) }, `${r.cfi ?? "no-cfi"}-${idx}`)) });
+};
 
 // src/core/icons.ts
 var icons = {
@@ -241,226 +287,16 @@ var SvgIcon = ({ name, size = 24, color = "currentColor", className }) => {
     }
   );
 };
-var DesktopToolbar = ({
-  onToggleToc,
-  onToggleSearch,
-  onPrevSection,
-  onPrevPage,
-  onNextPage,
-  onNextSection,
-  darkMode,
-  onToggleDarkMode,
-  fontSize,
-  onFontSizeChange
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__toolbar", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__panel", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onToggleToc, title: "\u76EE\u5F55", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "list" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onToggleSearch, title: "\u641C\u7D22", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "search" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__divider" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onPrevSection, title: "\u4E0A\u4E00\u7AE0", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-left" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onPrevPage, title: "\u4E0A\u4E00\u9875", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevron-left" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onNextPage, title: "\u4E0B\u4E00\u9875", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevron-right" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onNextSection, title: "\u4E0B\u4E00\u7AE0", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-right" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__panel", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onToggleDarkMode, title: "\u4E3B\u9898", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: darkMode ? "sun" : "moon" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__divider" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: () => onFontSizeChange(fontSize + 10), title: "\u589E\u5927\u5B57\u53F7", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "plus" }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__font", children: [
-        fontSize,
-        "%"
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-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: "epub-reader__bottom", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__bottom-left", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "epub-reader__status", children: status === "error" ? errorText || "\u9519\u8BEF" : status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "" }),
-      sectionLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "epub-reader__section", children: sectionLabel }) : null
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__bottom-right", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          className: "epub-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: "epub-reader__percent", children: [
-        displayedPercent,
-        "%"
-      ] })
-    ] })
-  ] });
-};
-var TocTree = ({ items, onSelect }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "epub-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: "epub-reader__toc-item", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__toc-btn", onClick: () => onSelect(item.href), children: label }) }, key);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "epub-reader__toc-item", children: /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "epub-reader__toc-details", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("summary", { className: "epub-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: `epub-reader__drawer ${isOpen ? "is-open" : ""}`, "aria-hidden": !isOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__drawer-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__drawer-title", children: "\u76EE\u5F55" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "x" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__drawer-body", children: toc.length ? /* @__PURE__ */ jsxRuntime.jsx(
-      TocTree,
-      {
-        items: toc,
-        onSelect: (href) => {
-          onSelect(href);
-          onClose();
-        }
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__empty", children: "\u672A\u627E\u5230\u76EE\u5F55" }) })
-  ] });
-};
-var SearchResultList = ({ results, onSelect }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "epub-reader__search-list", children: results.map((r, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "epub-reader__search-item", children: /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      type: "button",
-      className: "epub-reader__search-btn",
-      onClick: () => {
-        if (r.cfi) onSelect(r.cfi);
-      },
-      children: [
-        r.label ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__search-label", children: r.label }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-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: `epub-reader__drawer right ${isOpen ? "is-open" : ""}`, "aria-hidden": !isOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__drawer-header", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__drawer-title", children: "\u641C\u7D22" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "epub-reader__btn", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "x" }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__drawer-body", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__field", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            className: "epub-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: "epub-reader__btn", onClick: () => onSearch(search.query), disabled: status !== "ready", children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "search" }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__checks", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "epub-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: "epub-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: "epub-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: "epub-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: "epub-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: "epub-reader__empty", children: search.query.trim() ? "\u65E0\u5339\u914D\u7ED3\u679C" : "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD" })
-    ] })
-  ] });
-};
 var MobileUI = ({
   barVisible,
   activePanel,
   onTogglePanel,
   onClosePanel,
   toolbarRight,
+  onPrevSection,
+  onPrevPage,
+  onNextPage,
+  onNextSection,
   toc,
   search,
   status,
@@ -469,6 +305,8 @@ var MobileUI = ({
   displayedPercent,
   darkMode,
   fontSize,
+  lineHeight,
+  letterSpacing,
   onTocSelect,
   onSearch,
   onSearchQueryChange,
@@ -480,7 +318,9 @@ var MobileUI = ({
   onSeekEnd,
   onSeekCommit,
   onToggleDarkMode,
-  onFontSizeChange
+  onFontSizeChange,
+  onLineHeightChange,
+  onLetterSpacingChange
 }) => {
   const mobileTitle = activePanel === "menu" ? "\u76EE\u5F55" : activePanel === "search" ? "\u641C\u7D22" : activePanel === "progress" ? "\u8FDB\u5EA6" : activePanel === "settings" ? "\u8BBE\u7F6E" : "";
   const displayedFontSize = Math.min(40, Math.max(10, Math.round(fontSize / 5)));
@@ -632,65 +472,63 @@ var MobileUI = ({
           children: tooltip.text
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mbar-left", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "epub-reader__btn",
-            onClick: () => togglePanelSafe("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: "epub-reader__btn",
-            onClick: () => togglePanelSafe("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: "epub-reader__btn",
-            onClick: () => togglePanelSafe("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: "epub-reader__btn",
-            onClick: () => togglePanelSafe("settings"),
-            "aria-pressed": activePanel === "settings",
-            onTouchStart: (e) => handleTouchStart(e, "\u8BBE\u7F6E"),
-            onTouchEnd: handleTouchEnd,
-            onTouchCancel: handleTouchEnd,
-            title: "\u8BBE\u7F6E",
-            children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "settings" })
-          }
-        )
-      ] }),
-      toolbarRight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__mbar-right", children: toolbarRight }) : null
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "epub-reader__btn",
+          onClick: () => togglePanelSafe("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: "epub-reader__btn",
+          onClick: () => togglePanelSafe("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: "epub-reader__btn",
+          onClick: () => togglePanelSafe("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: "epub-reader__btn",
+          onClick: () => togglePanelSafe("settings"),
+          "aria-pressed": activePanel === "settings",
+          onTouchStart: (e) => handleTouchStart(e, "\u8BBE\u7F6E"),
+          onTouchEnd: handleTouchEnd,
+          onTouchCancel: handleTouchEnd,
+          title: "\u8BBE\u7F6E",
+          children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "settings" })
+        }
+      ),
+      toolbarRight ?? null
     ] }),
     activePanel ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__moverlay", onClick: closePanelSafe }) : null,
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -796,6 +634,60 @@ var MobileUI = ({
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "epub-reader__status", children: status === "error" ? errorText || "\u9519\u8BEF" : status === "opening" ? "\u6B63\u5728\u6253\u5F00\u2026" : "" }),
                 sectionLabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: sectionLabel }) : null
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mnav", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "epub-reader__btn",
+                    onClick: onPrevSection,
+                    onTouchStart: (e) => handleTouchStart(e, "\u4E0A\u4E00\u7AE0"),
+                    onTouchEnd: handleTouchEnd,
+                    onTouchCancel: handleTouchEnd,
+                    title: "\u4E0A\u4E00\u7AE0",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-left" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "epub-reader__btn",
+                    onClick: onPrevPage,
+                    onTouchStart: (e) => handleTouchStart(e, "\u4E0A\u4E00\u9875"),
+                    onTouchEnd: handleTouchEnd,
+                    onTouchCancel: handleTouchEnd,
+                    title: "\u4E0A\u4E00\u9875",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevron-left" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "epub-reader__btn",
+                    onClick: onNextPage,
+                    onTouchStart: (e) => handleTouchStart(e, "\u4E0B\u4E00\u9875"),
+                    onTouchEnd: handleTouchEnd,
+                    onTouchCancel: handleTouchEnd,
+                    title: "\u4E0B\u4E00\u9875",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevron-right" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "epub-reader__btn",
+                    onClick: onNextSection,
+                    onTouchStart: (e) => handleTouchStart(e, "\u4E0B\u4E00\u7AE0"),
+                    onTouchEnd: handleTouchEnd,
+                    onTouchCancel: handleTouchEnd,
+                    title: "\u4E0B\u4E00\u7AE0",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(SvgIcon, { name: "chevrons-right" })
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__mprogress", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
@@ -868,6 +760,47 @@ var MobileUI = ({
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__mfont-a is-big", children: "A" })
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-head", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-label", children: "\u884C\u9AD8" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-value", children: lineHeight.toFixed(2) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    className: "epub-reader__range",
+                    type: "range",
+                    min: 1,
+                    max: 3,
+                    step: 0.05,
+                    value: lineHeight,
+                    "aria-label": "\u884C\u9AD8",
+                    onChange: (e) => onLineHeightChange(Number(e.target.value))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-head", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__msetting-label", children: "\u5B57\u95F4\u8DDD" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "epub-reader__msetting-value", children: [
+                    letterSpacing.toFixed(2),
+                    "em"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    className: "epub-reader__range",
+                    type: "range",
+                    min: 0,
+                    max: 0.3,
+                    step: 0.01,
+                    value: letterSpacing,
+                    "aria-label": "\u5B57\u95F4\u8DDD",
+                    onChange: (e) => onLetterSpacingChange(Number(e.target.value))
+                  }
+                )
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -935,10 +868,17 @@ var EBookReader = react.forwardRef(function EBookReader2({
   fileUrl,
   className,
   style,
+  themeColor,
   mobileToolbarRight,
   defaultFontSize = 100,
   fontSize: controlledFontSize,
   onFontSizeChange,
+  defaultLineHeight = 1.6,
+  lineHeight: controlledLineHeight,
+  onLineHeightChange,
+  defaultLetterSpacing = 0,
+  letterSpacing: controlledLetterSpacing,
+  onLetterSpacingChange,
   defaultDarkMode = false,
   darkMode: controlledDarkMode,
   onDarkModeChange,
@@ -954,16 +894,18 @@ var EBookReader = react.forwardRef(function EBookReader2({
   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 [downloadLoading, setDownloadLoading] = react.useState(null);
   const [uncontrolledFontSize, setUncontrolledFontSize] = react.useState(defaultFontSize);
   const [uncontrolledDarkMode, setUncontrolledDarkMode] = react.useState(defaultDarkMode);
+  const [uncontrolledLineHeight, setUncontrolledLineHeight] = react.useState(defaultLineHeight);
+  const [uncontrolledLetterSpacing, setUncontrolledLetterSpacing] = react.useState(defaultLetterSpacing);
   const fontSize = controlledFontSize ?? uncontrolledFontSize;
   const darkMode = controlledDarkMode ?? uncontrolledDarkMode;
+  const lineHeight = controlledLineHeight ?? uncontrolledLineHeight;
+  const letterSpacing = controlledLetterSpacing ?? uncontrolledLetterSpacing;
   const [search, setSearch] = react.useState({
     query: "",
     options: defaultSearchOptions,
@@ -977,6 +919,7 @@ var EBookReader = react.forwardRef(function EBookReader2({
   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 pcDragRef = react.useRef({ startX: 0, startY: 0, tracking: false, actionTaken: false });
   const isDraggingRef = react.useRef(false);
   const percentage = react.useMemo(() => Math.round((progressInfo?.fraction ?? 0) * 100), [progressInfo]);
   const displayedPercent = isSeeking ? seekPercent : percentage;
@@ -1006,11 +949,19 @@ var EBookReader = react.forwardRef(function EBookReader2({
     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(".epub-reader__mbar") || t.closest(".epub-reader__msheet")) return;
     if (t.closest('a,button,input,textarea,select,label,[role="button"],[contenteditable="true"]')) return;
+    if (layoutRef.current !== "mobile") {
+      if (e.pointerType !== "mouse") return;
+      if ((e.buttons & 1) !== 1) return;
+      pcDragRef.current.tracking = true;
+      pcDragRef.current.actionTaken = false;
+      pcDragRef.current.startX = e.screenX;
+      pcDragRef.current.startY = e.screenY;
+      return;
+    }
     gestureRef.current.tracking = true;
     gestureRef.current.moved = false;
     gestureRef.current.actionTaken = false;
@@ -1019,6 +970,26 @@ var EBookReader = react.forwardRef(function EBookReader2({
     gestureRef.current.startY = e.screenY;
   }, []);
   const onPointerMove = react.useCallback((e) => {
+    if (layoutRef.current !== "mobile") {
+      if (!pcDragRef.current.tracking) return;
+      if (e.pointerType !== "mouse" || (e.buttons & 1) !== 1) {
+        pcDragRef.current.tracking = false;
+        return;
+      }
+      const dx2 = e.screenX - pcDragRef.current.startX;
+      const dy2 = e.screenY - pcDragRef.current.startY;
+      if (Math.abs(dy2) > Math.abs(dx2) && Math.abs(dy2) >= 16) {
+        pcDragRef.current.tracking = false;
+        return;
+      }
+      if (Math.abs(dx2) >= 60 && Math.abs(dx2) > Math.abs(dy2)) {
+        pcDragRef.current.actionTaken = true;
+        pcDragRef.current.tracking = false;
+        if (dx2 > 0) readerRef.current?.prevPage();
+        else readerRef.current?.nextPage();
+      }
+      return;
+    }
     if (!gestureRef.current.tracking) return;
     const dx = e.screenX - gestureRef.current.startX;
     const dy = e.screenY - gestureRef.current.startY;
@@ -1043,7 +1014,8 @@ var EBookReader = react.forwardRef(function EBookReader2({
   }, []);
   const onPointerEnd = react.useCallback((e) => {
     if (layoutRef.current !== "mobile") {
-      gestureRef.current.tracking = false;
+      pcDragRef.current.tracking = false;
+      pcDragRef.current.actionTaken = false;
       return;
     }
     if (gestureRef.current.actionTaken) {
@@ -1101,9 +1073,26 @@ var EBookReader = react.forwardRef(function EBookReader2({
     },
     [controlledFontSize, onFontSizeChange]
   );
-  const closeDrawers = react.useCallback(() => {
-    setTocOpen(false);
-    setSearchOpen(false);
+  const setLineHeightInternal = react.useCallback(
+    (next) => {
+      const safe = clamp(next, 1, 3);
+      if (controlledLineHeight == null) setUncontrolledLineHeight(safe);
+      onLineHeightChange?.(safe);
+      readerRef.current?.setLineHeight(safe);
+    },
+    [controlledLineHeight, onLineHeightChange]
+  );
+  const setLetterSpacingInternal = react.useCallback(
+    (next) => {
+      const safe = clamp(next, 0, 0.3);
+      if (controlledLetterSpacing == null) setUncontrolledLetterSpacing(safe);
+      onLetterSpacingChange?.(safe);
+      readerRef.current?.setLetterSpacing(safe);
+    },
+    [controlledLetterSpacing, onLetterSpacingChange]
+  );
+  const closePanels = react.useCallback(() => {
+    setMobilePanel(null);
   }, []);
   const prepareOpen = react.useCallback(() => {
     setStatus("opening");
@@ -1163,6 +1152,8 @@ var EBookReader = react.forwardRef(function EBookReader2({
       const reader = createEBookReader(host, {
         darkMode,
         fontSize,
+        lineHeight,
+        letterSpacing,
         onReady: (h) => onReady?.(h),
         onError: (e) => onError?.(e),
         onProgress: (info) => {
@@ -1237,6 +1228,12 @@ var EBookReader = react.forwardRef(function EBookReader2({
   react.useEffect(() => {
     readerRef.current?.setFontSize(fontSize);
   }, [fontSize]);
+  react.useEffect(() => {
+    readerRef.current?.setLineHeight(lineHeight);
+  }, [lineHeight]);
+  react.useEffect(() => {
+    readerRef.current?.setLetterSpacing(letterSpacing);
+  }, [letterSpacing]);
   react.useEffect(() => {
     if (!enableKeyboardNav) return;
     const root = rootRef.current;
@@ -1244,13 +1241,13 @@ var EBookReader = react.forwardRef(function EBookReader2({
     const handleKeyDown = (e) => {
       if (e.key === "ArrowLeft") readerRef.current?.prevPage();
       if (e.key === "ArrowRight") readerRef.current?.nextPage();
-      if (e.key === "Escape") closeDrawers();
+      if (e.key === "Escape") closePanels();
     };
     root.addEventListener("keydown", handleKeyDown);
     return () => {
       root.removeEventListener("keydown", handleKeyDown);
     };
-  }, [closeDrawers, enableKeyboardNav]);
+  }, [closePanels, enableKeyboardNav]);
   react.useImperativeHandle(
     ref,
     () => ({
@@ -1281,12 +1278,19 @@ var EBookReader = react.forwardRef(function EBookReader2({
   const handleSearchResultSelect = react.useCallback((cfi) => {
     if (cfi) readerRef.current?.goTo(cfi);
   }, []);
+  const rootStyle = react.useMemo(() => {
+    if (!themeColor) return style;
+    return {
+      ...style,
+      ["--epub-reader-accent"]: themeColor
+    };
+  }, [style, themeColor]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: rootRef,
       className: mergeClassName("epub-reader", className),
-      style,
+      style: rootStyle,
       "data-theme": darkMode ? "dark" : "light",
       "data-layout": layout,
       tabIndex: 0,
@@ -1297,14 +1301,18 @@ var EBookReader = react.forwardRef(function EBookReader2({
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__spinner", "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "epub-reader__loading-text", children: downloadLoading === "download" ? "\u52A0\u8F7D\u4E2D\u2026" : "\u6E32\u67D3\u4E2D\u2026" })
         ] }) : null,
-        layout === "mobile" ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           MobileUI,
           {
-            barVisible: mobileBarVisible,
+            barVisible: layout === "mobile" ? mobileBarVisible : true,
             activePanel: mobilePanel,
             onTogglePanel: toggleMobilePanel,
             onClosePanel: closeMobileSheet,
             toolbarRight: mobileToolbarRight,
+            onPrevSection: () => readerRef.current?.prevSection(),
+            onPrevPage: () => readerRef.current?.prevPage(),
+            onNextPage: () => readerRef.current?.nextPage(),
+            onNextSection: () => readerRef.current?.nextSection(),
             toc,
             search,
             status,
@@ -1313,6 +1321,8 @@ var EBookReader = react.forwardRef(function EBookReader2({
             displayedPercent,
             darkMode,
             fontSize,
+            lineHeight,
+            letterSpacing,
             onTocSelect: handleTocSelect,
             onSearch: (q) => void runSearch(q),
             onSearchQueryChange: (v) => setSearch((prev) => ({ ...prev, query: v })),
@@ -1324,62 +1334,11 @@ var EBookReader = react.forwardRef(function EBookReader2({
             onSeekEnd: handleSeekEnd,
             onSeekCommit: handleSeekEnd,
             onToggleDarkMode: setDarkModeInternal,
-            onFontSizeChange: setFontSizeInternal
+            onFontSizeChange: setFontSizeInternal,
+            onLineHeightChange: setLineHeightInternal,
+            onLetterSpacingChange: setLetterSpacingInternal
           }
-        ) : /* @__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: "epub-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
-            }
-          )
-        ] })
+        )
       ]
     }
   );