@libraz/mejiro-react 0.7.0 → 0.9.0

package/dist/index.js

@@ -114,6 +114,11 @@ function MejiroDropZone({
       className: rootClass,
       style,
       onClick: () => inputRef.current?.click(),
+      onKeyDown: (e) => {
+        if (e.key !== "Enter" && e.key !== " ") return;
+        e.preventDefault();
+        inputRef.current?.click();
+      },
       onDragOver: (e) => {
         e.preventDefault();
         setDragover(true);
@@ -150,8 +155,12 @@ function MejiroDropZone({
 }
 
 // src/MejiroEditor.tsx
-import { EditableEpub } from "@libraz/mejiro/epub";
-import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef10, useState as useState8 } from "react";
+import {
+  cloneEditableEpubBook,
+  EditableEpub,
+  exportEditableEpub
+} from "@libraz/mejiro/epub";
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef10, useState as useState8 } from "react";
 
 // src/MejiroReader.tsx
 import { DEFAULT_BOOK_OPTIONS, DEFAULT_PAGE_GEOMETRY } from "@libraz/mejiro/book";
@@ -160,7 +169,7 @@ import { manuscriptToEpubBook } from "@libraz/mejiro/epub";
 import {
   forwardRef,
   useCallback as useCallback6,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo4,
@@ -190,6 +199,9 @@ import {
 // src/MejiroPageView.tsx
 import { normalizeFontFamily } from "@libraz/mejiro/browser";
 
+// src/MejiroPage.tsx
+import { paragraphClassName } from "@libraz/mejiro/render";
+
 // src/renderInlineNode.tsx
 import {
   segmentToInlineNode
@@ -228,12 +240,10 @@ function renderLine(line, lineIndex) {
 function MejiroPage({ page, className, style }) {
   const rootClass = className ? `mejiro-page ${className}` : "mejiro-page";
   return /* @__PURE__ */ jsx5("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
-    let paraClass = "mejiro-paragraph";
-    if (paragraph.headingLevel != null) {
-      paraClass += ` mejiro-paragraph--h${paragraph.headingLevel}`;
-    } else if (paragraph.isHeading) {
-      paraClass += " mejiro-paragraph--heading";
-    }
+    const paraClass = paragraphClassName(
+      paragraph.kind ?? (paragraph.isHeading ? "heading" : void 0),
+      paragraph.headingLevel
+    );
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: paragraphs have no stable ID
       /* @__PURE__ */ jsx5("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
@@ -289,6 +299,7 @@ function MejiroScrollView({
   fontFamily,
   fontSize,
   lineSpacing,
+  slotMode,
   onVisiblePageChange,
   scrollToPage,
   pageGap = 24
@@ -303,7 +314,6 @@ function MejiroScrollView({
     return Array.from({ length: total }, (_, i) => layout.getPage(i));
   }, [layout]);
   const pageCount = pages.length;
-  const useSlot = true;
   const contentStyle = { height: contentHeight };
   if (fontFamily) contentStyle.fontFamily = normalizeFontFamily2(fontFamily);
   if (fontSize != null) contentStyle.fontSize = fontSize;
@@ -383,7 +393,7 @@ function MejiroScrollView({
               MejiroPageView,
               {
                 result,
-                slotMode: useSlot,
+                slotMode,
                 fontFamily,
                 lineSpacing,
                 className: "mejiro-reader-page-content",
@@ -441,7 +451,14 @@ function MejiroSettingsPanel({
             type: "button",
             className: "mejiro-reader-btn mejiro-reader-btn--icon",
             "aria-label": messages.settingsSizeDown,
-            onClick: () => patch({ fontSize: Math.max(minFontSize, settings.fontSize - 1) }),
+            onClick: () => patch({
+              fontSize: clampNumber(
+                settings.fontSize - 1,
+                minFontSize,
+                maxFontSize,
+                minFontSize
+              )
+            }),
             children: "A\u2212"
           }
         ),
@@ -469,7 +486,14 @@ function MejiroSettingsPanel({
             type: "button",
             className: "mejiro-reader-btn mejiro-reader-btn--icon",
             "aria-label": messages.settingsSizeUp,
-            onClick: () => patch({ fontSize: Math.min(maxFontSize, settings.fontSize + 1) }),
+            onClick: () => patch({
+              fontSize: clampNumber(
+                settings.fontSize + 1,
+                minFontSize,
+                maxFontSize,
+                minFontSize
+              )
+            }),
             children: "A+"
           }
         )
@@ -627,6 +651,7 @@ function MejiroSelectionLayer({
               width: r.width,
               height: r.height,
               ...posStyle,
+              ...r.color != null ? { backgroundColor: r.color } : null,
               ...rectStyle
             }
           },
@@ -657,6 +682,7 @@ function MejiroSpread({
   rightHeader = {},
   leftHeader = {},
   images = [],
+  slotMode,
   renderPageHeader,
   indicator,
   onPrev,
@@ -665,6 +691,7 @@ function MejiroSpread({
   onImageResizePointerDown,
   onImageClose,
   anchorAtCoord,
+  spreadIdx,
   selectionRects,
   onSelectionChange,
   singlePage = false,
@@ -673,7 +700,6 @@ function MejiroSpread({
 }) {
   const messages = useI18n();
   const hasImages = images.length > 0;
-  const useSlot = true;
   const selectionStartRef = useRef3(null);
   const selectionEnabled = anchorAtCoord != null && onSelectionChange != null;
   const gestureRef = useRef3(null);
@@ -747,6 +773,7 @@ function MejiroSpread({
   if (fontFamily) contentStyle.fontFamily = normalizeFontFamily4(fontFamily);
   if (fontSize != null) contentStyle.fontSize = fontSize;
   if (lineSpacing != null) contentStyle.lineHeight = String(lineSpacing);
+  const visibleRects = selectionRects && spreadIdx != null ? selectionRects.filter((r) => r.spreadIdx === spreadIdx) : selectionRects;
   const renderPage = (side) => {
     const isRight = side === "right";
     const result = isRight ? spread.right : spread.left;
@@ -770,7 +797,7 @@ function MejiroSpread({
               MejiroPageView,
               {
                 result,
-                slotMode: useSlot,
+                slotMode,
                 fontFamily,
                 lineSpacing,
                 className: "mejiro-reader-page-content",
@@ -778,7 +805,7 @@ function MejiroSpread({
               },
               pageKey
             ),
-            selectionRects && selectionRects.length > 0 && /* @__PURE__ */ jsx11(MejiroSelectionLayer, { rects: selectionRects, side })
+            visibleRects && visibleRects.length > 0 && /* @__PURE__ */ jsx11(MejiroSelectionLayer, { rects: visibleRects, side })
           ] }) }),
           isRight && images.map((item) => /* @__PURE__ */ jsx11(
             MejiroImageOverlay,
@@ -855,7 +882,10 @@ function MejiroStats({
   readingTimeLocale = "ja"
 }) {
   if (!chapter) return /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-stats" });
-  const totalChars = chapter.paragraphs.reduce((s, p) => s + p.text.length, 0);
+  const totalChars = chapter.paragraphs.reduce(
+    (s, p) => p.headingLevel != null ? s : s + [...p.text].length,
+    0
+  );
   const totalRuby = chapter.paragraphs.reduce(
     (s, p) => s + p.inlineAnnotations.filter((a) => a.kind === "ruby").length,
     0
@@ -1008,12 +1038,14 @@ function useEpub(options = {}) {
   fetchOptionsRef.current = options.fetchOptions;
   const fetchEpubRef = useRef5(options.fetchEpub);
   fetchEpubRef.current = options.fetchEpub;
+  const limitsRef = useRef5(options.limits);
+  limitsRef.current = options.limits;
   const loadBuffer = useCallback2(async (buffer) => {
     const requestId = ++requestIdRef.current;
     setLoading(true);
     setError(null);
     try {
-      const book = await parseEpub(buffer);
+      const book = await parseEpub(buffer, { limits: limitsRef.current });
       if (requestId !== requestIdRef.current) return null;
       setEpub(book);
       onLoadRef.current?.(book);
@@ -1034,7 +1066,7 @@ function useEpub(options = {}) {
     setLoading(true);
     setError(null);
     try {
-      const book = await parseEpub(await file.arrayBuffer());
+      const book = await parseEpub(await file.arrayBuffer(), { limits: limitsRef.current });
       if (requestId !== requestIdRef.current) return null;
       setEpub(book);
       onLoadRef.current?.(book);
@@ -1064,7 +1096,7 @@ function useEpub(options = {}) {
         if (!res.ok) return null;
         buffer = await res.arrayBuffer();
       }
-      const book = await parseEpub(buffer);
+      const book = await parseEpub(buffer, { limits: limitsRef.current });
       if (requestId !== requestIdRef.current) return null;
       setEpub(book);
       onLoadRef.current?.(book);
@@ -1095,23 +1127,79 @@ function useEpub(options = {}) {
 
 // src/useMejiroBook.ts
 import { MejiroBook } from "@libraz/mejiro/book";
-import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
-function useMejiroBook(initial) {
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState4 } from "react";
+function useMejiroBook(initial, options = {}) {
   const bookRef = useRef6(null);
   if (!bookRef.current) bookRef.current = new MejiroBook(initial);
-  const [options, setLocal] = useState4(initial);
-  const setOptions = useCallback3(async (next) => {
-    setLocal((prev) => ({ ...prev, ...next }));
-    await bookRef.current?.setOptions(next);
+  const [snapshot, setLocal] = useState4(initial);
+  const optionsRef = useRef6(options);
+  optionsRef.current = options;
+  const pendingRef = useRef6(null);
+  const flush = useCallback3(() => {
+    const pending = pendingRef.current;
+    if (!pending) return;
+    pendingRef.current = null;
+    if (pending.timer) clearTimeout(pending.timer);
+    const { waiters } = pending;
+    const applied = bookRef.current?.setOptions(pending.patch) ?? Promise.resolve();
+    void applied.then(
+      () => {
+        for (const waiter of waiters) waiter.resolve();
+      },
+      (err) => {
+        const error = err instanceof Error ? err : new Error(String(err));
+        const handler = optionsRef.current.onError;
+        if (handler) {
+          handler(error);
+          for (const waiter of waiters) waiter.resolve();
+        } else {
+          for (const waiter of waiters) waiter.reject(error);
+        }
+      }
+    );
   }, []);
-  return { book: bookRef.current, options, setOptions };
+  const setOptions = useCallback3(
+    (next) => {
+      setLocal((prev) => ({ ...prev, ...next }));
+      const pending = pendingRef.current ?? { patch: {}, timer: null, waiters: [] };
+      pendingRef.current = pending;
+      Object.assign(pending.patch, next);
+      const settled = new Promise((resolve, reject) => {
+        pending.waiters.push({ resolve, reject });
+      });
+      if (pending.timer) clearTimeout(pending.timer);
+      const debounceMs = optionsRef.current.debounceMs ?? 0;
+      if (debounceMs > 0) {
+        pending.timer = setTimeout(() => {
+          pending.timer = null;
+          flush();
+        }, debounceMs);
+      } else {
+        pending.timer = null;
+        flush();
+      }
+      return settled;
+    },
+    [flush]
+  );
+  useEffect4(
+    () => () => {
+      const pending = pendingRef.current;
+      if (!pending) return;
+      pendingRef.current = null;
+      if (pending.timer) clearTimeout(pending.timer);
+      for (const waiter of pending.waiters) waiter.resolve();
+    },
+    []
+  );
+  return { book: bookRef.current, options: snapshot, setOptions };
 }
 
 // src/useMultiImageOverlay.ts
-import { moveImageOverlayRect, resizeImageOverlayRect } from "@libraz/mejiro";
+import { createOverlayDragSession } from "@libraz/mejiro/browser";
 import {
   useCallback as useCallback4,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo3,
   useRef as useRef7,
   useState as useState5
@@ -1133,7 +1221,7 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
   const onUpdateRef = useRef7(options.onUpdate);
   onUpdateRef.current = options.onUpdate;
   const activeDragCleanupsRef = useRef7(/* @__PURE__ */ new Set());
-  useEffect4(
+  useEffect5(
     () => () => {
       for (const cleanup of activeDragCleanupsRef.current) cleanup();
       activeDragCleanupsRef.current.clear();
@@ -1247,32 +1335,19 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
       e.preventDefault();
       const found = findById(id);
       if (!found) return;
-      const startX = e.clientX;
-      const startY = e.clientY;
-      const start = { ...found.item.rect };
       const target = e.currentTarget;
-      target.setPointerCapture(e.nativeEvent.pointerId);
-      target.classList.add("is-dragging");
-      let rafId = 0;
-      const onMove = (me) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
-        const r = moveImageOverlayRect(start, dx, dy);
-        cancelAnimationFrame(rafId);
-        rafId = requestAnimationFrame(() => updateImage(id, r));
-      };
-      let cleanup;
-      const onUp = () => cleanup();
-      cleanup = () => {
-        cancelAnimationFrame(rafId);
-        target.classList.remove("is-dragging");
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-        activeDragCleanupsRef.current.delete(cleanup);
-      };
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-      activeDragCleanupsRef.current.add(cleanup);
+      createOverlayDragSession({
+        mode: "move",
+        rect: found.item.rect,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.nativeEvent.pointerId,
+        captureElement: target,
+        activeElement: target,
+        dragClass: "is-dragging",
+        registry: activeDragCleanupsRef.current,
+        onChange: (rect) => updateImage(id, rect)
+      });
     },
     [findById, updateImage]
   );
@@ -1282,36 +1357,23 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
       e.stopPropagation();
       const found = findById(id);
       if (!found) return;
-      const startX = e.clientX;
-      const startY = e.clientY;
-      const start = { ...found.item.rect };
       const target = e.currentTarget;
-      target.setPointerCapture(e.nativeEvent.pointerId);
-      target.parentElement?.classList.add("is-dragging");
-      let rafId = 0;
-      const onMove = (me) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
-        const r = resizeImageOverlayRect(start, dx, dy);
-        cancelAnimationFrame(rafId);
-        rafId = requestAnimationFrame(() => updateImage(id, r));
-      };
-      let cleanup;
-      const onUp = () => cleanup();
-      cleanup = () => {
-        cancelAnimationFrame(rafId);
-        target.parentElement?.classList.remove("is-dragging");
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-        activeDragCleanupsRef.current.delete(cleanup);
-      };
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-      activeDragCleanupsRef.current.add(cleanup);
+      createOverlayDragSession({
+        mode: "resize",
+        rect: found.item.rect,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.nativeEvent.pointerId,
+        captureElement: target,
+        activeElement: target.parentElement,
+        dragClass: "is-dragging",
+        registry: activeDragCleanupsRef.current,
+        onChange: (rect) => updateImage(id, rect)
+      });
     },
     [findById, updateImage]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     if (!layout) return;
     for (const si of imagesRef.current.keys()) syncSpread(si);
   }, [layout, syncSpread]);
@@ -1331,7 +1393,16 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
 }
 
 // src/useSpread.ts
-import { useCallback as useCallback5, useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState6 } from "react";
+function ignoreNavigationKey(e) {
+  if (e.defaultPrevented) return true;
+  if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return true;
+  const target = e.target;
+  if (!target) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+}
 function useSpread(layout, options = {}) {
   const enableKeyboard = options.enableKeyboard ?? true;
   const turnDuration = options.turnDuration ?? 180;
@@ -1370,7 +1441,7 @@ function useSpread(layout, options = {}) {
     }
     setSpread(layout.getSpread(0));
   }, [layout]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!layout) return;
     setSpread(layout.getSpread(spreadIdx));
     const last = lastEmittedRef.current;
@@ -1417,17 +1488,18 @@ function useSpread(layout, options = {}) {
   }, []);
   const next = useCallback5(() => goTo(spreadIdxRef.current + 1), [goTo]);
   const prev = useCallback5(() => goTo(spreadIdxRef.current - 1), [goTo]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!enableKeyboard) return;
     const onKey = (e) => {
       if (!layoutRef.current) return;
+      if (ignoreNavigationKey(e)) return;
       if (e.key === "ArrowLeft") next();
       else if (e.key === "ArrowRight") prev();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [enableKeyboard, next, prev]);
-  useEffect5(
+  useEffect6(
     () => () => {
       if (turnTimerRef.current) clearTimeout(turnTimerRef.current);
     },
@@ -1449,6 +1521,7 @@ function useSpread(layout, options = {}) {
 
 // src/MejiroReader.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var OPTIONS_DEBOUNCE_MS = 60;
 function MejiroReaderInner(props, ref) {
   const manuscriptProp = "manuscript" in props ? props.manuscript : void 0;
   const dialectProp = "dialect" in props ? props.dialect : void 0;
@@ -1467,6 +1540,7 @@ function MejiroReaderInner(props, ref) {
     enableSurfaceTap = true,
     fallback,
     fetchOptions,
+    limits,
     fetchEpub: fetchEpubFn,
     locale,
     messages,
@@ -1502,7 +1576,7 @@ function MejiroReaderInner(props, ref) {
   const chapter = chapterProp ?? chapterState;
   const [chromeHidden, setChromeHidden] = useState7(false);
   const [autoSingle, setAutoSingle] = useState7(false);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!settingsOpen) return;
     const onKey = (e2) => {
       if (e2.key === "Escape") setSettingsOpen(false);
@@ -1510,7 +1584,7 @@ function MejiroReaderInner(props, ref) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [settingsOpen]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (spreadMode !== "auto") return;
     const surface = surfaceRef.current;
     if (!surface) return;
@@ -1547,15 +1621,26 @@ function MejiroReaderInner(props, ref) {
     () => ({ ...DEFAULT_BOOK_OPTIONS, ...optionsProp ?? {} }),
     [optionsProp]
   );
-  const { book, options: bookOptions, setOptions } = useMejiroBook(resolvedOptions);
-  const didSyncOptionsPropRef = useRef9(false);
-  useEffect6(() => {
-    if (!didSyncOptionsPropRef.current) {
-      didSyncOptionsPropRef.current = true;
-      return;
-    }
-    void setOptions(resolvedOptions);
-  }, [resolvedOptions, setOptions]);
+  const onErrorRef = useRef9(onError);
+  onErrorRef.current = onError;
+  const reportError = useCallback6((error) => onErrorRef.current?.(error), []);
+  const {
+    book,
+    options: bookOptions,
+    setOptions
+  } = useMejiroBook(resolvedOptions, {
+    debounceMs: OPTIONS_DEBOUNCE_MS,
+    onError: reportError
+  });
+  const optionsPropKey = JSON.stringify(resolvedOptions);
+  const syncedOptionsPropKeyRef = useRef9(optionsPropKey);
+  const resolvedOptionsRef = useRef9(resolvedOptions);
+  resolvedOptionsRef.current = resolvedOptions;
+  useEffect7(() => {
+    if (syncedOptionsPropKeyRef.current === optionsPropKey) return;
+    syncedOptionsPropKeyRef.current = optionsPropKey;
+    void setOptions(resolvedOptionsRef.current);
+  }, [optionsPropKey, setOptions]);
   const synthesizedEpub = useMemo4(() => {
     if (manuscriptProp === void 0) return null;
     return manuscriptToEpubBook(manuscriptProp, { dialect: dialectProp });
@@ -1565,6 +1650,7 @@ function MejiroReaderInner(props, ref) {
     // book (or a synthesized manuscript book) is supplied.
     defaultUrl: epubProp !== void 0 || manuscriptProp !== void 0 ? void 0 : epubUrl,
     fetchOptions,
+    limits,
     fetchEpub: fetchEpubFn,
     onLoad: (b) => {
       if (chapterProp == null) setChapterState(0);
@@ -1574,9 +1660,7 @@ function MejiroReaderInner(props, ref) {
   const controlled = epubProp !== void 0 || manuscriptProp !== void 0;
   const isManuscriptSource = manuscriptProp !== void 0;
   const e = isManuscriptSource ? synthesizedEpub : controlled ? epubProp ?? null : epubCtx.epub;
-  const onErrorRef = useRef9(onError);
-  onErrorRef.current = onError;
-  useEffect6(() => {
+  useEffect7(() => {
     if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
   }, [epubCtx.error]);
   const pageGeometryRef = useRef9(resolvedGeometry);
@@ -1622,20 +1706,24 @@ function MejiroReaderInner(props, ref) {
   bookOptionsRef.current = bookOptions;
   const recomputeRef = useRef9(layoutCtx.recompute);
   recomputeRef.current = layoutCtx.recompute;
-  useEffect6(() => {
+  useEffect7(() => {
     if (optionsKeyRef.current === optionsKey) return;
     optionsKeyRef.current = optionsKey;
     const timer = setTimeout(() => {
       void (async () => {
-        await setOptions({ ...bookOptionsRef.current });
-        await recomputeRef.current({ blank: false });
+        try {
+          await setOptions({ ...bookOptionsRef.current });
+          await recomputeRef.current({ blank: false });
+        } catch (err) {
+          reportError(err instanceof Error ? err : new Error(String(err)));
+        }
       })();
-    }, 60);
+    }, OPTIONS_DEBOUNCE_MS);
     return () => clearTimeout(timer);
-  }, [optionsKey, setOptions]);
+  }, [optionsKey, setOptions, reportError]);
   const geometryKey = JSON.stringify(resolvedGeometry ?? null);
   const geometryKeyRef = useRef9(geometryKey);
-  useEffect6(() => {
+  useEffect7(() => {
     if (geometryKeyRef.current === geometryKey) return;
     geometryKeyRef.current = geometryKey;
     void recomputeRef.current({ blank: false });
@@ -1652,7 +1740,7 @@ function MejiroReaderInner(props, ref) {
         start: annotation.start,
         end: annotation.end
       });
-      for (const rect of rects) result.push(rect);
+      for (const rect of rects) result.push({ ...rect, color: annotation.color });
     }
     return result;
   }, [annotations, layoutCtx.layout, chapter]);
@@ -1660,7 +1748,7 @@ function MejiroReaderInner(props, ref) {
   clearImagesRef.current = imageCtx.clearImages;
   const onLoadRef = useRef9(onLoad);
   onLoadRef.current = onLoad;
-  useEffect6(() => {
+  useEffect7(() => {
     if (!controlled) return;
     if (chapterIsUncontrolled) setChapterState(0);
     clearImagesRef.current();
@@ -1669,10 +1757,18 @@ function MejiroReaderInner(props, ref) {
   }, [controlled, e, book, chapterIsUncontrolled]);
   const spreadGoToRef = useRef9(spreadCtx.goTo);
   spreadGoToRef.current = spreadCtx.goTo;
-  useEffect6(() => {
-    if (spreadIdxProp == null) return;
-    spreadGoToRef.current(spreadIdxProp);
-  }, [spreadIdxProp]);
+  const appliedSpreadIdxPropRef = useRef9(spreadIdxProp);
+  useEffect7(() => {
+    if (spreadIdxProp == null) {
+      appliedSpreadIdxPropRef.current = spreadIdxProp;
+      return;
+    }
+    const propChanged = appliedSpreadIdxPropRef.current !== spreadIdxProp;
+    appliedSpreadIdxPropRef.current = spreadIdxProp;
+    if (spreadCtx.spreadIdx === spreadIdxProp) return;
+    if (propChanged) spreadGoToRef.current(spreadIdxProp);
+    else setSpreadRef.current(spreadIdxProp);
+  }, [spreadIdxProp, spreadCtx.spreadIdx]);
   useLayoutEffect4(() => {
     const next = spreadIdxPropRef.current;
     if (next == null || !layoutCtx.layout) return;
@@ -1711,10 +1807,10 @@ function MejiroReaderInner(props, ref) {
     spreadGoToRef.current(loc.spreadIdx);
     pending.resolve();
   }, [chapter, layout]);
-  useEffect6(() => {
+  useEffect7(() => {
     tryApplyPendingAnchor();
   }, [tryApplyPendingAnchor]);
-  useEffect6(
+  useEffect7(
     () => () => {
       pendingAnchorRef.current?.resolve();
       pendingAnchorRef.current = null;
@@ -1727,7 +1823,7 @@ function MejiroReaderInner(props, ref) {
   onPageReadRef.current = onPageRead;
   const onChapterCompletedRef = useRef9(onChapterCompleted);
   onChapterCompletedRef.current = onChapterCompleted;
-  useEffect6(() => {
+  useEffect7(() => {
     const now = typeof performance !== "undefined" ? performance.now() : Date.now();
     if (didMountRef.current && dwellRef.current) {
       onPageReadRef.current?.(dwellRef.current.anchor, now - dwellRef.current.ts);
@@ -1749,7 +1845,7 @@ function MejiroReaderInner(props, ref) {
     }
   }, [chapter, spreadCtx.spreadIdx, spreadCtx.totalSpreads, layout, emit]);
   const prevTurningRef = useRef9(false);
-  useEffect6(() => {
+  useEffect7(() => {
     if (spreadCtx.turning && !prevTurningRef.current) {
       emit("turnStart", { from: spreadCtx.spreadIdx });
     } else if (!spreadCtx.turning && prevTurningRef.current) {
@@ -1998,6 +2094,7 @@ function MejiroReaderInner(props, ref) {
                 onImagePointerDown: imageCtx.onOverlayPointerDown,
                 onImageResizePointerDown: imageCtx.onResizePointerDown,
                 onImageClose: imageCtx.removeImage,
+                spreadIdx: spreadCtx.spreadIdx,
                 selectionRects: annotationRects.length ? annotationRects : void 0
               },
               `${chapter}-${spreadCtx.spreadIdx}-${layoutCtx.pageWidth}x${layoutCtx.pageHeight}`
@@ -2030,28 +2127,6 @@ MejiroReader.displayName = "MejiroReader";
 
 // src/MejiroEditor.tsx
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
-function cloneBook(book) {
-  return {
-    ...book,
-    chapters: book.chapters.map((chapter) => ({
-      ...chapter,
-      blocks: chapter.blocks.map(
-        (block) => block.kind === "paragraph" ? { ...block, inlineAnnotations: [...block.inlineAnnotations] } : { ...block }
-      ),
-      imageAssets: new Map(chapter.imageAssets),
-      originalImageHrefs: chapter.originalImageHrefs ? [...chapter.originalImageHrefs] : void 0,
-      paragraphs: chapter.paragraphs.map((paragraph) => ({
-        ...paragraph,
-        inlineAnnotations: [...paragraph.inlineAnnotations]
-      })),
-      paragraphRefs: chapter.paragraphRefs ? [...chapter.paragraphRefs] : void 0
-    })),
-    packageData: {
-      ...book.packageData,
-      files: new Map(book.packageData.files)
-    }
-  };
-}
 function utf16ToCodepoint(text, utf16Offset) {
   let cp = 0;
   let i = 0;
@@ -2063,15 +2138,29 @@ function utf16ToCodepoint(text, utf16Offset) {
   }
   return cp;
 }
-function applyWatermark(editor, watermark) {
-  editor.transaction(() => {
-    for (let i = 0; i < editor.chapters.length; i++) {
-      editor.insertParagraph(i, 0, {
-        text: `[mejiro-watermark] ${watermark.text}`,
-        inlineAnnotations: []
-      });
-    }
-  });
+var WATERMARK_PREFIX = "[mejiro-watermark]";
+var WATERMARK_BLOCK_ID = "mejiro-watermark";
+function watermarkedBook(book, watermark) {
+  const copy = cloneEditableEpubBook(book);
+  const text = `${WATERMARK_PREFIX} ${watermark.text}`;
+  for (const chapter of copy.chapters) {
+    chapter.blocks.unshift({
+      kind: "paragraph",
+      id: watermarkBlockId(chapter),
+      text,
+      inlineAnnotations: []
+    });
+    chapter.paragraphs.unshift({ text, inlineAnnotations: [] });
+    chapter.isDirty = true;
+  }
+  return copy;
+}
+function watermarkBlockId(chapter) {
+  const used = new Set(chapter.blocks.map((block) => block.id));
+  let id = WATERMARK_BLOCK_ID;
+  let suffix = 2;
+  while (used.has(id)) id = `${WATERMARK_BLOCK_ID}-${suffix++}`;
+  return id;
 }
 function MejiroEditor({
   epubUrl,
@@ -2083,6 +2172,7 @@ function MejiroEditor({
   onBeforeExport,
   exportPolicy,
   assetResolver,
+  limits,
   onLoad,
   onExport,
   onError
@@ -2102,25 +2192,27 @@ function MejiroEditor({
   const loadRequestIdRef = useRef10(0);
   const onLoadRef = useRef10(onLoad);
   const onErrorRef = useRef10(onError);
+  const limitsRef = useRef10(limits);
+  limitsRef.current = limits;
   const book = editor?.book ?? null;
   const chapter = book?.chapters[selection.chapter] ?? null;
   const paragraph = chapter?.paragraphs[selection.paragraph] ?? null;
   const textDirty = paragraph ? text !== paragraph.text : false;
   const previewBook = useMemo5(() => {
     void revision;
-    return book ? cloneBook(book) : null;
+    return book ? cloneEditableEpubBook(book) : null;
   }, [book, revision]);
-  useEffect7(() => {
+  useEffect8(() => {
     onLoadRef.current = onLoad;
   }, [onLoad]);
-  useEffect7(() => {
+  useEffect8(() => {
     onErrorRef.current = onError;
   }, [onError]);
   const loadBufferForRequest = useCallback7(async (buffer, requestId) => {
     setLoading(true);
     setError(null);
     try {
-      const next = await EditableEpub.load(buffer);
+      const next = await EditableEpub.load(buffer, { limits: limitsRef.current });
       if (requestId !== loadRequestIdRef.current) return;
       setEditor(next);
       setSelection({ chapter: 0, paragraph: 0 });
@@ -2151,7 +2243,7 @@ function MejiroEditor({
       }
     }
   }
-  useEffect7(() => {
+  useEffect8(() => {
     if (!epubUrl) return;
     let cancelled = false;
     const requestId = ++loadRequestIdRef.current;
@@ -2178,13 +2270,15 @@ function MejiroEditor({
       cancelled = true;
     };
   }, [epubUrl, loadBufferForRequest]);
-  useEffect7(() => {
+  useEffect8(() => {
     setText(paragraph?.text ?? "");
     setRubyStart(0);
     setRubyEnd(Math.min(1, [...paragraph?.text ?? ""].length));
     setRubyText("");
   }, [paragraph]);
   function selectParagraph(chapterIndex, paragraphIndex) {
+    if (chapterIndex === selection.chapter && paragraphIndex === selection.paragraph) return;
+    if (textDirty) applyText();
     setSelection({ chapter: chapterIndex, paragraph: paragraphIndex });
   }
   function captureRubyRange() {
@@ -2240,8 +2334,9 @@ function MejiroEditor({
   }
   async function exportEpub() {
     if (!editor) return;
-    if (exportPolicy?.watermark) applyWatermark(editor, exportPolicy.watermark);
-    let buffer = await editor.export(assetResolver ? { assetResolver } : void 0);
+    const watermark = exportPolicy?.watermark;
+    const source = watermark ? watermarkedBook(editor.book, watermark) : editor.book;
+    let buffer = await exportEditableEpub(source, assetResolver ? { assetResolver } : void 0);
     if (exportPolicy?.encrypt) buffer = await exportPolicy.encrypt(buffer);
     const decision = await onBeforeExport?.(buffer);
     onExport?.(buffer);
@@ -2377,7 +2472,7 @@ function paragraphBlockId(chapter, paragraphIndex) {
 
 // src/MejiroManuscriptEditor.tsx
 import { EpubProject } from "@libraz/mejiro/epub";
-import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef13, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect10, useRef as useRef13, useState as useState11 } from "react";
 
 // src/MejiroNotationHighlighter.tsx
 import { tokenizeManuscriptSource } from "@libraz/mejiro";
@@ -2495,7 +2590,7 @@ function buildSegments(text, dialect) {
 }
 
 // src/useManuscriptDraft.ts
-import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef12, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef12, useState as useState10 } from "react";
 var DEFAULT_DELAY = 800;
 function defaultChapter(index, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
   return { id: `chapter-${Date.now()}-${index}`, title: titleFor(index), body: bodyFor(index) };
@@ -2524,33 +2619,45 @@ function useManuscriptDraft(options = {}) {
   payloadRef.current = autosavePayload;
   const chaptersRef = useRef12(chapters);
   chaptersRef.current = chapters;
+  const selectedRef = useRef12(selected);
+  selectedRef.current = selected;
   const didMountRef = useRef12(false);
   const dirtyRef = useRef12(false);
   const mountedRef = useRef12(true);
+  const revisionRef = useRef12(0);
+  const inFlightRevisionRef = useRef12(-1);
   const flushAutosave = useCallback8(() => {
     const callback = saveRef.current;
-    if (!(callback && dirtyRef.current)) return;
-    dirtyRef.current = false;
+    if (!(callback && dirtyRef.current) || inFlightRevisionRef.current === revisionRef.current) {
+      return;
+    }
+    const revision = revisionRef.current;
+    inFlightRevisionRef.current = revision;
     const payload = payloadRef.current ? payloadRef.current(chaptersRef.current) : chaptersRef.current;
-    void Promise.resolve(callback(payload)).catch((err) => {
+    void Promise.resolve(callback(payload)).then(() => {
+      if (revisionRef.current === revision) dirtyRef.current = false;
+    }).catch((err) => {
       if (!mountedRef.current) return;
       setAutosaveError(err instanceof Error ? err : new Error(String(err)));
+    }).finally(() => {
+      if (inFlightRevisionRef.current === revision) inFlightRevisionRef.current = -1;
     });
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!didMountRef.current) {
       didMountRef.current = true;
       return void 0;
     }
     if (!saveRef.current) return void 0;
     dirtyRef.current = true;
+    revisionRef.current += 1;
     setAutosaveError(null);
     const timer = setTimeout(() => {
       flushAutosave();
     }, autosaveDelay);
     return () => clearTimeout(timer);
   }, [chapters, autosaveKey, autosaveDelay, flushAutosave]);
-  useEffect8(() => {
+  useEffect9(() => {
     mountedRef.current = true;
     const handleBeforeUnload = () => flushAutosave();
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -2560,31 +2667,40 @@ function useManuscriptDraft(options = {}) {
       window.removeEventListener("beforeunload", handleBeforeUnload);
     };
   }, [flushAutosave]);
-  const setSelected = useCallback8(
-    (index) => {
-      setSelectedState(() => Math.max(0, Math.min(index, chapters.length - 1)));
-    },
-    [chapters.length]
-  );
+  const commit = useCallback8((nextChapters, nextSelected) => {
+    chaptersRef.current = nextChapters;
+    selectedRef.current = nextSelected;
+    setChaptersState(nextChapters);
+    setSelectedState(nextSelected);
+  }, []);
+  const setSelected = useCallback8((index) => {
+    const next = Math.max(0, Math.min(index, chaptersRef.current.length - 1));
+    selectedRef.current = next;
+    setSelectedState(next);
+  }, []);
   const setChapters = useCallback8(
     (next) => {
       const normalized = next.length ? next : [defaultChapter(0, titleForRef.current, bodyForRef.current)];
-      setChaptersState(normalized);
-      setSelectedState((current) => {
-        const selectedId = chapters[current]?.id;
-        const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
-        return nextIndex >= 0 ? nextIndex : Math.max(0, Math.min(current, normalized.length - 1));
-      });
+      const prev = selectedRef.current;
+      const selectedId = chaptersRef.current[prev]?.id;
+      const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
+      commit(
+        normalized,
+        nextIndex >= 0 ? nextIndex : Math.max(0, Math.min(prev, normalized.length - 1))
+      );
     },
-    [chapters]
+    [commit]
   );
   const patchChapter = useCallback8((index, patch) => {
-    setChaptersState(
-      (current) => current.map((chapter, i) => i === index ? { ...chapter, ...patch } : chapter)
+    const next = chaptersRef.current.map(
+      (chapter, i) => i === index ? { ...chapter, ...patch } : chapter
     );
+    chaptersRef.current = next;
+    setChaptersState(next);
   }, []);
-  const addChapter = useCallback8((chapter = {}) => {
-    setChaptersState((current) => {
+  const addChapter = useCallback8(
+    (chapter = {}) => {
+      const current = chaptersRef.current;
       const generated = defaultChapter(current.length, titleForRef.current, bodyForRef.current);
       const next = [
         ...current,
@@ -2594,38 +2710,41 @@ function useManuscriptDraft(options = {}) {
           body: chapter.body ?? generated.body
         }
       ];
-      setSelectedState(next.length - 1);
-      return next;
-    });
-  }, []);
-  const removeChapter = useCallback8((index) => {
-    setChaptersState((current) => {
-      if (current.length <= 1) return current;
+      commit(next, next.length - 1);
+    },
+    [commit]
+  );
+  const removeChapter = useCallback8(
+    (index) => {
+      const current = chaptersRef.current;
+      if (current.length <= 1) return;
       const next = current.filter((_, i) => i !== index);
-      setSelectedState((prev) => {
-        if (prev === index) return Math.max(0, Math.min(index, next.length - 1));
-        if (index < prev) return prev - 1;
-        return Math.max(0, Math.min(prev, next.length - 1));
-      });
-      return next;
-    });
-  }, []);
-  const reorderChapters = useCallback8((from, to) => {
-    setChaptersState((current) => {
-      if (from < 0 || from >= current.length) return current;
+      const prev = selectedRef.current;
+      let nextSelected;
+      if (prev === index) nextSelected = Math.max(0, Math.min(index, next.length - 1));
+      else if (index < prev) nextSelected = prev - 1;
+      else nextSelected = Math.max(0, Math.min(prev, next.length - 1));
+      commit(next, nextSelected);
+    },
+    [commit]
+  );
+  const reorderChapters = useCallback8(
+    (from, to) => {
+      const current = chaptersRef.current;
+      if (from < 0 || from >= current.length) return;
       const next = [...current];
       const [moved] = next.splice(from, 1);
       const target = Math.max(0, Math.min(next.length, to));
       next.splice(target, 0, moved);
-      setSelectedState((prev) => {
-        if (prev === from) return target;
-        if (from < prev && target >= prev) return prev - 1;
-        if (from > prev && target <= prev) return prev + 1;
-        return prev;
-      });
-      return next;
-    });
-  }, []);
+      const prev = selectedRef.current;
+      let nextSelected = prev;
+      if (prev === from) nextSelected = target;
+      else if (from < prev && target >= prev) nextSelected = prev - 1;
+      else if (from > prev && target <= prev) nextSelected = prev + 1;
+      commit(next, nextSelected);
+    },
+    [commit]
+  );
   return {
     chapters,
     selected,
@@ -2686,11 +2805,14 @@ function MejiroManuscriptEditor({
   cover: coverProp,
   onCoverChange,
   chapters: initialChapters,
+  dialect = "mejiro",
   onAutosave,
   autosaveDelay,
   previewProps,
   assetResolver,
-  onExport
+  onExport,
+  onError,
+  panelSide = "right"
 }) {
   const messages = useI18n();
   const coverInputRef = useRef13(null);
@@ -2704,13 +2826,13 @@ function MejiroManuscriptEditor({
   const title = titleControlled ? titleProp ?? "" : titleState;
   const author = authorControlled ? authorProp ?? "" : authorState;
   const cover = coverControlled ? coverProp ?? null : coverState;
-  useEffect9(() => {
+  useEffect10(() => {
     if (!titleControlled && titleProp !== void 0) setTitleState(titleProp);
   }, [titleControlled, titleProp]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!authorControlled && authorProp !== void 0) setAuthorState(authorProp);
   }, [authorControlled, authorProp]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!coverControlled && coverProp !== void 0) setCoverState(coverProp);
   }, [coverControlled, coverProp]);
   const setTitle = useCallback9(
@@ -2753,6 +2875,7 @@ function MejiroManuscriptEditor({
   } = draft;
   const current = chapters[selected] ?? chapters[0];
   const [draggingIndex, setDraggingIndex] = useState11(null);
+  const [exportError, setExportError] = useState11(null);
   function wrapSelection(open, close) {
     const el = bodyTextareaRef.current;
     if (!el) return;
@@ -2771,26 +2894,44 @@ function MejiroManuscriptEditor({
     });
   }
   const exportEpub = useCallback9(async () => {
-    const project = EpubProject.fromManuscript({
-      metadata: { title, author: author || void 0 },
-      chapters: chapters.map((chapter) => ({
-        id: chapter.id,
-        title: chapter.title || messages.untitled,
-        body: chapter.body
-      }))
-    });
-    if (cover) {
-      project.setCover({
-        href: coverAssetHref(cover),
-        mediaType: cover.type || void 0,
-        data: await cover.arrayBuffer()
+    try {
+      const project = EpubProject.fromManuscript({
+        metadata: { title, author: author || void 0 },
+        dialect,
+        chapters: chapters.map((chapter) => ({
+          id: chapter.id,
+          title: chapter.title || messages.untitled,
+          body: chapter.body
+        }))
       });
+      if (cover) {
+        project.setCover({
+          href: coverAssetHref(cover),
+          mediaType: cover.type || void 0,
+          data: await cover.arrayBuffer()
+        });
+      }
+      const buffer = await project.export(assetResolver ? { assetResolver } : void 0);
+      setExportError(null);
+      onExport?.(buffer);
+      downloadEpub(buffer, title);
+    } catch (cause) {
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setExportError(error);
+      onError?.(error);
     }
-    const buffer = await project.export(assetResolver ? { assetResolver } : void 0);
-    onExport?.(buffer);
-    downloadEpub(buffer, title);
-  }, [assetResolver, author, chapters, cover, messages.untitled, onExport, title]);
-  return /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor mejiro-manuscript-editor", children: [
+  }, [
+    assetResolver,
+    author,
+    chapters,
+    cover,
+    dialect,
+    messages.untitled,
+    onError,
+    onExport,
+    title
+  ]);
+  return /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor mejiro-manuscript-editor", "data-panel-side": panelSide, children: [
     /* @__PURE__ */ jsx16("main", { className: "mejiro-editor-preview", children: /* @__PURE__ */ jsx16(
       MejiroReader,
       {
@@ -2803,6 +2944,7 @@ function MejiroManuscriptEditor({
           title: chapter.title || messages.untitled,
           body: chapter.body
         })),
+        dialect,
         fonts,
         chapter: selected,
         onChapterChange: setSelected,
@@ -2816,6 +2958,7 @@ function MejiroManuscriptEditor({
         /* @__PURE__ */ jsx16("small", { children: messages.manuscriptRubyHint })
       ] }),
       draft.autosaveError && /* @__PURE__ */ jsx16("div", { className: "mejiro-editor-error", children: draft.autosaveError.message }),
+      exportError && /* @__PURE__ */ jsx16("div", { className: "mejiro-editor-error", children: exportError.message }),
       /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
         /* @__PURE__ */ jsx16("span", { className: "mejiro-editor-label", children: messages.manuscriptMetadata }),
         /* @__PURE__ */ jsx16("input", { value: title, onChange: (event) => setTitle(event.target.value) }),
@@ -2905,6 +3048,7 @@ function MejiroManuscriptEditor({
           {
             ref: bodyTextareaRef,
             className: "mejiro-editor-manuscript",
+            dialect,
             value: current.body,
             onChange: (body) => patchChapter(selected, { body })
           }
@@ -3025,7 +3169,7 @@ import {
   serializeAnnotations,
   sortAnnotations
 } from "@libraz/mejiro";
-import { useCallback as useCallback10, useEffect as useEffect10, useRef as useRef14, useState as useState13 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef14, useState as useState13 } from "react";
 function resolveDefaultStorage() {
   if (typeof globalThis === "undefined") return null;
   const w = globalThis.localStorage;
@@ -3042,40 +3186,63 @@ function useAnnotations(options) {
       return [];
     }
   });
-  useEffect10(() => {
-    if (!storage) {
-      setAnnotations([]);
-      return;
+  const storageRef = useRef14(storage);
+  storageRef.current = storage;
+  const annotationsRef = useRef14(annotations);
+  const applyNext = useCallback10((next) => {
+    annotationsRef.current = next;
+    setAnnotations(next);
+  }, []);
+  const timerRef = useRef14(null);
+  const pendingWriteRef = useRef14(null);
+  const flushPending = useCallback10(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
     }
+    const write = pendingWriteRef.current;
+    pendingWriteRef.current = null;
+    if (!write) return;
     try {
-      setAnnotations(sortAnnotations(parseAnnotations(storage.getItem(key))));
+      write();
     } catch {
-      setAnnotations([]);
     }
-  }, [storage, key]);
-  const timerRef = useRef14(null);
-  useEffect10(
-    () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    },
-    []
-  );
+  }, []);
+  const cancelPending = useCallback10(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    pendingWriteRef.current = null;
+  }, []);
+  useEffect11(() => {
+    const currentStorage = storageRef.current;
+    if (currentStorage) {
+      try {
+        applyNext(sortAnnotations(parseAnnotations(currentStorage.getItem(key))));
+      } catch {
+        applyNext([]);
+      }
+    } else {
+      applyNext([]);
+    }
+    return flushPending;
+  }, [key, applyNext, flushPending]);
   const onChangeRef = useRef14(options.onChange);
   onChangeRef.current = options.onChange;
   const commit = useCallback10(
     (next) => {
-      if (storage) {
-        if (timerRef.current) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-          try {
-            storage.setItem(key, serializeAnnotations(next));
-          } catch {
-          }
-        }, throttleMs);
+      const currentStorage = storageRef.current;
+      if (currentStorage) {
+        cancelPending();
+        pendingWriteRef.current = () => {
+          currentStorage.setItem(key, serializeAnnotations(next));
+        };
+        timerRef.current = setTimeout(flushPending, throttleMs);
       }
       onChangeRef.current?.(next);
     },
-    [storage, key, throttleMs]
+    [key, throttleMs, cancelPending, flushPending]
   );
   const add = useCallback10(
     (input) => {
@@ -3084,61 +3251,60 @@ function useAnnotations(options) {
         id: input.id ?? createAnnotationId(),
         createdAt: input.createdAt ?? Date.now()
       };
-      setAnnotations((current) => {
-        const next = sortAnnotations([...current, annotation]);
-        commit(next);
-        return next;
-      });
+      const next = sortAnnotations([...annotationsRef.current, annotation]);
+      applyNext(next);
+      commit(next);
       return annotation;
     },
-    [commit]
+    [commit, applyNext]
   );
   const remove = useCallback10(
     (id) => {
-      setAnnotations((current) => {
-        const next = current.filter((annotation) => annotation.id !== id);
-        if (next.length !== current.length) commit(next);
-        return next;
-      });
+      const current = annotationsRef.current;
+      const next = current.filter((annotation) => annotation.id !== id);
+      if (next.length === current.length) return;
+      applyNext(next);
+      commit(next);
     },
-    [commit]
+    [commit, applyNext]
   );
   const update = useCallback10(
     (id, patch) => {
-      setAnnotations((current) => {
-        let changed = false;
-        const next = current.map((annotation) => {
-          if (annotation.id !== id) return annotation;
-          changed = true;
-          return { ...annotation, ...patch, id };
-        });
-        if (!changed) return current;
-        const sorted = sortAnnotations(next);
-        commit(sorted);
-        return sorted;
+      let changed = false;
+      const next = annotationsRef.current.map((annotation) => {
+        if (annotation.id !== id) return annotation;
+        changed = true;
+        return { ...annotation, ...patch, id };
       });
+      if (!changed) return;
+      const sorted = sortAnnotations(next);
+      applyNext(sorted);
+      commit(sorted);
     },
-    [commit]
+    [commit, applyNext]
   );
   const clear = useCallback10(() => {
-    setAnnotations([]);
-    if (storage) {
-      if (timerRef.current) clearTimeout(timerRef.current);
+    applyNext([]);
+    const currentStorage = storageRef.current;
+    if (currentStorage) {
+      cancelPending();
       try {
-        storage.removeItem(key);
+        currentStorage.removeItem(key);
       } catch {
       }
     }
     onChangeRef.current?.([]);
-  }, [storage, key]);
+  }, [key, cancelPending, applyNext]);
   return { annotations, add, remove, update, clear };
 }
 
 // src/useEditableEpub.ts
 import {
+  clampEditableEpubSelection,
+  cloneEditableEpubBook as cloneEditableEpubBook2,
   EditableEpub as EditableEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback11, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef15, useState as useState14 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef15, useState as useState14 } from "react";
 function useEditableEpub(options = {}) {
   const [editor, setEditor] = useState14(null);
   const [loading, setLoading] = useState14(false);
@@ -3153,15 +3319,17 @@ function useEditableEpub(options = {}) {
   const onLoadRef = useRef15(options.onLoad);
   const onErrorRef = useRef15(options.onError);
   const onExportRef = useRef15(options.onExport);
+  const limitsRef = useRef15(options.limits);
   onLoadRef.current = options.onLoad;
   onErrorRef.current = options.onError;
   onExportRef.current = options.onExport;
+  limitsRef.current = options.limits;
   const loadBufferWithRequest = useCallback11(
     async (buffer, requestId) => {
       setLoading(true);
       setError(null);
       try {
-        const next = await EditableEpub2.load(buffer);
+        const next = await EditableEpub2.load(buffer, { limits: limitsRef.current });
         if (requestId !== requestIdRef.current) return null;
         setEditor(next);
         setSelectionState({ chapter: 0, paragraph: 0 });
@@ -3228,19 +3396,19 @@ function useEditableEpub(options = {}) {
     },
     [loadBufferWithRequest]
   );
-  useEffect11(() => {
+  useEffect12(() => {
     if (options.defaultUrl) void loadUrl(options.defaultUrl);
   }, [options.defaultUrl, loadUrl]);
   const book = editor?.book ?? null;
   const selectedParagraph = book?.chapters[selection.chapter]?.paragraphs[selection.paragraph] ?? null;
   const previewBook = useMemo8(() => {
     void revision;
-    return book ? cloneBook2(book) : null;
+    return book ? cloneEditableEpubBook2(book) : null;
   }, [book, revision]);
   const history = editor?.history ?? null;
   const setSelection = useCallback11(
     (nextSelection) => {
-      setSelectionState(clampSelection(book, nextSelection));
+      setSelectionState(clampEditableEpubSelection(book, nextSelection));
     },
     [book]
   );
@@ -3320,46 +3488,13 @@ function useEditableEpub(options = {}) {
     exportEpub
   };
 }
-function cloneBook2(book) {
-  return {
-    ...book,
-    chapters: book.chapters.map((chapter) => ({
-      ...chapter,
-      blocks: chapter.blocks.map(
-        (block) => block.kind === "paragraph" ? { ...block, inlineAnnotations: [...block.inlineAnnotations] } : { ...block }
-      ),
-      imageAssets: new Map(chapter.imageAssets),
-      originalImageHrefs: chapter.originalImageHrefs ? [...chapter.originalImageHrefs] : void 0,
-      paragraphs: chapter.paragraphs.map((paragraph) => ({
-        ...paragraph,
-        inlineAnnotations: [...paragraph.inlineAnnotations]
-      })),
-      paragraphRefs: chapter.paragraphRefs ? [...chapter.paragraphRefs] : void 0
-    })),
-    packageData: {
-      ...book.packageData,
-      files: new Map(book.packageData.files)
-    }
-  };
-}
-function clampSelection(book, selection) {
-  if (!book?.chapters.length) return { chapter: 0, paragraph: 0 };
-  const chapter = clampInteger(selection.chapter, 0, book.chapters.length - 1);
-  const paragraphCount = book.chapters[chapter]?.paragraphs.length ?? 0;
-  const paragraph = paragraphCount ? clampInteger(selection.paragraph, 0, paragraphCount - 1) : 0;
-  return { chapter, paragraph };
-}
-function clampInteger(value, min, max) {
-  if (!Number.isFinite(value)) return min;
-  return Math.min(max, Math.max(min, Math.trunc(value)));
-}
 
 // src/useEpubProject.ts
 import {
   EpubProject as EpubProject2,
   parseEpub as parseEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback12, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef16, useState as useState15 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo9, useRef as useRef16, useState as useState15 } from "react";
 function useEpubProject(options = {}) {
   const defaultTitle = options.defaultChapterTitle;
   const defaultBody = options.defaultChapterBody;
@@ -3372,6 +3507,8 @@ function useEpubProject(options = {}) {
     options.chapters?.length ? options.chapters : [defaultChapter3(0, defaultTitle, defaultBody)]
   );
   const [selectedChapter, setSelectedChapterState] = useState15(0);
+  const [cover, setCoverState] = useState15(options.cover ?? null);
+  const [assets, setAssetsState] = useState15(options.assets ?? []);
   const [previewBook, setPreviewBook] = useState15(null);
   const [previewError, setPreviewError] = useState15(null);
   const [previewing, setPreviewing] = useState15(false);
@@ -3380,8 +3517,8 @@ function useEpubProject(options = {}) {
   const onExportRef = useRef16(options.onExport);
   onPreviewRef.current = options.onPreview;
   onExportRef.current = options.onExport;
-  const buildProject = useCallback12(
-    () => EpubProject2.fromManuscript({
+  const buildProject = useCallback12(() => {
+    const project = EpubProject2.fromManuscript({
       metadata,
       includeTitlePage: false,
       includeTitleInFirstChapter: true,
@@ -3389,13 +3526,15 @@ function useEpubProject(options = {}) {
         id: chapter.id,
         title: chapter.title || "Untitled",
         body: chapter.body
-      }))
-    }),
-    [chapters, metadata]
-  );
+      })),
+      ...cover ? { cover } : {}
+    });
+    for (const asset of assets) project.addAsset(asset);
+    return project;
+  }, [assets, chapters, cover, metadata]);
   const assetResolverRef = useRef16(options.assetResolver);
   assetResolverRef.current = options.assetResolver;
-  useEffect12(() => {
+  useEffect13(() => {
     const requestId = ++previewRequestIdRef.current;
     let cancelled = false;
     setPreviewing(true);
@@ -3441,6 +3580,12 @@ function useEpubProject(options = {}) {
     },
     [chapters, defaultBody, defaultTitle]
   );
+  const setCover = useCallback12((asset) => {
+    setCoverState(asset);
+  }, []);
+  const setAssets = useCallback12((next) => {
+    setAssetsState(next);
+  }, []);
   const setSelectedChapter = useCallback12(
     (index) => {
       setSelectedChapterState(Math.max(0, Math.min(index, chapters.length - 1)));
@@ -3515,12 +3660,16 @@ function useEpubProject(options = {}) {
       chapters,
       selectedChapter,
       currentChapter,
+      cover,
+      assets,
       previewBook,
       previewError,
       previewing,
       setMetadata,
       setChapters,
       setSelectedChapter,
+      setCover,
+      setAssets,
       patchChapter,
       addChapter,
       removeChapter,
@@ -3530,8 +3679,10 @@ function useEpubProject(options = {}) {
     }),
     [
       addChapter,
+      assets,
       buildProject,
       chapters,
+      cover,
       currentChapter,
       exportEpub,
       metadata,
@@ -3542,7 +3693,9 @@ function useEpubProject(options = {}) {
       reorderChapters,
       removeChapter,
       selectedChapter,
+      setAssets,
       setChapters,
+      setCover,
       setMetadata,
       setSelectedChapter
     ]
@@ -3557,10 +3710,10 @@ function defaultChapter3(index, titleFor = (i) => i === 0 ? "\u7B2C\u4E00\u8A71"
 }
 
 // src/useImageOverlay.ts
-import { moveImageOverlayRect as moveImageOverlayRect2, resizeImageOverlayRect as resizeImageOverlayRect2 } from "@libraz/mejiro";
+import { createOverlayDragSession as createOverlayDragSession2 } from "@libraz/mejiro/browser";
 import {
   useCallback as useCallback13,
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useRef as useRef17,
   useState as useState16
 } from "react";
@@ -3580,7 +3733,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const onUpdateRef = useRef17(onUpdate);
   onUpdateRef.current = onUpdate;
   const activeDragCleanupsRef = useRef17(/* @__PURE__ */ new Set());
-  useEffect13(
+  useEffect14(
     () => () => {
       for (const cleanup of activeDragCleanupsRef.current) cleanup();
       activeDragCleanupsRef.current.clear();
@@ -3597,6 +3750,20 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     [margin]
   );
+  const syncedRef = useRef17({
+    layout,
+    spreadIdx
+  });
+  useEffect14(() => {
+    const prev = syncedRef.current;
+    syncedRef.current = { layout, spreadIdx };
+    if (prev.layout === layout && prev.spreadIdx === spreadIdx) return;
+    if (rectRef.current === null) return;
+    if (prev.layout && prev.spreadIdx !== spreadIdx) {
+      prev.layout.syncImages(prev.spreadIdx, void 0);
+    }
+    syncToLayout(rectRef.current);
+  }, [layout, spreadIdx, syncToLayout]);
   const toggleImage = useCallback13(() => {
     if (rectRef.current) {
       setImageRect(null);
@@ -3607,42 +3774,33 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
       syncToLayout(r);
     }
   }, [defX, defY, defW, defH, syncToLayout]);
+  const applyRect = useCallback13(
+    (rect) => {
+      setImageRect(rect);
+      syncToLayout(rect);
+    },
+    [syncToLayout]
+  );
   const onOverlayPointerDown = useCallback13(
     (e) => {
       e.preventDefault();
       const current = rectRef.current;
       if (!current) return;
-      const startX = e.clientX;
-      const startY = e.clientY;
-      const start = { ...current };
       const target = e.currentTarget;
-      target.setPointerCapture(e.nativeEvent.pointerId);
-      target.classList.add("dragging");
-      let rafId = 0;
-      const onMove = (me) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
-        const r = moveImageOverlayRect2(start, dx, dy);
-        cancelAnimationFrame(rafId);
-        rafId = requestAnimationFrame(() => {
-          setImageRect(r);
-          syncToLayout(r);
-        });
-      };
-      let cleanup;
-      const onUp = () => cleanup();
-      cleanup = () => {
-        cancelAnimationFrame(rafId);
-        target.classList.remove("dragging");
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-        activeDragCleanupsRef.current.delete(cleanup);
-      };
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-      activeDragCleanupsRef.current.add(cleanup);
+      createOverlayDragSession2({
+        mode: "move",
+        rect: current,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.nativeEvent.pointerId,
+        captureElement: target,
+        activeElement: target,
+        dragClass: "dragging",
+        registry: activeDragCleanupsRef.current,
+        onChange: applyRect
+      });
     },
-    [syncToLayout]
+    [applyRect]
   );
   const onResizePointerDown = useCallback13(
     (e) => {
@@ -3650,37 +3808,21 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
       e.stopPropagation();
       const current = rectRef.current;
       if (!current) return;
-      const startX = e.clientX;
-      const startY = e.clientY;
-      const start = { ...current };
       const target = e.currentTarget;
-      target.setPointerCapture(e.nativeEvent.pointerId);
-      target.parentElement?.classList.add("dragging");
-      let rafId = 0;
-      const onMove = (me) => {
-        const dx = me.clientX - startX;
-        const dy = me.clientY - startY;
-        const r = resizeImageOverlayRect2(start, dx, dy);
-        cancelAnimationFrame(rafId);
-        rafId = requestAnimationFrame(() => {
-          setImageRect(r);
-          syncToLayout(r);
-        });
-      };
-      let cleanup;
-      const onUp = () => cleanup();
-      cleanup = () => {
-        cancelAnimationFrame(rafId);
-        target.parentElement?.classList.remove("dragging");
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-        activeDragCleanupsRef.current.delete(cleanup);
-      };
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-      activeDragCleanupsRef.current.add(cleanup);
+      createOverlayDragSession2({
+        mode: "resize",
+        rect: current,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.nativeEvent.pointerId,
+        captureElement: target,
+        activeElement: target.parentElement,
+        dragClass: "dragging",
+        registry: activeDragCleanupsRef.current,
+        onChange: applyRect
+      });
     },
-    [syncToLayout]
+    [applyRect]
   );
   return {
     imageRect,
@@ -3692,7 +3834,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
 }
 
 // src/useLibrary.ts
-import { useCallback as useCallback14, useEffect as useEffect14, useMemo as useMemo10, useState as useState17 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect15, useMemo as useMemo10, useState as useState17 } from "react";
 function useLibrary(options) {
   const { volumes, initialVolumeId, onChange } = options;
   const initialIndex = initialVolumeId != null ? Math.max(
@@ -3702,7 +3844,7 @@ function useLibrary(options) {
   const [currentId, setCurrentId] = useState17(
     volumes.length > 0 ? volumes[initialIndex]?.id ?? volumes[0]?.id ?? null : null
   );
-  useEffect14(() => {
+  useEffect15(() => {
     if (volumes.length === 0) {
       if (currentId !== null) setCurrentId(null);
       return;
@@ -3760,7 +3902,13 @@ function useLibrary(options) {
 }
 
 // src/useManuscriptLayout.ts
-import { useCallback as useCallback15, useEffect as useEffect15, useLayoutEffect as useLayoutEffect5, useRef as useRef18, useState as useState18 } from "react";
+import {
+  useCallback as useCallback15,
+  useEffect as useEffect16,
+  useLayoutEffect as useLayoutEffect5,
+  useRef as useRef18,
+  useState as useState18
+} from "react";
 function useManuscriptLayout(book, chapter, surface, options = {}) {
   const dialect = options.dialect ?? "mejiro";
   const enableResize = options.enableResize ?? true;
@@ -3771,43 +3919,56 @@ function useManuscriptLayout(book, chapter, surface, options = {}) {
   const [contentHeight, setContentHeight] = useState18(0);
   const [elapsedMs, setElapsedMs] = useState18(0);
   const requestIdRef = useRef18(0);
-  const recompute = useCallback15(async () => {
-    const requestId = ++requestIdRef.current;
-    if (!(chapter && surface.current)) {
-      setLayout(null);
-      setPageWidth(0);
-      setPageHeight(0);
-      setContentHeight(0);
-      setElapsedMs(0);
-      return;
-    }
-    setLayout(null);
-    const dims = book.computePageSize(surface.current);
-    setPageWidth(dims.pageWidth);
-    setPageHeight(dims.pageHeight);
-    setContentHeight(dims.contentHeight);
-    const t0 = performance.now();
-    const layouts = await book.layoutManuscript({ chapters: [chapter], dialect });
-    if (requestId !== requestIdRef.current) return;
-    const next = layouts.values().next().value ?? null;
-    setLayout(next);
-    setElapsedMs(performance.now() - t0);
-  }, [book, chapter, dialect, surface]);
+  const layoutRef = useRef18(null);
+  layoutRef.current = layout;
+  const pendingRestore = useRef18(null);
+  const optionsRef = useRef18(options);
+  optionsRef.current = options;
+  const recompute = useCallback15(
+    async (opts = {}) => {
+      const blank = opts.blank ?? true;
+      const requestId = ++requestIdRef.current;
+      if (!(chapter && surface.current)) {
+        setLayout(null);
+        setPageWidth(0);
+        setPageHeight(0);
+        setContentHeight(0);
+        setElapsedMs(0);
+        return;
+      }
+      const captured = !blank && layoutRef.current ? optionsRef.current.capturePosition?.(layoutRef.current) ?? null : null;
+      pendingRestore.current = captured;
+      if (blank) setLayout(null);
+      const dims = book.computePageSize(surface.current);
+      setPageWidth(dims.pageWidth);
+      setPageHeight(dims.pageHeight);
+      setContentHeight(dims.contentHeight);
+      const t0 = performance.now();
+      const layouts = await book.layoutManuscript({ chapters: [chapter], dialect });
+      if (requestId !== requestIdRef.current) return;
+      const next = layouts.values().next().value ?? null;
+      layoutRef.current = next;
+      setLayout(next);
+      setElapsedMs(performance.now() - t0);
+    },
+    [book, chapter, dialect, surface]
+  );
   useLayoutEffect5(() => {
     requestIdRef.current++;
+    pendingRestore.current = null;
     setLayout(null);
     setPageWidth(0);
     setPageHeight(0);
     setContentHeight(0);
     setElapsedMs(0);
   }, [recompute]);
-  useEffect15(() => {
+  useEffect16(() => {
     void recompute();
     return () => {
       requestIdRef.current++;
     };
   }, [recompute]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (!enableResize) return;
     const el = surface.current;
     if (!el) return;
@@ -3822,12 +3983,12 @@ function useManuscriptLayout(book, chapter, surface, options = {}) {
     const scheduleReflow = (immediate) => {
       clear();
       if (immediate) {
-        void recompute();
+        void recompute({ blank: false });
         return;
       }
       timer = setTimeout(() => {
         timer = null;
-        void recompute();
+        void recompute({ blank: false });
       }, resizeDebounce);
     };
     if (typeof ResizeObserver !== "undefined") {
@@ -3849,7 +4010,7 @@ function useManuscriptLayout(book, chapter, surface, options = {}) {
       clear();
     };
   }, [surface, enableResize, resizeDebounce, recompute]);
-  return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute };
+  return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute, pendingRestore };
 }
 
 // src/useReadingPosition.ts
@@ -3857,7 +4018,7 @@ import {
   parseReadingPosition,
   serializeReadingPosition
 } from "@libraz/mejiro";
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef19, useState as useState19 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect17, useRef as useRef19, useState as useState19 } from "react";
 function resolveDefaultStorage2() {
   if (typeof globalThis === "undefined") return null;
   const w = globalThis.localStorage;
@@ -3876,25 +4037,41 @@ function useReadingPosition(options) {
   });
   const storageRef = useRef19(storage);
   storageRef.current = storage;
-  useEffect16(() => {
-    const currentStorage = storageRef.current;
-    if (!currentStorage) {
-      setPosition(null);
-      return;
+  const timerRef = useRef19(null);
+  const pendingWriteRef = useRef19(null);
+  const flushPending = useCallback16(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
     }
+    const write = pendingWriteRef.current;
+    pendingWriteRef.current = null;
+    if (!write) return;
     try {
-      setPosition(parseReadingPosition(currentStorage.getItem(key)));
+      write();
     } catch {
+    }
+  }, []);
+  const cancelPending = useCallback16(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    pendingWriteRef.current = null;
+  }, []);
+  useEffect17(() => {
+    const currentStorage = storageRef.current;
+    if (currentStorage) {
+      try {
+        setPosition(parseReadingPosition(currentStorage.getItem(key)));
+      } catch {
+        setPosition(null);
+      }
+    } else {
       setPosition(null);
     }
-  }, [key]);
-  const timerRef = useRef19(null);
-  useEffect16(
-    () => () => {
-      if (timerRef.current) clearTimeout(timerRef.current);
-    },
-    []
-  );
+    return flushPending;
+  }, [key, flushPending]);
   const onChangeRef = useRef19(options.onChange);
   onChangeRef.current = options.onChange;
   const save = useCallback16(
@@ -3902,21 +4079,19 @@ function useReadingPosition(options) {
       setPosition(next);
       const currentStorage = storageRef.current;
       if (currentStorage) {
-        if (timerRef.current) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => {
-          try {
-            currentStorage.setItem(key, serializeReadingPosition(next));
-          } catch {
-          }
-        }, throttleMs);
+        cancelPending();
+        pendingWriteRef.current = () => {
+          currentStorage.setItem(key, serializeReadingPosition(next));
+        };
+        timerRef.current = setTimeout(flushPending, throttleMs);
       }
       onChangeRef.current?.(next);
     },
-    [key, throttleMs]
+    [key, throttleMs, cancelPending, flushPending]
   );
   const clear = useCallback16(() => {
     setPosition(null);
-    if (timerRef.current) clearTimeout(timerRef.current);
+    cancelPending();
     const currentStorage = storageRef.current;
     if (currentStorage) {
       try {
@@ -3925,7 +4100,7 @@ function useReadingPosition(options) {
       }
     }
     onChangeRef.current?.(null);
-  }, [key]);
+  }, [key, cancelPending]);
   return { position, save, clear };
 }