@libraz/mejiro-react 0.9.2 → 0.10.0

package/dist/index.js

@@ -176,7 +176,29 @@ import {
   EditableEpub,
   exportEditableEpub
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef12, useState as useState9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useMemo as useMemo6, useRef as useRef13, useState as useState9 } from "react";
+
+// src/bookIdentity.ts
+var identities = /* @__PURE__ */ new WeakMap();
+function markBookIdentity(derived, identity) {
+  identities.set(derived, identity);
+  return derived;
+}
+function bookIdentity(book) {
+  return book && identities.get(book) || book;
+}
+function chapterContentKey(chapter) {
+  return JSON.stringify([chapter.title, chapter.paragraphs]);
+}
+function resolveLayoutEpub(prev, epub, book, chapter) {
+  const source = epub?.chapters[chapter];
+  if (prev && prev.book === book && prev.chapter === chapter && prev.source === source) return prev;
+  const key = source ? chapterContentKey(source) : null;
+  if (prev?.epub && prev.book === book && prev.chapter === chapter && prev.key === key) {
+    return { ...prev, source };
+  }
+  return { book, chapter, source, key, epub };
+}
 
 // src/errors.ts
 import { assertEpubInputSize } from "@libraz/mejiro/epub";
@@ -205,14 +227,15 @@ async function withErrorReporting(task, report) {
 import { DEFAULT_BOOK_OPTIONS, DEFAULT_PAGE_GEOMETRY } from "@libraz/mejiro/book";
 import { normalizeFontFamily as normalizeFontFamily5 } from "@libraz/mejiro/browser";
 import { manuscriptToEpubBook } from "@libraz/mejiro/epub";
+import { pageNumberFor as pageNumberFor2 } from "@libraz/mejiro/render";
 import {
   forwardRef,
-  useCallback as useCallback6,
-  useEffect as useEffect8,
+  useCallback as useCallback7,
+  useEffect as useEffect9,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
-  useRef as useRef11,
+  useRef as useRef12,
   useState as useState8
 } from "react";
 
@@ -228,7 +251,10 @@ function MejiroPageIndicator({ current, total }) {
 
 // src/MejiroScrollView.tsx
 import { normalizeFontFamily as normalizeFontFamily2 } from "@libraz/mejiro/browser";
+import { pageNumberFor } from "@libraz/mejiro/render";
 import {
+  memo,
+  useCallback as useCallback2,
   useEffect as useEffect2,
   useLayoutEffect,
   useMemo as useMemo3,
@@ -648,6 +674,71 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
 // src/MejiroScrollView.tsx
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var NO_IMAGES = [];
+var ScrollPage = memo(function ScrollPage2({
+  result,
+  index,
+  pageNumber,
+  pageWidth,
+  pageHeight,
+  contentHeight,
+  slotMode,
+  fontFamily,
+  lineSpacing,
+  contentStyle,
+  rects,
+  overlays,
+  overlaysLeft,
+  registerPage,
+  onImagePointerDown,
+  onImageResizePointerDown,
+  onImageClose
+}) {
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: (el) => registerPage(index, el),
+      "data-page-idx": index,
+      className: "mejiro-reader-page",
+      style: {
+        width: pageWidth,
+        height: pageHeight,
+        flexShrink: 0,
+        ...overlays.length > 0 ? { overflow: "visible" } : null
+      },
+      children: [
+        /* @__PURE__ */ jsx9("div", { className: "mejiro-reader-page-rule" }),
+        /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-page-header", children: [
+          /* @__PURE__ */ jsx9("span", { className: "mejiro-reader-page-header-title" }),
+          /* @__PURE__ */ jsx9("span", { className: "mejiro-reader-page-header-num", children: pageNumber != null ? String(pageNumber) : "" })
+        ] }),
+        /* @__PURE__ */ jsx9("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: [
+          /* @__PURE__ */ jsx9(
+            MejiroPageView,
+            {
+              result,
+              slotMode,
+              fontFamily,
+              lineSpacing,
+              className: "mejiro-reader-page-content",
+              style: contentStyle
+            }
+          ),
+          rects && /* @__PURE__ */ jsx9(MejiroSelectionLayer, { rects, side: index % 2 === 0 ? "right" : "left" })
+        ] }) }),
+        overlays.map((item) => /* @__PURE__ */ jsx9(
+          MejiroImageOverlay,
+          {
+            rect: overlaysLeft ? { ...item.rect, x: item.rect.x + pageWidth } : item.rect,
+            onOverlayPointerDown: (e) => onImagePointerDown(item.id, e),
+            onResizePointerDown: (e) => onImageResizePointerDown(item.id, e),
+            onClose: () => onImageClose(item.id)
+          },
+          item.id
+        ))
+      ]
+    }
+  );
+});
 function MejiroScrollView({
   layout,
   pageWidth,
@@ -663,6 +754,7 @@ function MejiroScrollView({
   selectionRects,
   spreadIdx,
   images = NO_IMAGES,
+  pageNumbers = "both",
   onImagePointerDown,
   onImageResizePointerDown,
   onImageClose
@@ -697,10 +789,30 @@ function MejiroScrollView({
     }
     return byPage;
   }, [selectionRects]);
-  const contentStyle = { height: contentHeight };
-  if (fontFamily) contentStyle.fontFamily = normalizeFontFamily2(fontFamily);
-  if (fontSize != null) contentStyle.fontSize = fontSize;
-  if (lineSpacing != null) contentStyle.lineHeight = String(lineSpacing);
+  const contentStyle = useMemo3(() => {
+    const style = { height: contentHeight };
+    if (fontFamily) style.fontFamily = normalizeFontFamily2(fontFamily);
+    if (fontSize != null) style.fontSize = fontSize;
+    if (lineSpacing != null) style.lineHeight = String(lineSpacing);
+    return style;
+  }, [contentHeight, fontFamily, fontSize, lineSpacing]);
+  const registerPage = useCallback2((index, el) => {
+    pageRefs.current[index] = el;
+  }, []);
+  const imageHandlersRef = useRef3({ onImagePointerDown, onImageResizePointerDown, onImageClose });
+  imageHandlersRef.current = { onImagePointerDown, onImageResizePointerDown, onImageClose };
+  const handleImagePointerDown = useCallback2(
+    (id, e) => imageHandlersRef.current.onImagePointerDown?.(id, e),
+    []
+  );
+  const handleImageResizePointerDown = useCallback2(
+    (id, e) => imageHandlersRef.current.onImageResizePointerDown?.(id, e),
+    []
+  );
+  const handleImageClose = useCallback2(
+    (id) => imageHandlersRef.current.onImageClose?.(id),
+    []
+  );
   useEffect2(() => {
     const container = containerRef.current;
     if (!container) return;
@@ -758,67 +870,26 @@ function MejiroScrollView({
     {
       className: "mejiro-reader-scroll-track",
       style: { display: "flex", flexDirection: "column", gap: pageGap },
-      children: pages.map((result, i) => /* @__PURE__ */ jsxs5(
-        "div",
+      children: pages.map((result, i) => /* @__PURE__ */ jsx9(
+        ScrollPage,
         {
-          ref: (el) => {
-            pageRefs.current[i] = el;
-          },
-          "data-page-idx": i,
-          className: "mejiro-reader-page",
-          style: {
-            width: pageWidth,
-            height: pageHeight,
-            flexShrink: 0,
-            ...i === rightPage && rightImages.length > 0 || i === leftPage && leftImages.length > 0 ? { overflow: "visible" } : null
-          },
-          children: [
-            /* @__PURE__ */ jsx9("div", { className: "mejiro-reader-page-rule" }),
-            /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-page-header", children: [
-              /* @__PURE__ */ jsx9("span", { className: "mejiro-reader-page-header-title" }),
-              /* @__PURE__ */ jsx9("span", { className: "mejiro-reader-page-header-num", children: i + 1 })
-            ] }),
-            /* @__PURE__ */ jsx9("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: [
-              /* @__PURE__ */ jsx9(
-                MejiroPageView,
-                {
-                  result,
-                  slotMode,
-                  fontFamily,
-                  lineSpacing,
-                  className: "mejiro-reader-page-content",
-                  style: contentStyle
-                }
-              ),
-              rectsByPage[i] && /* @__PURE__ */ jsx9(
-                MejiroSelectionLayer,
-                {
-                  rects: rectsByPage[i],
-                  side: i % 2 === 0 ? "right" : "left"
-                }
-              )
-            ] }) }),
-            i === rightPage && rightImages.map((item) => /* @__PURE__ */ jsx9(
-              MejiroImageOverlay,
-              {
-                rect: item.rect,
-                onOverlayPointerDown: (e) => onImagePointerDown?.(item.id, e),
-                onResizePointerDown: (e) => onImageResizePointerDown?.(item.id, e),
-                onClose: () => onImageClose?.(item.id)
-              },
-              item.id
-            )),
-            i === leftPage && leftImages.map((item) => /* @__PURE__ */ jsx9(
-              MejiroImageOverlay,
-              {
-                rect: { ...item.rect, x: item.rect.x + pageWidth },
-                onOverlayPointerDown: (e) => onImagePointerDown?.(item.id, e),
-                onResizePointerDown: (e) => onImageResizePointerDown?.(item.id, e),
-                onClose: () => onImageClose?.(item.id)
-              },
-              item.id
-            ))
-          ]
+          result,
+          index: i,
+          pageNumber: pageNumberFor(pageNumbers, i),
+          pageWidth,
+          pageHeight,
+          contentHeight,
+          slotMode,
+          fontFamily,
+          lineSpacing,
+          contentStyle,
+          rects: rectsByPage[i],
+          overlays: i === rightPage ? rightImages : i === leftPage ? leftImages : NO_IMAGES,
+          overlaysLeft: i === leftPage,
+          registerPage,
+          onImagePointerDown: handleImagePointerDown,
+          onImageResizePointerDown: handleImageResizePointerDown,
+          onImageClose: handleImageClose
         },
         i
       ))
@@ -828,7 +899,7 @@ function MejiroScrollView({
 
 // src/MejiroSettingsPanel.tsx
 import { normalizeFontFamily as normalizeFontFamily3 } from "@libraz/mejiro/browser";
-import { useEffect as useEffect3, useRef as useRef4, useState as useState3 } from "react";
+import { useEffect as useEffect3, useId, useRef as useRef4, useState as useState3 } from "react";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_FONTS = [
   { value: "serif", label: "System Serif" },
@@ -897,15 +968,24 @@ function MejiroSettingsPanel({
   maxFontSize = 48
 }) {
   const messages = useI18n();
+  const uid = useId();
   const patch = (next) => onChange({ ...settings, ...next });
   const currentFont = normalizeFontFamily3(settings.fontFamily);
   const fontOptions = fonts.some((f) => f.value === currentFont) ? fonts : [{ value: currentFont, label: fontLabelFromCss(currentFont) }, ...fonts];
   return /* @__PURE__ */ jsx10("div", { className: `mejiro-reader-settings-panel${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-settings-inner", children: /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-settings-content", children: [
     /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-settings-group", children: [
       /* @__PURE__ */ jsx10("span", { className: "mejiro-reader-settings-group-title", children: messages.settingsFont }),
-      /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-control", children: /* @__PURE__ */ jsx10("select", { value: currentFont, onChange: (e) => patch({ fontFamily: e.target.value }), children: fontOptions.map((f) => /* @__PURE__ */ jsx10("option", { value: f.value, children: f.label }, f.value)) }) }),
+      /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-control", children: /* @__PURE__ */ jsx10(
+        "select",
+        {
+          "aria-label": messages.settingsFont,
+          value: currentFont,
+          onChange: (e) => patch({ fontFamily: e.target.value }),
+          children: fontOptions.map((f) => /* @__PURE__ */ jsx10("option", { value: f.value, children: f.label }, f.value))
+        }
+      ) }),
       /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-font-size", children: messages.settingsSize }),
+        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: `${uid}-font-size`, children: messages.settingsSize }),
         /* @__PURE__ */ jsx10(
           "button",
           {
@@ -926,7 +1006,7 @@ function MejiroSettingsPanel({
         /* @__PURE__ */ jsx10(
           CommittedNumberInput,
           {
-            id: "mejiro-reader-font-size",
+            id: `${uid}-font-size`,
             value: settings.fontSize,
             min: minFontSize,
             max: maxFontSize,
@@ -955,11 +1035,11 @@ function MejiroSettingsPanel({
     /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-settings-group", children: [
       /* @__PURE__ */ jsx10("span", { className: "mejiro-reader-settings-group-title", children: messages.settingsLayout }),
       /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-kinsoku", children: messages.settingsKinsoku }),
+        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: `${uid}-kinsoku`, children: messages.settingsKinsoku }),
         /* @__PURE__ */ jsxs6(
           "select",
           {
-            id: "mejiro-reader-kinsoku",
+            id: `${uid}-kinsoku`,
             value: settings.mode ?? "strict",
             onChange: (e) => patch({ mode: e.target.value }),
             children: [
@@ -970,11 +1050,11 @@ function MejiroSettingsPanel({
         )
       ] }),
       /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-hanging", children: messages.settingsHanging }),
+        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: `${uid}-hanging`, children: messages.settingsHanging }),
         /* @__PURE__ */ jsxs6(
           "select",
           {
-            id: "mejiro-reader-hanging",
+            id: `${uid}-hanging`,
             value: String(settings.enableHanging ?? true),
             onChange: (e) => patch({ enableHanging: e.target.value === "true" }),
             children: [
@@ -985,11 +1065,11 @@ function MejiroSettingsPanel({
         )
       ] }),
       /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-line-spacing", children: messages.settingsLineSpacing }),
+        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: `${uid}-line-spacing`, children: messages.settingsLineSpacing }),
         /* @__PURE__ */ jsx10(
           CommittedNumberInput,
           {
-            id: "mejiro-reader-line-spacing",
+            id: `${uid}-line-spacing`,
             className: "mejiro-reader-control--wide",
             value: settings.lineSpacing ?? 1.8,
             min: 1,
@@ -1375,16 +1455,38 @@ function createDraftChangeTracker(chapters, key) {
 }
 
 // src/useChapterLayout.ts
-import { useMemo as useMemo4, useRef as useRef7 } from "react";
+import { useMemo as useMemo4, useRef as useRef8 } from "react";
 
 // src/useSurfaceLayout.ts
 import {
-  useCallback as useCallback2,
-  useEffect as useEffect4,
+  useCallback as useCallback3,
+  useEffect as useEffect5,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState4
 } from "react";
+
+// src/useRequestToken.ts
+import { useEffect as useEffect4, useRef as useRef6 } from "react";
+function useRequestToken() {
+  const ref = useRef6(null);
+  if (!ref.current) {
+    let latest = 0;
+    ref.current = {
+      begin: () => ++latest,
+      current: () => latest,
+      isCurrent: (token2) => token2 === latest,
+      invalidate: () => {
+        latest++;
+      }
+    };
+  }
+  const token = ref.current;
+  useEffect4(() => () => token.invalidate(), [token]);
+  return token;
+}
+
+// src/useSurfaceLayout.ts
 function useSurfaceLayout(source, surface, options) {
   const { enableResize, resizeDebounce } = options;
   const [layout, setLayout] = useState4(null);
@@ -1392,19 +1494,23 @@ function useSurfaceLayout(source, surface, options) {
   const [pageHeight, setPageHeight] = useState4(0);
   const [contentHeight, setContentHeight] = useState4(0);
   const [elapsedMs, setElapsedMs] = useState4(0);
-  const layoutRef = useRef6(null);
+  const [element, setElement] = useState4(surface.current);
+  useLayoutEffect2(() => {
+    if (surface.current !== element) setElement(surface.current);
+  });
+  const layoutRef = useRef7(null);
   layoutRef.current = layout;
-  const requestIdRef = useRef6(0);
-  const pendingRestore = useRef6(null);
-  const measuredBoxRef = useRef6(null);
-  const optionsRef = useRef6(options);
+  const requests = useRequestToken();
+  const pendingRestore = useRef7(null);
+  const measuredBoxRef = useRef7(null);
+  const optionsRef = useRef7(options);
   optionsRef.current = options;
-  const recompute = useCallback2(
+  const recompute = useCallback3(
     async (opts = {}) => {
       const blank = opts.blank ?? true;
       const o = optionsRef.current;
-      const requestId = ++requestIdRef.current;
-      const el = surface.current;
+      const requestId = requests.begin();
+      const el = element;
       if (!(source && el)) {
         measuredBoxRef.current = null;
         setLayout(null);
@@ -1425,27 +1531,27 @@ function useSurfaceLayout(source, surface, options) {
         setContentHeight(dims.contentHeight);
         const t0 = performance.now();
         const next = await source.layout();
-        if (requestId !== requestIdRef.current) return;
+        if (!requests.isCurrent(requestId)) return;
         layoutRef.current = next;
         setLayout(next);
         setElapsedMs(performance.now() - t0);
       } catch (err) {
-        if (requestId !== requestIdRef.current) return;
+        if (!requests.isCurrent(requestId)) return;
         const handler = optionsRef.current.onError;
         if (!handler) throw err;
         handler(toError(err));
       }
     },
-    [source, surface]
+    [source, element, requests]
   );
-  const recomputeRef = useRef6(recompute);
+  const recomputeRef = useRef7(recompute);
   recomputeRef.current = recompute;
-  const trigger = useCallback2((opts) => {
+  const trigger = useCallback3((opts) => {
     recomputeRef.current(opts).catch(() => {
     });
   }, []);
   useLayoutEffect2(() => {
-    requestIdRef.current++;
+    requests.invalidate();
     pendingRestore.current = null;
     setLayout(null);
     setPageWidth(0);
@@ -1453,13 +1559,13 @@ function useSurfaceLayout(source, surface, options) {
     setContentHeight(0);
     setElapsedMs(0);
   }, [recompute]);
-  useEffect4(() => {
+  useEffect5(() => {
     recompute().catch(() => {
     });
     return () => {
-      requestIdRef.current++;
+      requests.invalidate();
     };
-  }, [recompute]);
+  }, [recompute, requests]);
   useLayoutEffect2(() => {
     const anchor = pendingRestore.current;
     const restore = optionsRef.current.restorePosition;
@@ -1467,9 +1573,9 @@ function useSurfaceLayout(source, surface, options) {
     pendingRestore.current = null;
     restore(layout, anchor);
   }, [layout]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!enableResize) return;
-    const el = surface.current;
+    const el = element;
     if (!el) return;
     let timer = null;
     let observed = false;
@@ -1513,13 +1619,13 @@ function useSurfaceLayout(source, surface, options) {
       window.removeEventListener("resize", onWindowResize);
       clear();
     };
-  }, [surface, enableResize, resizeDebounce, trigger]);
+  }, [element, enableResize, resizeDebounce, trigger]);
   return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute, pendingRestore };
 }
 
 // src/useChapterLayout.ts
 function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
-  const optionsRef = useRef7(options);
+  const optionsRef = useRef8(options);
   optionsRef.current = options;
   const source = useMemo4(() => {
     const chapter = epub?.chapters[chapterIndex];
@@ -1538,92 +1644,92 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
 
 // src/useEpub.ts
 import { parseEpub } from "@libraz/mejiro/epub";
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef8, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef9, useState as useState5 } from "react";
 function useEpub(options = {}) {
   const [epub, setEpub] = useState5(null);
   const [loading, setLoading] = useState5(false);
   const [error, setError] = useState5(null);
-  const requestIdRef = useRef8(0);
-  const onLoadRef = useRef8(options.onLoad);
+  const requests = useRequestToken();
+  const onLoadRef = useRef9(options.onLoad);
   onLoadRef.current = options.onLoad;
-  const onErrorRef = useRef8(options.onError);
+  const onErrorRef = useRef9(options.onError);
   onErrorRef.current = options.onError;
-  const fetchOptionsRef = useRef8(options.fetchOptions);
+  const fetchOptionsRef = useRef9(options.fetchOptions);
   fetchOptionsRef.current = options.fetchOptions;
-  const fetchEpubRef = useRef8(options.fetchEpub);
+  const fetchEpubRef = useRef9(options.fetchEpub);
   fetchEpubRef.current = options.fetchEpub;
-  const limitsRef = useRef8(options.limits);
+  const limitsRef = useRef9(options.limits);
   limitsRef.current = options.limits;
-  const load = useCallback3(async (read) => {
-    const requestId = ++requestIdRef.current;
-    setLoading(true);
-    setError(null);
-    try {
-      const book = await parseEpub(await read(), { limits: limitsRef.current });
-      if (requestId !== requestIdRef.current) return null;
-      setEpub(book);
-      onLoadRef.current?.(book);
-      return book;
-    } catch (err) {
-      if (requestId === requestIdRef.current) {
-        const nextError = toError(err);
-        setError(nextError);
-        onErrorRef.current?.(nextError);
+  const load = useCallback4(
+    async (read) => {
+      const requestId = requests.begin();
+      setLoading(true);
+      setError(null);
+      try {
+        const book = await parseEpub(await read(), { limits: limitsRef.current });
+        if (!requests.isCurrent(requestId)) return null;
+        setEpub(book);
+        onLoadRef.current?.(book);
+        return book;
+      } catch (err) {
+        if (requests.isCurrent(requestId)) {
+          const nextError = toError(err);
+          setError(nextError);
+          onErrorRef.current?.(nextError);
+        }
+        return null;
+      } finally {
+        if (requests.isCurrent(requestId)) setLoading(false);
       }
-      return null;
-    } finally {
-      if (requestId === requestIdRef.current) setLoading(false);
-    }
-  }, []);
-  const loadBuffer = useCallback3((buffer) => load(async () => buffer), [load]);
-  const loadFile = useCallback3(
+    },
+    [requests]
+  );
+  const loadBuffer = useCallback4((buffer) => load(async () => buffer), [load]);
+  const loadFile = useCallback4(
     (file) => load(() => readEpubFile(file, limitsRef.current)),
     [load]
   );
-  const loadUrl = useCallback3(
+  const loadUrl = useCallback4(
     (url) => load(
       () => fetchEpubRef.current ? fetchEpubRef.current(url) : fetchEpubBuffer(url, fetchOptionsRef.current)
     ),
     [load]
   );
   const defaultUrl = options.defaultUrl;
-  useEffect5(() => {
+  useEffect6(() => {
     if (!defaultUrl) return;
     void loadUrl(defaultUrl);
-    const requestId = requestIdRef.current;
+    const requestId = requests.current();
     return () => {
-      if (requestIdRef.current !== requestId) return;
-      requestIdRef.current++;
+      if (requests.current() !== requestId) return;
+      requests.invalidate();
       setLoading(false);
     };
-  }, [defaultUrl, loadUrl]);
-  useEffect5(
-    () => () => {
-      requestIdRef.current++;
+  }, [defaultUrl, loadUrl, requests]);
+  const replaceEpub = useCallback4(
+    (book) => {
+      requests.invalidate();
+      setLoading(false);
+      setError(null);
+      setEpub(book);
     },
-    []
+    [requests]
   );
-  const replaceEpub = useCallback3((book) => {
-    requestIdRef.current++;
-    setLoading(false);
-    setError(null);
-    setEpub(book);
-  }, []);
   return { epub, loading, error, loadBuffer, loadFile, loadUrl, setEpub: replaceEpub };
 }
 
 // src/useMejiroBook.ts
 import { MejiroBook } from "@libraz/mejiro/book";
-import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef9, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useRef as useRef10, useState as useState6 } from "react";
 function useMejiroBook(initial, options = {}) {
-  const bookRef = useRef9(null);
+  const bookRef = useRef10(null);
   if (!bookRef.current) bookRef.current = new MejiroBook(initial);
   const [snapshot, setLocal] = useState6(initial);
-  const optionsRef = useRef9(options);
+  const optionsRef = useRef10(options);
   optionsRef.current = options;
-  const pendingRef = useRef9(null);
-  const flushGenerationRef = useRef9(0);
-  const flush = useCallback4(() => {
+  const pendingRef = useRef10(null);
+  const flushGenerationRef = useRef10(0);
+  const flush = useCallback5(() => {
     const pending = pendingRef.current;
     if (!pending) return;
     pendingRef.current = null;
@@ -1654,7 +1760,7 @@ function useMejiroBook(initial, options = {}) {
       }
     );
   }, []);
-  const setOptions = useCallback4(
+  const setOptions = useCallback5(
     (next) => {
       setLocal((prev) => mergeDefined(prev, next));
       const pending = pendingRef.current ?? { patch: {}, timer: null, waiters: [] };
@@ -1678,7 +1784,7 @@ function useMejiroBook(initial, options = {}) {
     },
     [flush]
   );
-  useEffect6(
+  useEffect7(
     () => () => {
       bookRef.current?.dispose();
       const pending = pendingRef.current;
@@ -1693,7 +1799,7 @@ function useMejiroBook(initial, options = {}) {
 }
 
 // src/useSpread.ts
-import { useCallback as useCallback5, useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef10, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useRef as useRef11, useState as useState7 } from "react";
 function ignoreNavigationKey(e) {
   if (e.defaultPrevented) return true;
   if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return true;
@@ -1723,7 +1829,7 @@ function useSpread(layout, options = {}) {
   const enableKeyboard = options.enableKeyboard ?? true;
   const turnDuration = options.turnDuration ?? 180;
   const single = options.single ?? false;
-  const onChangeRef = useRef10(options.onChange);
+  const onChangeRef = useRef11(options.onChange);
   onChangeRef.current = options.onChange;
   const [spreadIdx, setSpreadIdx] = useState7(0);
   const [indexSingle, setIndexSingle] = useState7(single);
@@ -1733,22 +1839,22 @@ function useSpread(layout, options = {}) {
   }
   const [spread, setSpread] = useState7(null);
   const [turning, setTurning] = useState7(false);
-  const layoutRef = useRef10(null);
+  const layoutRef = useRef11(null);
   layoutRef.current = layout;
-  const spreadIdxRef = useRef10(0);
+  const spreadIdxRef = useRef11(0);
   spreadIdxRef.current = spreadIdx;
-  const singleRef = useRef10(single);
+  const singleRef = useRef11(single);
   singleRef.current = single;
-  const turnTimerRef = useRef10(null);
-  const turnTargetRef = useRef10(null);
-  const layoutGenerationRef = useRef10(0);
-  const lastEmittedRef = useRef10(null);
+  const turnTimerRef = useRef11(null);
+  const turnTargetRef = useRef11(null);
+  const layoutGenerationRef = useRef11(0);
+  const lastEmittedRef = useRef11(null);
   const totalPages = spread?.totalPages ?? 0;
   const totalSpreads = navigationCount(totalPages, single);
   const firstPage = firstPageOf(spreadIdx, single);
   const layoutSpreadIdx = Math.floor(firstPage / 2);
   const singleSide = single ? firstPage % 2 === 0 ? "right" : "left" : null;
-  const refresh = useCallback5(() => {
+  const refresh = useCallback6(() => {
     if (!layoutRef.current) {
       setSpread(null);
       return;
@@ -1771,7 +1877,7 @@ function useSpread(layout, options = {}) {
     }
     setSpread(layout.getSpread(0));
   }, [layout]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!layout) return;
     setSpread(layout.getSpread(layoutSpreadIdx));
     const last = lastEmittedRef.current;
@@ -1784,12 +1890,12 @@ function useSpread(layout, options = {}) {
     }
     lastEmittedRef.current = { layout, spreadIdx };
   }, [layout, spreadIdx, layoutSpreadIdx]);
-  const navigationTarget = useCallback5(() => {
+  const navigationTarget = useCallback6(() => {
     const pending = turnTargetRef.current;
     if (!pending) return spreadIdxRef.current;
     return indexOfPageIn(firstPageOf(pending.index, pending.single), singleRef.current);
   }, []);
-  const goTo = useCallback5(
+  const goTo = useCallback6(
     (index) => {
       if (!layoutRef.current) return;
       const targetSingle = singleRef.current;
@@ -1823,7 +1929,7 @@ function useSpread(layout, options = {}) {
     },
     [turnDuration, navigationTarget]
   );
-  const setSpreadIndex = useCallback5((index) => {
+  const setSpreadIndex = useCallback6((index) => {
     if (!layoutRef.current) return;
     if (turnTimerRef.current) {
       clearTimeout(turnTimerRef.current);
@@ -1834,17 +1940,17 @@ function useSpread(layout, options = {}) {
     const max = navigationCount(layoutRef.current.totalPages, singleRef.current) - 1;
     setSpreadIdx(Math.max(0, Math.min(max, index)));
   }, []);
-  const indexOfPage = useCallback5((pageIdx) => indexOfPageIn(pageIdx, single), [single]);
-  const anchorAt = useCallback5(
+  const indexOfPage = useCallback6((pageIdx) => indexOfPageIn(pageIdx, single), [single]);
+  const anchorAt = useCallback6(
     (index) => {
       if (!layout || index < 0 || index >= navigationCount(layout.totalPages, single)) return null;
       return firstTextAnchorFrom(layout, firstPageOf(index, single));
     },
     [layout, single]
   );
-  const next = useCallback5(() => goTo(navigationTarget() + 1), [goTo, navigationTarget]);
-  const prev = useCallback5(() => goTo(navigationTarget() - 1), [goTo, navigationTarget]);
-  useEffect7(() => {
+  const next = useCallback6(() => goTo(navigationTarget() + 1), [goTo, navigationTarget]);
+  const prev = useCallback6(() => goTo(navigationTarget() - 1), [goTo, navigationTarget]);
+  useEffect8(() => {
     if (!enableKeyboard) return;
     const onKey = (e) => {
       if (!layoutRef.current) return;
@@ -1855,7 +1961,7 @@ function useSpread(layout, options = {}) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [enableKeyboard, next, prev]);
-  useEffect7(
+  useEffect8(
     () => () => {
       if (turnTimerRef.current) clearTimeout(turnTimerRef.current);
     },
@@ -1949,6 +2055,10 @@ function createAnchorResolver(nav) {
   const update = (target) => {
     const current = pending;
     if (!(current && target.book)) return;
+    if (current.moved) {
+      settle();
+      return;
+    }
     const { anchor } = current;
     if (!(anchor.chapter >= 0 && anchor.chapter < target.book.chapters.length)) {
       settle();
@@ -1965,13 +2075,16 @@ function createAnchorResolver(nav) {
       paragraph: anchor.paragraph,
       charIndex: anchor.charIndex
     });
-    if (loc) nav.goToPage(loc.pageIdx);
+    if (loc && nav.goToPage(loc.pageIdx)) {
+      current.moved = true;
+      return;
+    }
     settle();
   };
   return {
     request: (anchor, target) => new Promise((resolve) => {
       settle();
-      pending = { anchor, resolve, chapterRequested: false };
+      pending = { anchor, resolve, chapterRequested: false, moved: false };
       update(target);
     }),
     update,
@@ -2024,8 +2137,8 @@ function MejiroReaderInner(props, ref) {
     onPageRead,
     onChapterCompleted
   } = props;
-  const surfaceRef = useRef11(null);
-  const fileRef = useRef11(null);
+  const surfaceRef = useRef12(null);
+  const fileRef = useRef12(null);
   const [settingsOpen, setSettingsOpen] = useState8(false);
   const [chapterState, setChapterState] = useState8(chapterProp ?? 0);
   const chapterIsUncontrolled = chapterProp == null;
@@ -2034,7 +2147,7 @@ function MejiroReaderInner(props, ref) {
     null
   );
   const [autoSingle, setAutoSingle] = useState8(false);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!settingsOpen) return;
     const onKey = (e2) => {
       if (e2.key === "Escape") setSettingsOpen(false);
@@ -2042,20 +2155,23 @@ function MejiroReaderInner(props, ref) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [settingsOpen]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (spreadMode !== "auto") return;
     const surface = surfaceRef.current;
     if (!surface) return;
     const update = () => {
       const rect = surface.getBoundingClientRect();
-      setAutoSingle(rect.width < rect.height);
+      setAutoSingle(rect.width < (fit === "width" ? window.innerHeight : rect.height));
     };
     update();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(update);
-    observer.observe(surface);
-    return () => observer.disconnect();
-  }, [spreadMode]);
+    window.addEventListener("resize", update);
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+    observer?.observe(surface);
+    return () => {
+      window.removeEventListener("resize", update);
+      observer?.disconnect();
+    };
+  }, [spreadMode, fit]);
   const effectiveSingle = spreadMode === "single" || spreadMode === "auto" && autoSingle;
   const resolvedGeometry = useMemo5(() => {
     const columns = effectiveSingle ? 1 : 2;
@@ -2082,9 +2198,9 @@ function MejiroReaderInner(props, ref) {
     () => mergeDefined(DEFAULT_BOOK_OPTIONS, optionsProp ?? {}),
     [optionsProp]
   );
-  const onErrorRef = useRef11(onError);
+  const onErrorRef = useRef12(onError);
   onErrorRef.current = onError;
-  const reportError = useCallback6((error) => onErrorRef.current?.(error), []);
+  const reportError = useCallback7((error) => onErrorRef.current?.(error), []);
   const {
     book,
     options: bookOptions,
@@ -2093,8 +2209,8 @@ function MejiroReaderInner(props, ref) {
     debounceMs: OPTIONS_DEBOUNCE_MS,
     onError: reportError
   });
-  const lastApplyRef = useRef11(Promise.resolve());
-  const setOptions = useCallback6(
+  const lastApplyRef = useRef12(Promise.resolve());
+  const setOptions = useCallback7(
     (partial) => {
       const applied = applyBookOptions(partial);
       lastApplyRef.current = applied;
@@ -2103,10 +2219,10 @@ function MejiroReaderInner(props, ref) {
     [applyBookOptions]
   );
   const optionsPropKey = JSON.stringify(resolvedOptions);
-  const syncedOptionsPropKeyRef = useRef11(optionsPropKey);
-  const resolvedOptionsRef = useRef11(resolvedOptions);
+  const syncedOptionsPropKeyRef = useRef12(optionsPropKey);
+  const resolvedOptionsRef = useRef12(resolvedOptions);
   resolvedOptionsRef.current = resolvedOptions;
-  useEffect8(() => {
+  useEffect9(() => {
     if (syncedOptionsPropKeyRef.current === optionsPropKey) return;
     syncedOptionsPropKeyRef.current = optionsPropKey;
     void setOptions(resolvedOptionsRef.current);
@@ -2125,7 +2241,6 @@ function MejiroReaderInner(props, ref) {
     limits,
     fetchEpub: fetchEpubFn,
     onLoad: (b) => {
-      if (chapterProp == null) setChapterState(0);
       clearImagesRef.current();
       onLoad?.(b);
     }
@@ -2133,22 +2248,43 @@ 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 sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : epubProp;
+  const sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : bookIdentity(epubProp);
   const bookKey = controlled ? sourceKey : epubCtx.epub;
-  const chapter = clampChapter(chapterProp ?? chapterState, e);
+  const [seenBookKey, setSeenBookKey] = useState8(bookKey);
+  let chapterRaw = chapterState;
+  if (seenBookKey !== bookKey) {
+    setSeenBookKey(bookKey);
+    if (chapterIsUncontrolled) {
+      setChapterState(0);
+      chapterRaw = 0;
+    }
+  }
+  const chapter = clampChapter(chapterProp ?? chapterRaw, e);
+  const onChapterChangeRef = useRef12(onChapterChange);
+  onChapterChangeRef.current = onChapterChange;
+  const shownChapterRef = useRef12({ book: seenBookKey, chapter });
+  useEffect9(() => {
+    const prev = shownChapterRef.current;
+    shownChapterRef.current = { book: seenBookKey, chapter };
+    if (chapterIsUncontrolled && prev.book !== seenBookKey && prev.chapter !== chapter) {
+      onChapterChangeRef.current?.(chapter);
+    }
+  }, [seenBookKey, chapter, chapterIsUncontrolled]);
   const filePicker = enableDropZone && !controlled;
-  useEffect8(() => {
+  useEffect9(() => {
     if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
   }, [epubCtx.error]);
-  const pageGeometryRef = useRef11(resolvedGeometry);
+  const pageGeometryRef = useRef12(resolvedGeometry);
   pageGeometryRef.current = resolvedGeometry;
-  const spreadAnchorRef = useRef11(() => null);
-  const spreadIdxPropRef = useRef11(spreadIdxProp);
+  const spreadAnchorRef = useRef12(() => null);
+  const spreadIdxPropRef = useRef12(spreadIdxProp);
   spreadIdxPropRef.current = spreadIdxProp;
-  const visibleAnchorRef = useRef11(
+  const visibleAnchorRef = useRef12(
     null
   );
-  const layoutCtx = useChapterLayout(book, e, chapter, surfaceRef, {
+  const layoutMemoRef = useRef12(null);
+  layoutMemoRef.current = resolveLayoutEpub(layoutMemoRef.current, e, bookKey, chapter);
+  const layoutCtx = useChapterLayout(book, layoutMemoRef.current.epub, chapter, surfaceRef, {
     pageGeometry: () => pageGeometryRef.current,
     // Preserve the reading position across a reflow re-layout (size / option
     // changes), but only in uncontrolled mode — when `spreadIdx` is controlled
@@ -2161,8 +2297,8 @@ function MejiroReaderInner(props, ref) {
     },
     onError: reportError
   });
-  const reportedSpreadIdxRef = useRef11(null);
-  const spreadChangedRef = useRef11(void 0);
+  const reportedSpreadIdxRef = useRef12(null);
+  const spreadChangedRef = useRef12(void 0);
   spreadChangedRef.current = (i) => {
     reportedSpreadIdxRef.current = i;
     onSpreadChange?.(i);
@@ -2174,9 +2310,9 @@ function MejiroReaderInner(props, ref) {
     onChange: (i) => spreadChangedRef.current?.(i)
   });
   spreadAnchorRef.current = () => spreadCtx.anchorAt(spreadCtx.spreadIdx);
-  const indexOfPageRef = useRef11(spreadCtx.indexOfPage);
+  const indexOfPageRef = useRef12(spreadCtx.indexOfPage);
   indexOfPageRef.current = spreadCtx.indexOfPage;
-  const anchorSingleRef = useRef11(effectiveSingle);
+  const anchorSingleRef = useRef12(effectiveSingle);
   useLayoutEffect4(() => {
     const l = layoutCtx.layout;
     const flipped = anchorSingleRef.current !== effectiveSingle;
@@ -2184,7 +2320,7 @@ function MejiroReaderInner(props, ref) {
     if (flipped && l && visibleAnchorRef.current?.layout === l) return;
     visibleAnchorRef.current = l ? { layout: l, anchor: spreadCtx.anchorAt(spreadCtx.spreadIdx) } : null;
   }, [layoutCtx.layout, spreadCtx.spreadIdx, spreadCtx.anchorAt, effectiveSingle]);
-  const setSpreadRef = useRef11(spreadCtx.setSpread);
+  const setSpreadRef = useRef12(spreadCtx.setSpread);
   setSpreadRef.current = spreadCtx.setSpread;
   useLayoutEffect4(() => {
     const anchor = layoutCtx.pendingRestore.current;
@@ -2195,10 +2331,10 @@ function MejiroReaderInner(props, ref) {
     visibleAnchorRef.current = { layout: layoutCtx.layout, anchor };
   }, [layoutCtx.layout]);
   const optionsKey = reflowOptionsKey(bookOptions);
-  const optionsKeyRef = useRef11(optionsKey);
-  const recomputeRef = useRef11(layoutCtx.recompute);
+  const optionsKeyRef = useRef12(optionsKey);
+  const recomputeRef = useRef12(layoutCtx.recompute);
   recomputeRef.current = layoutCtx.recompute;
-  useEffect8(() => {
+  useEffect9(() => {
     if (optionsKeyRef.current === optionsKey) return;
     optionsKeyRef.current = optionsKey;
     const timer = setTimeout(() => {
@@ -2214,8 +2350,8 @@ function MejiroReaderInner(props, ref) {
     return () => clearTimeout(timer);
   }, [optionsKey, reportError]);
   const geometryKey = JSON.stringify(resolvedGeometry ?? null);
-  const geometryKeyRef = useRef11(geometryKey);
-  useEffect8(() => {
+  const geometryKeyRef = useRef12(geometryKey);
+  useEffect9(() => {
     if (geometryKeyRef.current === geometryKey) return;
     geometryKeyRef.current = geometryKey;
     void recomputeRef.current({ blank: false });
@@ -2237,30 +2373,29 @@ function MejiroReaderInner(props, ref) {
     }
     return result;
   }, [annotations, layoutCtx.layout, chapter, imageCtx.currentImages]);
-  const clearImagesRef = useRef11(imageCtx.clearImages);
+  const clearImagesRef = useRef12(imageCtx.clearImages);
   clearImagesRef.current = imageCtx.clearImages;
-  const onLoadRef = useRef11(onLoad);
+  const onLoadRef = useRef12(onLoad);
   onLoadRef.current = onLoad;
-  const eRef = useRef11(e);
+  const eRef = useRef12(e);
   eRef.current = e;
-  useEffect8(() => {
+  useEffect9(() => {
     if (!controlled) return;
-    if (chapterIsUncontrolled) setChapterState(0);
     clearImagesRef.current();
     book.clearCache();
     if (eRef.current) onLoadRef.current?.(eRef.current);
-  }, [controlled, sourceKey, book, chapterIsUncontrolled]);
-  const imagesChapterRef = useRef11(chapter);
-  useEffect8(() => {
+  }, [controlled, sourceKey, book]);
+  const imagesChapterRef = useRef12(chapter);
+  useEffect9(() => {
     if (imagesChapterRef.current === chapter) return;
     imagesChapterRef.current = chapter;
     clearImagesRef.current();
   }, [chapter]);
-  const spreadGoToRef = useRef11(spreadCtx.goTo);
+  const spreadGoToRef = useRef12(spreadCtx.goTo);
   spreadGoToRef.current = spreadCtx.goTo;
-  const appliedSpreadIdxPropRef = useRef11(spreadIdxProp);
+  const appliedSpreadIdxPropRef = useRef12(spreadIdxProp);
   const [hostTurn, setHostTurn] = useState8(0);
-  useEffect8(() => {
+  useEffect9(() => {
     const reported = reportedSpreadIdxRef.current;
     reportedSpreadIdxRef.current = null;
     if (spreadIdxProp == null) {
@@ -2274,12 +2409,17 @@ function MejiroReaderInner(props, ref) {
     else if (reported === spreadCtx.spreadIdx) setHostTurn((n) => n + 1);
     else setSpreadRef.current(spreadIdxProp);
   }, [spreadIdxProp, spreadCtx.spreadIdx, hostTurn]);
+  const restoredForRef = useRef12(null);
   useLayoutEffect4(() => {
+    if (!layoutCtx.layout) return;
+    const previous = restoredForRef.current;
+    restoredForRef.current = { chapter, book: bookKey };
+    if (previous && (previous.chapter !== chapter || previous.book !== bookKey)) return;
     const next = spreadIdxPropRef.current;
-    if (next == null || !layoutCtx.layout) return;
+    if (next == null) return;
     setSpreadRef.current(next);
   }, [layoutCtx.layout]);
-  const onChapter = useCallback6(
+  const onChapter = useCallback7(
     (index) => {
       const i = clampChapter(index, e);
       if (i === chapter) return;
@@ -2288,10 +2428,10 @@ function MejiroReaderInner(props, ref) {
     },
     [chapter, chapterProp, onChapterChange, e]
   );
-  const onChapterRef = useRef11(onChapter);
+  const onChapterRef = useRef12(onChapter);
   onChapterRef.current = onChapter;
-  const listenersRef = useRef11(/* @__PURE__ */ new Map());
-  const emit = useCallback6(
+  const listenersRef = useRef12(/* @__PURE__ */ new Map());
+  const emit = useCallback7(
     (event, payload) => {
       const set = listenersRef.current.get(event);
       if (!set) return;
@@ -2299,7 +2439,7 @@ function MejiroReaderInner(props, ref) {
     },
     []
   );
-  const layoutOwnerRef = useRef11({
+  const layoutOwnerRef = useRef12({
     layout: null,
     chapter,
     book: bookKey
@@ -2310,22 +2450,29 @@ function MejiroReaderInner(props, ref) {
   const owner = layoutOwnerRef.current;
   const layout = owner.chapter === chapter && owner.book === bookKey ? layoutCtx.layout : null;
   const anchorTarget = { book: epubCtx.loading ? null : e, chapter, layout };
-  const anchorTargetRef = useRef11(anchorTarget);
+  const anchorTargetRef = useRef12(anchorTarget);
   anchorTargetRef.current = anchorTarget;
-  const anchorResolverRef = useRef11(null);
+  const spreadIdxNowRef = useRef12(spreadCtx.spreadIdx);
+  spreadIdxNowRef.current = spreadCtx.spreadIdx;
+  const anchorResolverRef = useRef12(null);
   anchorResolverRef.current ??= createAnchorResolver({
     goToChapter: (i) => onChapterRef.current(i),
-    goToPage: (pageIdx) => spreadGoToRef.current(indexOfPageRef.current(pageIdx))
+    goToPage: (pageIdx) => {
+      const target = indexOfPageRef.current(pageIdx);
+      if (target === spreadIdxNowRef.current) return false;
+      setSpreadRef.current(target);
+      return true;
+    }
   });
-  useEffect8(() => {
+  useEffect9(() => {
     anchorResolverRef.current?.update(anchorTargetRef.current);
-  }, [anchorTarget.book, chapter, layout]);
-  useEffect8(() => () => anchorResolverRef.current?.dispose(), []);
-  const onPageReadRef = useRef11(onPageRead);
+  }, [anchorTarget.book, chapter, layout, spreadCtx.spreadIdx]);
+  useEffect9(() => () => anchorResolverRef.current?.dispose(), []);
+  const onPageReadRef = useRef12(onPageRead);
   onPageReadRef.current = onPageRead;
-  const onChapterCompletedRef = useRef11(onChapterCompleted);
+  const onChapterCompletedRef = useRef12(onChapterCompleted);
   onChapterCompletedRef.current = onChapterCompleted;
-  const trackLifecycleRef = useRef11(null);
+  const trackLifecycleRef = useRef12(null);
   trackLifecycleRef.current ??= createLifecycleTracker({
     spreadChanged: (ch, spreadIdx) => emit("spreadChanged", { chapter: ch, spreadIdx }),
     chapterFinished: (ch) => {
@@ -2334,7 +2481,7 @@ function MejiroReaderInner(props, ref) {
     },
     pageRead: (anchor, dwellMs) => onPageReadRef.current?.(anchor, dwellMs)
   });
-  useEffect8(() => {
+  useEffect9(() => {
     const view = layout ? { total: spreadCtx.totalSpreads, anchor: spreadCtx.anchorAt(spreadCtx.spreadIdx) } : null;
     trackLifecycleRef.current?.(bookKey, chapter, spreadCtx.spreadIdx, view, spreadIdxProp);
   }, [
@@ -2346,8 +2493,8 @@ function MejiroReaderInner(props, ref) {
     layout,
     spreadIdxProp
   ]);
-  const prevTurningRef = useRef11(false);
-  useEffect8(() => {
+  const prevTurningRef = useRef12(false);
+  useEffect9(() => {
     if (spreadCtx.turning && !prevTurningRef.current) {
       emit("turnStart", { from: spreadCtx.spreadIdx });
     } else if (!spreadCtx.turning && prevTurningRef.current) {
@@ -2500,11 +2647,9 @@ function MejiroReaderInner(props, ref) {
     ] })
   ] }) : null;
   const currentSpread = spreadCtx.layoutSpreadIdx;
-  const rightPage = currentSpread * 2 + 1;
   const leftPage = currentSpread * 2 + 2;
   const showLeft = spreadCtx.spread != null && leftPage <= spreadCtx.spread.totalPages;
-  const showRightNum = pageNumbers === "both" || pageNumbers === "right";
-  const showLeftNum = pageNumbers === "both" || pageNumbers === "left";
+  const pageIndicator = enablePageIndicator ? /* @__PURE__ */ jsx13(MejiroPageIndicator, { current: spreadCtx.spreadIdx + 1, total: spreadCtx.totalSpreads }) : null;
   return /* @__PURE__ */ jsx13(MejiroI18nProvider, { messages: resolvedMessages, children: /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -2549,18 +2694,25 @@ function MejiroReaderInner(props, ref) {
                 ),
                 onVisiblePageChange: (pageIdx, source) => {
                   if (source === "programmatic") return;
-                  if (layoutCtx.layout) setUserScroll({ layout: layoutCtx.layout, page: pageIdx });
+                  const scrolledLayout = layoutCtx.layout;
+                  if (scrolledLayout) {
+                    setUserScroll(
+                      (prev) => prev?.layout === scrolledLayout && prev.page === pageIdx ? prev : { layout: scrolledLayout, page: pageIdx }
+                    );
+                  }
                   const target = spreadCtx.indexOfPage(pageIdx);
                   if (target !== spreadCtx.spreadIdx) spreadCtx.setSpread(target);
                 },
                 selectionRects: annotationRects.length ? annotationRects : void 0,
                 spreadIdx: spreadCtx.layoutSpreadIdx,
                 images: imageCtx.currentImages,
+                pageNumbers,
                 onImagePointerDown: imageCtx.onOverlayPointerDown,
                 onImageResizePointerDown: imageCtx.onResizePointerDown,
                 onImageClose: imageCtx.removeImage
               }
             ),
+            layoutReady && mode === "scroll" && layoutCtx.layout && pageIndicator,
             layoutReady && mode === "paginated" && spreadCtx.spread && /* @__PURE__ */ jsx13(
               MejiroSpread,
               {
@@ -2578,20 +2730,14 @@ function MejiroReaderInner(props, ref) {
                 turning: spreadCtx.turning,
                 rightHeader: {
                   title: runningTitleRight,
-                  pageNumber: showRightNum ? rightPage : null
+                  pageNumber: pageNumberFor2(pageNumbers, currentSpread * 2)
                 },
                 leftHeader: {
                   title: runningTitleLeft,
-                  pageNumber: showLeft && showLeftNum ? leftPage : null
+                  pageNumber: showLeft ? pageNumberFor2(pageNumbers, currentSpread * 2 + 1) : null
                 },
                 images: imageCtx.currentImages,
-                indicator: enablePageIndicator ? /* @__PURE__ */ jsx13(
-                  MejiroPageIndicator,
-                  {
-                    current: spreadCtx.spreadIdx + 1,
-                    total: spreadCtx.totalSpreads
-                  }
-                ) : null,
+                indicator: pageIndicator,
                 onPrev: spreadCtx.prev,
                 onNext: spreadCtx.next,
                 onImagePointerDown: imageCtx.onOverlayPointerDown,
@@ -2697,6 +2843,14 @@ function watermarkedBook(book, watermark) {
   const copy = cloneEditableEpubBook(book);
   const text = `${WATERMARK_PREFIX} ${watermark.text}`;
   for (const chapter of copy.chapters) {
+    if (!chapter.isDirty && chapter.originalXhtml) {
+      const injected = injectWatermarkXhtml(chapter.originalXhtml, text);
+      if (injected) {
+        chapter.originalXhtml = injected;
+        continue;
+      }
+      chapter.isDirty = true;
+    }
     chapter.blocks.unshift({
       kind: "paragraph",
       id: watermarkBlockId(chapter),
@@ -2704,10 +2858,19 @@ function watermarkedBook(book, watermark) {
       inlineAnnotations: []
     });
     chapter.paragraphs.unshift({ text, inlineAnnotations: [] });
-    chapter.isDirty = true;
   }
   return copy;
 }
+function injectWatermarkXhtml(xhtml, text) {
+  if (!/<html\b[^>]*\sxmlns\s*=\s*["']http:\/\/www\.w3\.org\/1999\/xhtml["']/i.test(xhtml)) {
+    return null;
+  }
+  const body = /<body\b(?:[^>]*[^/>])?>/i.exec(xhtml);
+  if (!body) return null;
+  const escaped = text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+  const end = body.index + body[0].length;
+  return `${xhtml.slice(0, end)}<p>${escaped}</p>${xhtml.slice(end)}`;
+}
 function watermarkBlockId(chapter) {
   const used = new Set(chapter.blocks.map((block) => block.id));
   let id = WATERMARK_BLOCK_ID;
@@ -2731,9 +2894,9 @@ function MejiroEditor({
   onError
 }) {
   const messages = useI18n();
-  const imageInputRef = useRef12(null);
-  const textareaRef = useRef12(null);
-  const readerRef = useRef12(null);
+  const imageInputRef = useRef13(null);
+  const textareaRef = useRef13(null);
+  const readerRef = useRef13(null);
   const [editor, setEditor] = useState9(null);
   const [loading, setLoading] = useState9(false);
   const [error, setError] = useState9(null);
@@ -2743,10 +2906,10 @@ function MejiroEditor({
   const [rubyStart, setRubyStart] = useState9(0);
   const [rubyEnd, setRubyEnd] = useState9(1);
   const [rubyText, setRubyText] = useState9("");
-  const loadRequestIdRef = useRef12(0);
-  const onLoadRef = useRef12(onLoad);
-  const onErrorRef = useRef12(onError);
-  const limitsRef = useRef12(limits);
+  const request = useRequestToken();
+  const onLoadRef = useRef13(onLoad);
+  const onErrorRef = useRef13(onError);
+  const limitsRef = useRef13(limits);
   limitsRef.current = limits;
   const book = editor?.book ?? null;
   const chapter = book?.chapters[selection.chapter] ?? null;
@@ -2755,75 +2918,77 @@ function MejiroEditor({
   const rubyRange = clampRubyRange(rubyStart, rubyEnd, [...text].length);
   const previewBook = useMemo6(() => {
     void revision;
-    return book ? cloneEditableEpubBook(book) : null;
-  }, [book, revision]);
-  useEffect9(() => {
+    return book && editor ? markBookIdentity(cloneEditableEpubBook(book), editor) : null;
+  }, [book, editor, revision]);
+  useEffect10(() => {
     onLoadRef.current = onLoad;
   }, [onLoad]);
-  useEffect9(() => {
+  useEffect10(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  const reportError = useCallback7((nextError) => {
+  const reportError = useCallback8((nextError) => {
     setError(nextError);
     onErrorRef.current?.(nextError);
   }, []);
-  const loadBufferForRequest = useCallback7(
-    async (buffer, requestId) => {
+  const clearError = useCallback8(() => setError(null), []);
+  const loadBufferForRequest = useCallback8(
+    async (buffer, token) => {
       setLoading(true);
-      setError(null);
+      clearError();
       try {
         const next = await EditableEpub.load(buffer, { limits: limitsRef.current });
-        if (requestId !== loadRequestIdRef.current) return;
+        if (!request.isCurrent(token)) return;
         setEditor(next);
         setSelection({ chapter: 0, paragraph: 0 });
         setRevision((value) => value + 1);
         onLoadRef.current?.(next);
       } catch (err) {
-        if (requestId === loadRequestIdRef.current) reportError(toError(err));
+        if (request.isCurrent(token)) reportError(toError(err));
       } finally {
-        if (requestId === loadRequestIdRef.current) setLoading(false);
+        if (request.isCurrent(token)) setLoading(false);
       }
     },
-    [reportError]
+    [clearError, reportError, request]
   );
   async function loadFile(file) {
-    const requestId = ++loadRequestIdRef.current;
+    const token = request.begin();
     setLoading(true);
-    setError(null);
+    clearError();
     try {
-      await loadBufferForRequest(await readEpubFile(file, limitsRef.current), requestId);
+      await loadBufferForRequest(await readEpubFile(file, limitsRef.current), token);
     } catch (err) {
-      if (requestId === loadRequestIdRef.current) {
+      if (request.isCurrent(token)) {
         reportError(toError(err));
         setLoading(false);
       }
     }
   }
-  useEffect9(() => {
+  useEffect10(() => {
     if (!epubUrl) return;
-    let cancelled = false;
-    const requestId = ++loadRequestIdRef.current;
+    const token = request.begin();
     void (async () => {
       setLoading(true);
-      setError(null);
+      clearError();
       try {
         const buffer = await fetchEpubBuffer(epubUrl);
-        if (cancelled || requestId !== loadRequestIdRef.current) return;
-        await loadBufferForRequest(buffer, requestId);
+        if (!request.isCurrent(token)) return;
+        await loadBufferForRequest(buffer, token);
       } catch (err) {
-        if (!cancelled && requestId === loadRequestIdRef.current) reportError(toError(err));
+        if (request.isCurrent(token)) reportError(toError(err));
       } finally {
-        if (!cancelled && requestId === loadRequestIdRef.current) setLoading(false);
+        if (request.isCurrent(token)) setLoading(false);
       }
     })();
     return () => {
-      cancelled = true;
+      if (!request.isCurrent(token)) return;
+      request.invalidate();
+      setLoading(false);
     };
-  }, [epubUrl, loadBufferForRequest, reportError]);
-  const syncedRef = useRef12(
+  }, [epubUrl, clearError, loadBufferForRequest, reportError, request]);
+  const syncedRef = useRef13(
     null
   );
-  useEffect9(() => {
+  useEffect10(() => {
     const nextText = paragraph?.text ?? "";
     const target = `${selection.chapter}:${selection.paragraph}`;
     const prev = syncedRef.current;
@@ -2837,7 +3002,7 @@ function MejiroEditor({
     setRubyEnd(Math.min(1, [...nextText].length));
     setRubyText("");
   }, [editor, selection.chapter, selection.paragraph, paragraph]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!previewBook) return;
     void readerRef.current?.goToAnchor({
       chapter: selection.chapter,
@@ -2885,6 +3050,7 @@ function MejiroEditor({
         afterBlockId
       });
       setRevision((value) => value + 1);
+      clearError();
     }, reportError);
   }
   async function exportEpub() {
@@ -2898,10 +3064,20 @@ function MejiroEditor({
       const decision = await onBeforeExport?.(buffer);
       onExport?.(buffer);
       const allowDownload = exportPolicy ? exportPolicy.allowDownload !== false : decision !== false;
-      if (!allowDownload) return;
-      downloadEpub(buffer, `${editor.title || "edited"}.epub`);
+      if (allowDownload) downloadEpub(buffer, `${editor.title || "edited"}.epub`);
+      clearError();
     }, reportError);
   }
+  const paragraphText = /* @__PURE__ */ jsx14(
+    "textarea",
+    {
+      ref: textareaRef,
+      value: text,
+      readOnly: sceneBreak || !enableProofread,
+      onChange: (event) => setText(event.target.value),
+      onSelect: captureRubyRange
+    }
+  );
   return /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor", children: [
     /* @__PURE__ */ jsxs9("main", { className: "mejiro-editor-preview", children: [
       previewBook ? /* @__PURE__ */ jsx14(
@@ -2911,6 +3087,7 @@ function MejiroEditor({
           epub: previewBook,
           chapter: selection.chapter,
           onChapterChange: (index) => selectParagraph(index, 0),
+          onError: reportError,
           fonts,
           subtitle: messages.editorPreviewSubtitle,
           chapterNavMode: "panel",
@@ -2948,16 +3125,7 @@ function MejiroEditor({
         ] }),
         enableProofread && /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
           /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorProofread }),
-          /* @__PURE__ */ jsx14(
-            "textarea",
-            {
-              ref: textareaRef,
-              value: text,
-              readOnly: sceneBreak,
-              onChange: (event) => setText(event.target.value),
-              onSelect: captureRubyRange
-            }
-          ),
+          paragraphText,
           /* @__PURE__ */ jsx14(
             "button",
             {
@@ -2972,6 +3140,7 @@ function MejiroEditor({
         enableRuby && /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
           /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorRuby }),
           /* @__PURE__ */ jsx14("p", { className: "mejiro-editor-hint", children: messages.editorRubyHint }),
+          !enableProofread && paragraphText,
           /* @__PURE__ */ jsx14("p", { className: "mejiro-editor-range", children: format(messages.editorRubyRange, {
             start: rubyRange?.start ?? 0,
             end: rubyRange?.end ?? 0,
@@ -3038,8 +3207,8 @@ function paragraphBlock(chapter, paragraphIndex) {
 }
 
 // src/MejiroManuscriptEditor.tsx
-import { EpubProject } from "@libraz/mejiro/epub";
-import { useCallback as useCallback9, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef15, useState as useState12 } from "react";
+import { EpubProject as EpubProject2 } from "@libraz/mejiro/epub";
+import { useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo9, useRef as useRef17, useState as useState13 } from "react";
 
 // src/MejiroNotationHighlighter.tsx
 import { tokenizeManuscriptSource } from "@libraz/mejiro";
@@ -3047,7 +3216,7 @@ import {
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo7,
-  useRef as useRef13,
+  useRef as useRef14,
   useState as useState10
 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -3064,12 +3233,12 @@ var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2(
   onCompositionEnd,
   ...rest
 }, ref) {
-  const textareaRef = useRef13(null);
-  const overlayRef = useRef13(null);
+  const textareaRef = useRef14(null);
+  const overlayRef = useRef14(null);
   useImperativeHandle2(ref, () => textareaRef.current, []);
   const [isComposing, setIsComposing] = useState10(false);
   const [composingValue, setComposingValue] = useState10("");
-  const lastSegmentsRef = useRef13(null);
+  const lastSegmentsRef = useRef14(null);
   const segments = useMemo7(() => {
     if (isComposing && lastSegmentsRef.current) return lastSegmentsRef.current;
     const next = buildSegments(value, dialect);
@@ -3162,83 +3331,349 @@ function buildSegments(text, dialect) {
   return segments;
 }
 
-// src/useManuscriptDraft.ts
-import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef14, useState as useState11 } from "react";
-var DEFAULT_DELAY = 800;
-function defaultChapter(existing, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
-  const index = existing.length;
-  return { id: uniqueChapterId(existing), title: titleFor(index), body: bodyFor(index) };
-}
-function useManuscriptDraft(options = {}) {
-  const {
-    onAutosave,
-    autosaveDelay = DEFAULT_DELAY,
-    autosavePayload,
-    autosaveKey,
-    defaultChapterTitle,
-    defaultChapterBody
-  } = options;
-  const titleForRef = useRef14(defaultChapterTitle);
-  titleForRef.current = defaultChapterTitle;
-  const bodyForRef = useRef14(defaultChapterBody);
-  bodyForRef.current = defaultChapterBody;
+// src/useEpubProject.ts
+import {
+  EpubProject,
+  parseEpub as parseEpub2
+} from "@libraz/mejiro/epub";
+import { useCallback as useCallback9, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef15, useState as useState11 } from "react";
+function useEpubProject(options = {}) {
+  const defaultTitle = options.defaultChapterTitle;
+  const defaultBody = options.defaultChapterBody;
+  const [metadata, setMetadataState] = useState11(
+    () => initialMetadata(options.metadata)
+  );
   const [chapters, setChaptersState] = useState11(
-    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter([], defaultChapterTitle, defaultChapterBody)]
+    () => options.chapters?.length ? options.chapters : [defaultChapter([], defaultTitle, defaultBody)]
   );
-  const [selected, setSelectedState] = useState11(0);
-  const [autosaveError, setAutosaveError] = useState11(null);
-  const saveRef = useRef14(onAutosave);
-  saveRef.current = onAutosave;
-  const payloadRef = useRef14(autosavePayload);
-  payloadRef.current = autosavePayload;
-  const chaptersRef = useRef14(chapters);
+  const [selectedChapter, setSelectedChapterState] = useState11(0);
+  const [cover, setCoverState] = useState11(options.cover ?? null);
+  const [assets, setAssetsState] = useState11(options.assets ?? []);
+  const [previewBook, setPreviewBook] = useState11(null);
+  const [previewError, setPreviewError] = useState11(null);
+  const [previewing, setPreviewing] = useState11(false);
+  const previewRequest = useRequestToken();
+  const onPreviewRef = useRef15(options.onPreview);
+  const onExportRef = useRef15(options.onExport);
+  onPreviewRef.current = options.onPreview;
+  onExportRef.current = options.onExport;
+  const assetResolverRef = useRef15(options.assetResolver);
+  assetResolverRef.current = options.assetResolver;
+  const metadataRef = useRef15(metadata);
+  metadataRef.current = metadata;
+  const chaptersRef = useRef15(chapters);
   chaptersRef.current = chapters;
-  const selectedRef = useRef14(selected);
-  selectedRef.current = selected;
-  const trackerRef = useRef14(null);
-  if (!trackerRef.current)
-    trackerRef.current = createDraftChangeTracker(chapters, autosaveKey ?? "");
-  const dirtyRef = useRef14(false);
-  const mountedRef = useRef14(true);
-  const revisionRef = useRef14(0);
-  const inFlightRef = useRef14(false);
-  const flushQueuedRef = useRef14(false);
-  const flushAutosave = useCallback8(() => {
-    const callback = saveRef.current;
-    if (!(callback && dirtyRef.current)) return;
-    if (inFlightRef.current) {
-      flushQueuedRef.current = true;
-      return;
-    }
-    const revision = revisionRef.current;
-    const plain = snapshotChapters(chaptersRef.current);
-    const payload = payloadRef.current ? payloadRef.current(plain) : plain;
-    const markSaved = () => {
-      if (revisionRef.current === revision) dirtyRef.current = false;
-    };
-    let saved;
-    try {
-      saved = callback(payload);
-    } catch (err) {
-      saved = Promise.reject(err);
-    }
-    if (saved === void 0) {
-      markSaved();
-      return;
-    }
-    inFlightRef.current = true;
-    void Promise.resolve(saved).then(markSaved).catch((err) => {
-      if (!mountedRef.current) return;
-      setAutosaveError(toError(err));
-    }).finally(() => {
-      inFlightRef.current = false;
-      if (!flushQueuedRef.current) return;
-      flushQueuedRef.current = false;
-      flushAutosave();
+  const selectedRef = useRef15(selectedChapter);
+  selectedRef.current = selectedChapter;
+  const coverRef = useRef15(cover);
+  coverRef.current = cover;
+  const assetsRef = useRef15(assets);
+  assetsRef.current = assets;
+  const buildProject = useCallback9(() => {
+    const currentCover = coverRef.current;
+    const project = EpubProject.fromManuscript({
+      metadata: metadataRef.current,
+      includeTitlePage: false,
+      includeTitleInFirstChapter: true,
+      chapters: chaptersRef.current.map((chapter) => ({
+        id: chapter.id,
+        title: chapter.title || "Untitled",
+        body: chapter.body
+      })),
+      ...currentCover ? { cover: currentCover } : {}
     });
+    for (const asset of assetsRef.current) project.addAsset(asset);
+    return project;
   }, []);
-  useEffect10(() => {
-    if (trackerRef.current?.changed(chapters, autosaveKey ?? "")) {
+  const exportOptions = useCallback9((signal) => {
+    const resolver = assetResolverRef.current;
+    return { ...resolver ? { assetResolver: resolver } : {}, ...signal ? { signal } : {} };
+  }, []);
+  useEffect11(() => {
+    const token = previewRequest.begin();
+    const controller = new AbortController();
+    setPreviewing(true);
+    const timer = setTimeout(() => {
+      void (async () => {
+        try {
+          const book = await parseEpub2(
+            await buildProject().export(exportOptions(controller.signal))
+          );
+          if (!previewRequest.isCurrent(token)) return;
+          setPreviewBook(book);
+          setPreviewError(null);
+          onPreviewRef.current?.(book);
+        } catch (err) {
+          if (previewRequest.isCurrent(token)) setPreviewError(toError(err));
+        } finally {
+          if (previewRequest.isCurrent(token)) setPreviewing(false);
+        }
+      })();
+    }, options.debounceMs ?? 250);
+    return () => {
+      previewRequest.invalidate();
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [
+    assets,
+    buildProject,
+    chapters,
+    cover,
+    exportOptions,
+    metadata,
+    options.debounceMs,
+    previewRequest
+  ]);
+  const currentChapter = chapters[selectedChapter] ?? chapters[0] ?? null;
+  const setMetadata = useCallback9((patch) => {
+    const next = mergeMetadata(metadataRef.current, patch);
+    metadataRef.current = next;
+    setMetadataState(next);
+  }, []);
+  const commit = useCallback9((nextChapters, nextSelected) => {
+    chaptersRef.current = nextChapters;
+    selectedRef.current = nextSelected;
+    setChaptersState(nextChapters);
+    setSelectedChapterState(nextSelected);
+  }, []);
+  const setChapters = useCallback9(
+    (next) => {
+      const normalized = next.length ? next : [defaultChapter([], defaultTitle, defaultBody)];
+      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))
+      );
+    },
+    [commit, defaultBody, defaultTitle]
+  );
+  const setCover = useCallback9((asset) => {
+    coverRef.current = asset;
+    setCoverState(asset);
+  }, []);
+  const setAssets = useCallback9((next) => {
+    assetsRef.current = next;
+    setAssetsState(next);
+  }, []);
+  const setSelectedChapter = useCallback9((index) => {
+    const next = Math.max(0, Math.min(index, chaptersRef.current.length - 1));
+    selectedRef.current = next;
+    setSelectedChapterState(next);
+  }, []);
+  const patchChapter = useCallback9((index, patch) => {
+    const next = chaptersRef.current.map(
+      (chapter, chapterIndex) => chapterIndex === index ? { ...chapter, ...patch } : chapter
+    );
+    chaptersRef.current = next;
+    setChaptersState(next);
+  }, []);
+  const addChapter = useCallback9(
+    (chapter = {}) => {
+      const current = chaptersRef.current;
+      const generated = defaultChapter(current, defaultTitle, defaultBody);
+      const next = [
+        ...current,
+        {
+          id: chapter.id ?? generated.id,
+          title: chapter.title ?? generated.title,
+          body: chapter.body ?? generated.body
+        }
+      ];
+      commit(next, next.length - 1);
+    },
+    [commit, defaultBody, defaultTitle]
+  );
+  const removeChapter = useCallback9(
+    (index = selectedRef.current) => {
+      const current = chaptersRef.current;
+      if (current.length <= 1) return;
+      const next = current.filter((_, chapterIndex) => chapterIndex !== index);
+      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 = useCallback9(
+    (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);
+      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]
+  );
+  const exportEpub = useCallback9(async () => {
+    const buffer = await buildProject().export(exportOptions());
+    onExportRef.current?.(buffer);
+    return buffer;
+  }, [buildProject, exportOptions]);
+  return useMemo8(
+    () => ({
+      metadata,
+      chapters,
+      selectedChapter,
+      currentChapter,
+      cover,
+      assets,
+      previewBook,
+      previewError,
+      previewing,
+      setMetadata,
+      setChapters,
+      setSelectedChapter,
+      setCover,
+      setAssets,
+      patchChapter,
+      addChapter,
+      removeChapter,
+      reorderChapters,
+      buildProject,
+      exportEpub
+    }),
+    [
+      addChapter,
+      assets,
+      buildProject,
+      chapters,
+      cover,
+      currentChapter,
+      exportEpub,
+      metadata,
+      patchChapter,
+      previewBook,
+      previewError,
+      previewing,
+      reorderChapters,
+      removeChapter,
+      selectedChapter,
+      setAssets,
+      setChapters,
+      setCover,
+      setMetadata,
+      setSelectedChapter
+    ]
+  );
+}
+function mergeMetadata(current, patch) {
+  const next = { ...current, ...patch };
+  if (!next.identifier?.trim()) next.identifier = current.identifier;
+  return next;
+}
+function createPackageIdentifier() {
+  if (typeof globalThis.crypto?.randomUUID === "function") {
+    return `urn:uuid:${globalThis.crypto.randomUUID()}`;
+  }
+  const uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (ch) => {
+    const digit = Math.floor(Math.random() * 16);
+    return (ch === "x" ? digit : digit & 3 | 8).toString(16);
+  });
+  return `urn:uuid:${uuid}`;
+}
+function initialMetadata(patch = {}) {
+  const metadata = mergeDefined(
+    { title: "\u65B0\u3057\u3044\u4F5C\u54C1", language: "ja" },
+    patch
+  );
+  if (!metadata.identifier?.trim()) metadata.identifier = createPackageIdentifier();
+  return metadata;
+}
+function defaultChapter(existing, titleFor = (i) => i === 0 ? "\u7B2C\u4E00\u8A71" : `\u7B2C${i + 1}\u8A71`, bodyFor = (i) => i === 0 ? "\u3053\u308C\u306F\uFF5C\u6F22\u5B57\u300A\u304B\u3093\u3058\u300B\u306E\u30EB\u30D3\u4F8B\u3067\u3059\u3002\n\n\u672C\u6587\u3092\u3053\u3053\u306B\u8CBC\u308A\u4ED8\u3051\u307E\u3059\u3002" : "") {
+  const index = existing.length;
+  return { id: uniqueChapterId(existing), title: titleFor(index), body: bodyFor(index) };
+}
+
+// src/useManuscriptDraft.ts
+import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef16, useState as useState12 } from "react";
+var DEFAULT_DELAY = 800;
+function defaultChapter2(existing, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
+  const index = existing.length;
+  return { id: uniqueChapterId(existing), title: titleFor(index), body: bodyFor(index) };
+}
+function useManuscriptDraft(options = {}) {
+  const {
+    onAutosave,
+    autosaveDelay = DEFAULT_DELAY,
+    autosavePayload,
+    autosaveKey,
+    defaultChapterTitle,
+    defaultChapterBody
+  } = options;
+  const titleForRef = useRef16(defaultChapterTitle);
+  titleForRef.current = defaultChapterTitle;
+  const bodyForRef = useRef16(defaultChapterBody);
+  bodyForRef.current = defaultChapterBody;
+  const [chapters, setChaptersState] = useState12(
+    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter2([], defaultChapterTitle, defaultChapterBody)]
+  );
+  const [selected, setSelectedState] = useState12(0);
+  const [autosaveError, setAutosaveError] = useState12(null);
+  const saveRef = useRef16(onAutosave);
+  saveRef.current = onAutosave;
+  const payloadRef = useRef16(autosavePayload);
+  payloadRef.current = autosavePayload;
+  const chaptersRef = useRef16(chapters);
+  chaptersRef.current = chapters;
+  const selectedRef = useRef16(selected);
+  selectedRef.current = selected;
+  const trackerRef = useRef16(null);
+  if (!trackerRef.current)
+    trackerRef.current = createDraftChangeTracker(chapters, autosaveKey ?? "");
+  const dirtyRef = useRef16(false);
+  const mountedRef = useRef16(true);
+  const revisionRef = useRef16(0);
+  const inFlightRef = useRef16(false);
+  const flushQueuedRef = useRef16(false);
+  const flushAutosave = useCallback10(() => {
+    const callback = saveRef.current;
+    if (!(callback && dirtyRef.current)) return;
+    if (inFlightRef.current) {
+      flushQueuedRef.current = true;
+      return;
+    }
+    const revision = revisionRef.current;
+    const plain = snapshotChapters(chaptersRef.current);
+    const payload = payloadRef.current ? payloadRef.current(plain) : plain;
+    const markSaved = () => {
+      if (revisionRef.current === revision) dirtyRef.current = false;
+    };
+    let saved;
+    try {
+      saved = callback(payload);
+    } catch (err) {
+      saved = Promise.reject(err);
+    }
+    if (saved === void 0) {
+      markSaved();
+      return;
+    }
+    inFlightRef.current = true;
+    void Promise.resolve(saved).then(markSaved).catch((err) => {
+      if (!mountedRef.current) return;
+      setAutosaveError(toError(err));
+    }).finally(() => {
+      inFlightRef.current = false;
+      if (!flushQueuedRef.current) return;
+      flushQueuedRef.current = false;
+      flushAutosave();
+    });
+  }, []);
+  useEffect12(() => {
+    if (trackerRef.current?.changed(chapters, autosaveKey ?? "")) {
       dirtyRef.current = true;
       revisionRef.current += 1;
       setAutosaveError(null);
@@ -3249,7 +3684,7 @@ function useManuscriptDraft(options = {}) {
     }, autosaveDelay);
     return () => clearTimeout(timer);
   }, [chapters, autosaveKey, autosaveDelay, flushAutosave]);
-  useEffect10(() => {
+  useEffect12(() => {
     mountedRef.current = true;
     const detachPageHide = flushOnPageHide(flushAutosave);
     return () => {
@@ -3258,20 +3693,20 @@ function useManuscriptDraft(options = {}) {
       detachPageHide();
     };
   }, [flushAutosave]);
-  const commit = useCallback8((nextChapters, nextSelected) => {
+  const commit = useCallback10((nextChapters, nextSelected) => {
     chaptersRef.current = nextChapters;
     selectedRef.current = nextSelected;
     setChaptersState(nextChapters);
     setSelectedState(nextSelected);
   }, []);
-  const setSelected = useCallback8((index) => {
+  const setSelected = useCallback10((index) => {
     const next = Math.max(0, Math.min(index, chaptersRef.current.length - 1));
     selectedRef.current = next;
     setSelectedState(next);
   }, []);
-  const setChapters = useCallback8(
+  const setChapters = useCallback10(
     (next) => {
-      const normalized = next.length ? next : [defaultChapter([], titleForRef.current, bodyForRef.current)];
+      const normalized = next.length ? next : [defaultChapter2([], titleForRef.current, bodyForRef.current)];
       const prev = selectedRef.current;
       const selectedId = chaptersRef.current[prev]?.id;
       const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
@@ -3282,17 +3717,17 @@ function useManuscriptDraft(options = {}) {
     },
     [commit]
   );
-  const patchChapter = useCallback8((index, patch) => {
+  const patchChapter = useCallback10((index, patch) => {
     const next = chaptersRef.current.map(
       (chapter, i) => i === index ? { ...chapter, ...patch } : chapter
     );
     chaptersRef.current = next;
     setChaptersState(next);
   }, []);
-  const addChapter = useCallback8(
+  const addChapter = useCallback10(
     (chapter = {}) => {
       const current = chaptersRef.current;
-      const generated = defaultChapter(current, titleForRef.current, bodyForRef.current);
+      const generated = defaultChapter2(current, titleForRef.current, bodyForRef.current);
       const next = [
         ...current,
         {
@@ -3305,7 +3740,7 @@ function useManuscriptDraft(options = {}) {
     },
     [commit]
   );
-  const removeChapter = useCallback8(
+  const removeChapter = useCallback10(
     (index) => {
       const current = chaptersRef.current;
       if (current.length <= 1) return;
@@ -3319,7 +3754,7 @@ function useManuscriptDraft(options = {}) {
     },
     [commit]
   );
-  const reorderChapters = useCallback8(
+  const reorderChapters = useCallback10(
     (from, to) => {
       const current = chaptersRef.current;
       if (from < 0 || from >= current.length) return;
@@ -3372,7 +3807,7 @@ function coverAssetHref(file) {
   const filename = file.name.replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
   return `OPS/Images/${filename && !/^\.+$/u.test(filename) ? filename : `cover${coverExtension(file.type)}`}`;
 }
-function defaultChapter2(messages) {
+function defaultChapter3(messages) {
   return {
     id: `chapter-${Date.now()}-0`,
     title: format(messages.manuscriptDefaultChapterTitle, { n: 1 }),
@@ -3398,41 +3833,41 @@ function MejiroManuscriptEditor({
   panelSide = "right"
 }) {
   const messages = useI18n();
-  const coverInputRef = useRef15(null);
-  const bodyTextareaRef = useRef15(null);
+  const coverInputRef = useRef17(null);
+  const bodyTextareaRef = useRef17(null);
   const titleControlled = onTitleChange !== void 0;
   const authorControlled = onAuthorChange !== void 0;
   const coverControlled = onCoverChange !== void 0;
-  const [titleState, setTitleState] = useState12(titleProp ?? messages.manuscriptDefaultTitle);
-  const [authorState, setAuthorState] = useState12(authorProp ?? "");
-  const [coverState, setCoverState] = useState12(coverProp ?? null);
+  const [titleState, setTitleState] = useState13(titleProp ?? messages.manuscriptDefaultTitle);
+  const [authorState, setAuthorState] = useState13(authorProp ?? "");
+  const [coverState, setCoverState] = useState13(coverProp ?? null);
   const title = titleControlled ? titleProp ?? "" : titleState;
   const author = authorControlled ? authorProp ?? "" : authorState;
   const cover = coverControlled ? coverProp ?? null : coverState;
-  useEffect11(() => {
+  useEffect13(() => {
     if (!titleControlled && titleProp !== void 0) setTitleState(titleProp);
   }, [titleControlled, titleProp]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!authorControlled && authorProp !== void 0) setAuthorState(authorProp);
   }, [authorControlled, authorProp]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!coverControlled && coverProp !== void 0) setCoverState(coverProp);
   }, [coverControlled, coverProp]);
-  const setTitle = useCallback9(
+  const setTitle = useCallback11(
     (next) => {
       if (!titleControlled) setTitleState(next);
       onTitleChange?.(next);
     },
     [titleControlled, onTitleChange]
   );
-  const setAuthor = useCallback9(
+  const setAuthor = useCallback11(
     (next) => {
       if (!authorControlled) setAuthorState(next);
       onAuthorChange?.(next);
     },
     [authorControlled, onAuthorChange]
   );
-  const setCover = useCallback9(
+  const setCover = useCallback11(
     (next) => {
       if (!coverControlled) setCoverState(next);
       onCoverChange?.(next);
@@ -3440,7 +3875,7 @@ function MejiroManuscriptEditor({
     [coverControlled, onCoverChange]
   );
   const draft = useManuscriptDraft({
-    initialChapters: initialChapters?.length ? initialChapters : [defaultChapter2(messages)],
+    initialChapters: initialChapters?.length ? initialChapters : [defaultChapter3(messages)],
     onAutosave,
     autosavePayload: (savedChapters) => ({ title, author, cover, chapters: savedChapters }),
     autosaveKey: `${title}\0${author}\0${cover?.name ?? ""}\0${cover?.size ?? 0}\0${cover?.lastModified ?? 0}`,
@@ -3457,8 +3892,16 @@ function MejiroManuscriptEditor({
     reorderChapters
   } = draft;
   const current = chapters[selected] ?? chapters[0];
-  const [draggingIndex, setDraggingIndex] = useState12(null);
-  const [exportError, setExportError] = useState12(null);
+  const [draggingIndex, setDraggingIndex] = useState13(null);
+  const [exportError, setExportError] = useState13(null);
+  const reportError = useCallback11(
+    (error) => {
+      setExportError(error);
+      onError?.(error);
+    },
+    [onError]
+  );
+  const clearError = useCallback11(() => setExportError(null), []);
   function wrapSelection(open, close) {
     const el = bodyTextareaRef.current;
     if (!el) return;
@@ -3476,36 +3919,30 @@ function MejiroManuscriptEditor({
       bodyTextareaRef.current.setSelectionRange(start + open.length, caret);
     });
   }
-  const [identifier] = useState12(() => `urn:uuid:${crypto.randomUUID()}`);
-  const exportEpub = useCallback9(async () => {
-    await withErrorReporting(
-      async () => {
-        const project = EpubProject.fromManuscript({
-          metadata: { title, author: author || void 0, identifier },
-          dialect,
-          chapters: chapters.map((chapter) => ({
-            id: chapter.id,
-            title: chapter.title || messages.untitled,
-            body: chapter.body
-          }))
+  const [identifier] = useState13(createPackageIdentifier);
+  const exportEpub = useCallback11(async () => {
+    await withErrorReporting(async () => {
+      const project = EpubProject2.fromManuscript({
+        metadata: { title, author: author || void 0, identifier },
+        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()
         });
-        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 || "book"}.epub`);
-      },
-      (error) => {
-        setExportError(error);
-        onError?.(error);
       }
-    );
+      const buffer = await project.export(assetResolver ? { assetResolver } : void 0);
+      clearError();
+      onExport?.(buffer);
+      downloadEpub(buffer, `${title || "book"}.epub`);
+    }, reportError);
   }, [
     assetResolver,
     author,
@@ -3514,11 +3951,12 @@ function MejiroManuscriptEditor({
     dialect,
     identifier,
     messages.untitled,
-    onError,
     onExport,
+    clearError,
+    reportError,
     title
   ]);
-  const previewManuscript = useMemo8(
+  const previewManuscript = useMemo9(
     () => chapters.map((chapter) => ({
       id: chapter.id,
       title: chapter.title || messages.untitled,
@@ -3543,6 +3981,7 @@ function MejiroManuscriptEditor({
         fonts,
         chapter: selected,
         onChapterChange: setSelected,
+        onError: reportError,
         enableImageOverlay: false
       }
     ) }),
@@ -3566,7 +4005,11 @@ function MejiroManuscriptEditor({
             type: "file",
             accept: "image/*",
             hidden: true,
-            onChange: (event) => setCover(event.target.files?.[0] ?? null)
+            onChange: (event) => {
+              const file = event.target.files?.[0] ?? null;
+              event.target.value = "";
+              setCover(file);
+            }
           }
         )
       ] }),
@@ -3585,6 +4028,7 @@ function MejiroManuscriptEditor({
             onDragStart: (event) => {
               setDraggingIndex(index);
               event.dataTransfer.effectAllowed = "move";
+              event.dataTransfer.setData("text/plain", chapter.id);
             },
             onDragEnd: () => setDraggingIndex(null),
             onDragOver: (event) => {
@@ -3692,7 +4136,7 @@ function MejiroShelf({
 }
 
 // src/MejiroToc.tsx
-import { useMemo as useMemo9, useState as useState13 } from "react";
+import { useMemo as useMemo10, useState as useState14 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildEntries(epub, messages) {
   return epub.chapters.map((ch, i) => {
@@ -3715,9 +4159,9 @@ function MejiroToc({
   const messages = useI18n();
   const resolvedTitle = title ?? messages.tocTitle;
   const resolvedSearchPlaceholder = searchPlaceholder ?? messages.tocSearchPlaceholder;
-  const [query, setQuery] = useState13("");
-  const entries = useMemo9(() => buildEntries(epub, messages), [epub, messages]);
-  const filtered = useMemo9(() => {
+  const [query, setQuery] = useState14("");
+  const entries = useMemo10(() => buildEntries(epub, messages), [epub, messages]);
+  const filtered = useMemo10(() => {
     if (!query) return entries;
     const needle = query.toLowerCase();
     return entries.filter(
@@ -3767,34 +4211,41 @@ import {
   serializeAnnotations,
   sortAnnotations
 } from "@libraz/mejiro";
-import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef16, useState as useState14 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect14, useRef as useRef18, useState as useState15 } from "react";
 function parseSorted(raw) {
   return sortAnnotations(parseAnnotations(raw));
 }
 function useAnnotations(options) {
   const { key, throttleMs = 250 } = options;
   const storage = options.storage ?? resolveDefaultStorage();
-  const [annotations, setAnnotations] = useState14(
-    () => readStorage(storage, key, parseSorted, [])
-  );
-  const storageRef = useRef16(storage);
+  const storageRef = useRef18(storage);
   storageRef.current = storage;
-  const annotationsRef = useRef16(annotations);
-  const applyNext = useCallback10((next) => {
-    annotationsRef.current = next;
-    setAnnotations(next);
-  }, []);
-  const pendingRef = useRef16(null);
+  const [hydrated, setHydrated] = useState15(() => ({
+    key,
+    list: readStorage(storage, key, parseSorted, [])
+  }));
+  let annotations = hydrated.list;
+  const annotationsRef = useRef18(annotations);
+  if (hydrated.key !== key) {
+    annotations = readStorage(storage, key, parseSorted, []);
+    annotationsRef.current = annotations;
+    setHydrated({ key, list: annotations });
+  }
+  const applyNext = useCallback12(
+    (next) => {
+      annotationsRef.current = next;
+      setHydrated({ key, list: next });
+    },
+    [key]
+  );
+  const pendingRef = useRef18(null);
   if (!pendingRef.current) pendingRef.current = createPendingWrite();
   const pending = pendingRef.current;
-  useEffect12(() => flushOnPageHide(pending.flush), [pending]);
-  useEffect12(() => {
-    applyNext(readStorage(storageRef.current, key, parseSorted, []));
-    return pending.flush;
-  }, [key, applyNext, pending]);
-  const onChangeRef = useRef16(options.onChange);
+  useEffect14(() => flushOnPageHide(pending.flush), [pending]);
+  useEffect14(() => pending.flush, [key, pending]);
+  const onChangeRef = useRef18(options.onChange);
   onChangeRef.current = options.onChange;
-  const commit = useCallback10(
+  const commit = useCallback12(
     (next) => {
       const currentStorage = storageRef.current;
       if (currentStorage) {
@@ -3806,7 +4257,7 @@ function useAnnotations(options) {
     },
     [key, throttleMs, pending]
   );
-  const add = useCallback10(
+  const add = useCallback12(
     (input) => {
       const annotation = {
         ...input,
@@ -3820,7 +4271,7 @@ function useAnnotations(options) {
     },
     [commit, applyNext]
   );
-  const remove = useCallback10(
+  const remove = useCallback12(
     (id) => {
       const current = annotationsRef.current;
       const next = current.filter((annotation) => annotation.id !== id);
@@ -3830,7 +4281,7 @@ function useAnnotations(options) {
     },
     [commit, applyNext]
   );
-  const update = useCallback10(
+  const update = useCallback12(
     (id, patch) => {
       let changed = false;
       const next = annotationsRef.current.map((annotation) => {
@@ -3845,7 +4296,8 @@ function useAnnotations(options) {
     },
     [commit, applyNext]
   );
-  const clear = useCallback10(() => {
+  const clear = useCallback12(() => {
+    if (annotationsRef.current.length === 0) return;
     applyNext([]);
     pending.cancel();
     removeStorage(storageRef.current, key);
@@ -3860,39 +4312,40 @@ import {
   cloneEditableEpubBook as cloneEditableEpubBook2,
   EditableEpub as EditableEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo10, useRef as useRef17, useState as useState15 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect15, useMemo as useMemo11, useRef as useRef19, useState as useState16 } from "react";
 function useEditableEpub(options = {}) {
-  const [editor, setEditor] = useState15(null);
-  const [loading, setLoading] = useState15(false);
-  const [exporting, setExporting] = useState15(false);
-  const [error, setError] = useState15(null);
-  const [revision, setRevision] = useState15(0);
-  const [selection, setSelectionState] = useState15({
+  const [editor, setEditor] = useState16(null);
+  const [loading, setLoading] = useState16(false);
+  const [exporting, setExporting] = useState16(false);
+  const [error, setError] = useState16(null);
+  const [revision, setRevision] = useState16(0);
+  const [selection, setSelectionState] = useState16({
     chapter: 0,
     paragraph: 0
   });
-  const requestIdRef = useRef17(0);
-  const onLoadRef = useRef17(options.onLoad);
-  const onErrorRef = useRef17(options.onError);
-  const onExportRef = useRef17(options.onExport);
-  const limitsRef = useRef17(options.limits);
-  const assetResolverRef = useRef17(options.assetResolver);
+  const request = useRequestToken();
+  const exportsInFlightRef = useRef19(0);
+  const onLoadRef = useRef19(options.onLoad);
+  const onErrorRef = useRef19(options.onError);
+  const onExportRef = useRef19(options.onExport);
+  const limitsRef = useRef19(options.limits);
+  const assetResolverRef = useRef19(options.assetResolver);
   onLoadRef.current = options.onLoad;
   onErrorRef.current = options.onError;
   onExportRef.current = options.onExport;
   limitsRef.current = options.limits;
   assetResolverRef.current = options.assetResolver;
-  const editorRef = useRef17(editor);
+  const editorRef = useRef19(editor);
   editorRef.current = editor;
-  const selectionRef = useRef17(selection);
+  const selectionRef = useRef19(selection);
   selectionRef.current = selection;
-  const loadBufferWithRequest = useCallback11(
-    async (buffer, requestId) => {
+  const loadBufferWithRequest = useCallback13(
+    async (buffer, currentRequest) => {
       setLoading(true);
       setError(null);
       try {
         const next = await EditableEpub2.load(buffer, { limits: limitsRef.current });
-        if (requestId !== requestIdRef.current) return null;
+        if (!request.isCurrent(currentRequest)) return null;
         const firstParagraph = { chapter: 0, paragraph: 0 };
         editorRef.current = next;
         selectionRef.current = firstParagraph;
@@ -3902,34 +4355,37 @@ function useEditableEpub(options = {}) {
         onLoadRef.current?.(next);
         return next;
       } catch (err) {
-        if (requestId === requestIdRef.current) {
+        if (request.isCurrent(currentRequest)) {
           const nextError = toError(err);
           setError(nextError);
           onErrorRef.current?.(nextError);
         }
         return null;
       } finally {
-        if (requestId === requestIdRef.current) setLoading(false);
+        if (request.isCurrent(currentRequest)) setLoading(false);
       }
     },
-    []
+    [request]
   );
-  const loadBuffer = useCallback11(
+  const loadBuffer = useCallback13(
     async (buffer) => {
-      const requestId = ++requestIdRef.current;
-      return loadBufferWithRequest(buffer, requestId);
+      const currentRequest = request.begin();
+      return loadBufferWithRequest(buffer, currentRequest);
     },
-    [loadBufferWithRequest]
+    [loadBufferWithRequest, request]
   );
-  const loadFile = useCallback11(
+  const loadFile = useCallback13(
     async (file) => {
-      const requestId = ++requestIdRef.current;
+      const currentRequest = request.begin();
       setLoading(true);
       setError(null);
       try {
-        return await loadBufferWithRequest(await readEpubFile(file, limitsRef.current), requestId);
+        return await loadBufferWithRequest(
+          await readEpubFile(file, limitsRef.current),
+          currentRequest
+        );
       } catch (err) {
-        if (requestId === requestIdRef.current) {
+        if (request.isCurrent(currentRequest)) {
           const nextError = toError(err);
           setError(nextError);
           onErrorRef.current?.(nextError);
@@ -3938,17 +4394,17 @@ function useEditableEpub(options = {}) {
         return null;
       }
     },
-    [loadBufferWithRequest]
+    [loadBufferWithRequest, request]
   );
-  const loadUrl = useCallback11(
+  const loadUrl = useCallback13(
     async (url) => {
-      const requestId = ++requestIdRef.current;
+      const currentRequest = request.begin();
       setLoading(true);
       setError(null);
       try {
-        return await loadBufferWithRequest(await fetchEpubBuffer(url), requestId);
+        return await loadBufferWithRequest(await fetchEpubBuffer(url), currentRequest);
       } catch (err) {
-        if (requestId === requestIdRef.current) {
+        if (request.isCurrent(currentRequest)) {
           const nextError = toError(err);
           setError(nextError);
           onErrorRef.current?.(nextError);
@@ -3957,24 +4413,32 @@ function useEditableEpub(options = {}) {
         return null;
       }
     },
-    [loadBufferWithRequest]
+    [loadBufferWithRequest, request]
   );
-  useEffect13(() => {
-    if (options.defaultUrl) void loadUrl(options.defaultUrl);
-  }, [options.defaultUrl, loadUrl]);
+  const defaultUrl = options.defaultUrl;
+  useEffect15(() => {
+    if (!defaultUrl) return;
+    void loadUrl(defaultUrl);
+    const urlRequest = request.current();
+    return () => {
+      if (!request.isCurrent(urlRequest)) return;
+      request.invalidate();
+      setLoading(false);
+    };
+  }, [defaultUrl, loadUrl, request]);
   const book = editor?.book ?? null;
   const selectedParagraph = book?.chapters[selection.chapter]?.paragraphs[selection.paragraph] ?? null;
-  const previewBook = useMemo10(() => {
+  const previewBook = useMemo11(() => {
     void revision;
-    return book ? cloneEditableEpubBook2(book) : null;
-  }, [book, revision]);
+    return book && editor ? markBookIdentity(cloneEditableEpubBook2(book), editor) : null;
+  }, [book, editor, revision]);
   const history = editor?.history ?? null;
-  const setSelection = useCallback11((nextSelection) => {
+  const setSelection = useCallback13((nextSelection) => {
     const next = clampEditableEpubSelection(editorRef.current?.book ?? null, nextSelection);
     selectionRef.current = next;
     setSelectionState(next);
   }, []);
-  const updateParagraph = useCallback11(
+  const updateParagraph = useCallback13(
     (text, inlineAnnotations) => {
       const current = editorRef.current;
       if (!current) return;
@@ -3984,37 +4448,38 @@ function useEditableEpub(options = {}) {
     },
     []
   );
-  const setInlineAnnotations = useCallback11((inlineAnnotations) => {
+  const setInlineAnnotations = useCallback13((inlineAnnotations) => {
     const current = editorRef.current;
     if (!current) return;
     const { chapter, paragraph } = selectionRef.current;
     current.setInlineAnnotations(chapter, paragraph, inlineAnnotations);
     setRevision((value) => value + 1);
   }, []);
-  const addImage = useCallback11((image) => {
+  const addImage = useCallback13((image) => {
     const current = editorRef.current;
     if (!current) return;
     current.addImage(selectionRef.current.chapter, image);
     setRevision((value) => value + 1);
   }, []);
-  const undo = useCallback11(() => {
+  const undo = useCallback13(() => {
     const current = editorRef.current;
     if (!current) return false;
     const changed = current.undo();
     if (changed) setRevision((value) => value + 1);
     return changed;
   }, []);
-  const redo = useCallback11(() => {
+  const redo = useCallback13(() => {
     const current = editorRef.current;
     if (!current) return false;
     const changed = current.redo();
     if (changed) setRevision((value) => value + 1);
     return changed;
   }, []);
-  const exportEpub = useCallback11(
+  const exportEpub = useCallback13(
     async (exportOptions) => {
       const current = editorRef.current;
       if (!current) return null;
+      exportsInFlightRef.current++;
       setExporting(true);
       try {
         const buffer = await current.export(
@@ -4023,7 +4488,7 @@ function useEditableEpub(options = {}) {
         onExportRef.current?.(buffer);
         return buffer;
       } finally {
-        setExporting(false);
+        setExporting(--exportsInFlightRef.current > 0);
       }
     },
     []
@@ -4056,263 +4521,12 @@ function withAssetResolver(options, resolver) {
   return { ...options, assetResolver: resolver };
 }
 
-// src/useEpubProject.ts
-import {
-  EpubProject as EpubProject2,
-  parseEpub as parseEpub2
-} from "@libraz/mejiro/epub";
-import { useCallback as useCallback12, useEffect as useEffect14, useMemo as useMemo11, useRef as useRef18, useState as useState16 } from "react";
-function useEpubProject(options = {}) {
-  const defaultTitle = options.defaultChapterTitle;
-  const defaultBody = options.defaultChapterBody;
-  const [metadata, setMetadataState] = useState16(
-    () => initialMetadata(options.metadata)
-  );
-  const [chapters, setChaptersState] = useState16(
-    () => options.chapters?.length ? options.chapters : [defaultChapter3([], defaultTitle, defaultBody)]
-  );
-  const [selectedChapter, setSelectedChapterState] = useState16(0);
-  const [cover, setCoverState] = useState16(options.cover ?? null);
-  const [assets, setAssetsState] = useState16(options.assets ?? []);
-  const [previewBook, setPreviewBook] = useState16(null);
-  const [previewError, setPreviewError] = useState16(null);
-  const [previewing, setPreviewing] = useState16(false);
-  const previewRequestIdRef = useRef18(0);
-  const onPreviewRef = useRef18(options.onPreview);
-  const onExportRef = useRef18(options.onExport);
-  onPreviewRef.current = options.onPreview;
-  onExportRef.current = options.onExport;
-  const assetResolverRef = useRef18(options.assetResolver);
-  assetResolverRef.current = options.assetResolver;
-  const metadataRef = useRef18(metadata);
-  metadataRef.current = metadata;
-  const chaptersRef = useRef18(chapters);
-  chaptersRef.current = chapters;
-  const selectedRef = useRef18(selectedChapter);
-  selectedRef.current = selectedChapter;
-  const coverRef = useRef18(cover);
-  coverRef.current = cover;
-  const assetsRef = useRef18(assets);
-  assetsRef.current = assets;
-  const buildProject = useCallback12(() => {
-    const currentCover = coverRef.current;
-    const project = EpubProject2.fromManuscript({
-      metadata: metadataRef.current,
-      includeTitlePage: false,
-      includeTitleInFirstChapter: true,
-      chapters: chaptersRef.current.map((chapter) => ({
-        id: chapter.id,
-        title: chapter.title || "Untitled",
-        body: chapter.body
-      })),
-      ...currentCover ? { cover: currentCover } : {}
-    });
-    for (const asset of assetsRef.current) project.addAsset(asset);
-    return project;
-  }, []);
-  const exportOptions = useCallback12((signal) => {
-    const resolver = assetResolverRef.current;
-    return { ...resolver ? { assetResolver: resolver } : {}, ...signal ? { signal } : {} };
-  }, []);
-  useEffect14(() => {
-    const requestId = ++previewRequestIdRef.current;
-    const controller = new AbortController();
-    let cancelled = false;
-    setPreviewing(true);
-    const timer = setTimeout(() => {
-      void (async () => {
-        try {
-          const book = await parseEpub2(
-            await buildProject().export(exportOptions(controller.signal))
-          );
-          if (cancelled || requestId !== previewRequestIdRef.current) return;
-          setPreviewBook(book);
-          setPreviewError(null);
-          onPreviewRef.current?.(book);
-        } catch (err) {
-          if (!cancelled && requestId === previewRequestIdRef.current) {
-            setPreviewError(toError(err));
-          }
-        } finally {
-          if (!cancelled && requestId === previewRequestIdRef.current) setPreviewing(false);
-        }
-      })();
-    }, options.debounceMs ?? 250);
-    return () => {
-      cancelled = true;
-      previewRequestIdRef.current++;
-      clearTimeout(timer);
-      controller.abort();
-    };
-  }, [assets, buildProject, chapters, cover, exportOptions, metadata, options.debounceMs]);
-  const currentChapter = chapters[selectedChapter] ?? chapters[0] ?? null;
-  const setMetadata = useCallback12((patch) => {
-    const next = mergeMetadata(metadataRef.current, patch);
-    metadataRef.current = next;
-    setMetadataState(next);
-  }, []);
-  const commit = useCallback12((nextChapters, nextSelected) => {
-    chaptersRef.current = nextChapters;
-    selectedRef.current = nextSelected;
-    setChaptersState(nextChapters);
-    setSelectedChapterState(nextSelected);
-  }, []);
-  const setChapters = useCallback12(
-    (next) => {
-      const normalized = next.length ? next : [defaultChapter3([], defaultTitle, defaultBody)];
-      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))
-      );
-    },
-    [commit, defaultBody, defaultTitle]
-  );
-  const setCover = useCallback12((asset) => {
-    coverRef.current = asset;
-    setCoverState(asset);
-  }, []);
-  const setAssets = useCallback12((next) => {
-    assetsRef.current = next;
-    setAssetsState(next);
-  }, []);
-  const setSelectedChapter = useCallback12((index) => {
-    const next = Math.max(0, Math.min(index, chaptersRef.current.length - 1));
-    selectedRef.current = next;
-    setSelectedChapterState(next);
-  }, []);
-  const patchChapter = useCallback12((index, patch) => {
-    const next = chaptersRef.current.map(
-      (chapter, chapterIndex) => chapterIndex === index ? { ...chapter, ...patch } : chapter
-    );
-    chaptersRef.current = next;
-    setChaptersState(next);
-  }, []);
-  const addChapter = useCallback12(
-    (chapter = {}) => {
-      const current = chaptersRef.current;
-      const generated = defaultChapter3(current, defaultTitle, defaultBody);
-      const next = [
-        ...current,
-        {
-          id: chapter.id ?? generated.id,
-          title: chapter.title ?? generated.title,
-          body: chapter.body ?? generated.body
-        }
-      ];
-      commit(next, next.length - 1);
-    },
-    [commit, defaultBody, defaultTitle]
-  );
-  const removeChapter = useCallback12(
-    (index = selectedRef.current) => {
-      const current = chaptersRef.current;
-      if (current.length <= 1) return;
-      const next = current.filter((_, chapterIndex) => chapterIndex !== index);
-      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 = useCallback12(
-    (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);
-      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]
-  );
-  const exportEpub = useCallback12(async () => {
-    const buffer = await buildProject().export(exportOptions());
-    onExportRef.current?.(buffer);
-    return buffer;
-  }, [buildProject, exportOptions]);
-  return useMemo11(
-    () => ({
-      metadata,
-      chapters,
-      selectedChapter,
-      currentChapter,
-      cover,
-      assets,
-      previewBook,
-      previewError,
-      previewing,
-      setMetadata,
-      setChapters,
-      setSelectedChapter,
-      setCover,
-      setAssets,
-      patchChapter,
-      addChapter,
-      removeChapter,
-      reorderChapters,
-      buildProject,
-      exportEpub
-    }),
-    [
-      addChapter,
-      assets,
-      buildProject,
-      chapters,
-      cover,
-      currentChapter,
-      exportEpub,
-      metadata,
-      patchChapter,
-      previewBook,
-      previewError,
-      previewing,
-      reorderChapters,
-      removeChapter,
-      selectedChapter,
-      setAssets,
-      setChapters,
-      setCover,
-      setMetadata,
-      setSelectedChapter
-    ]
-  );
-}
-function mergeMetadata(current, patch) {
-  const next = { ...current, ...patch };
-  if (!next.identifier?.trim()) next.identifier = current.identifier;
-  return next;
-}
-function initialMetadata(patch = {}) {
-  const metadata = mergeDefined(
-    { title: "\u65B0\u3057\u3044\u4F5C\u54C1", language: "ja" },
-    patch
-  );
-  if (!metadata.identifier?.trim()) metadata.identifier = `urn:uuid:${crypto.randomUUID()}`;
-  return metadata;
-}
-function defaultChapter3(existing, titleFor = (i) => i === 0 ? "\u7B2C\u4E00\u8A71" : `\u7B2C${i + 1}\u8A71`, bodyFor = (i) => i === 0 ? "\u3053\u308C\u306F\uFF5C\u6F22\u5B57\u300A\u304B\u3093\u3058\u300B\u306E\u30EB\u30D3\u4F8B\u3067\u3059\u3002\n\n\u672C\u6587\u3092\u3053\u3053\u306B\u8CBC\u308A\u4ED8\u3051\u307E\u3059\u3002" : "") {
-  const index = existing.length;
-  return { id: uniqueChapterId(existing), title: titleFor(index), body: bodyFor(index) };
-}
-
 // src/useImageOverlay.ts
 import { createOverlayDragSession as createOverlayDragSession2, isPrimaryPointerPress as isPrimaryPointerPress3 } from "@libraz/mejiro/browser";
 import {
-  useCallback as useCallback13,
-  useEffect as useEffect15,
-  useRef as useRef19,
+  useCallback as useCallback14,
+  useEffect as useEffect16,
+  useRef as useRef20,
   useState as useState17
 } from "react";
 function useImageOverlay(layout, spreadIdx, onUpdate, options) {
@@ -4322,33 +4536,33 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defY = options?.defaultY ?? 100;
   const margin = options?.margin;
   const [imageRect, setImageRect] = useState17(null);
-  const rectRef = useRef19(imageRect);
+  const rectRef = useRef20(imageRect);
   rectRef.current = imageRect;
-  const layoutRef = useRef19(layout);
+  const layoutRef = useRef20(layout);
   layoutRef.current = layout;
-  const spreadRef = useRef19(spreadIdx);
+  const spreadRef = useRef20(spreadIdx);
   spreadRef.current = spreadIdx;
-  const onUpdateRef = useRef19(onUpdate);
+  const onUpdateRef = useRef20(onUpdate);
   onUpdateRef.current = onUpdate;
-  const marginRef = useRef19(margin);
+  const marginRef = useRef20(margin);
   marginRef.current = margin;
-  const activeDragCleanupsRef = useRef19(/* @__PURE__ */ new Set());
-  useEffect15(
+  const activeDragCleanupsRef = useRef20(/* @__PURE__ */ new Set());
+  useEffect16(
     () => () => {
       for (const cleanup of activeDragCleanupsRef.current) cleanup();
       activeDragCleanupsRef.current.clear();
     },
     []
   );
-  const syncToLayout = useCallback13((rect) => {
+  const syncToLayout = useCallback14((rect) => {
     const lo = layoutRef.current;
     if (!lo) return;
     const images = rect ? [{ x: rect.x, y: rect.y, w: rect.w, h: rect.h, margin: marginRef.current }] : void 0;
     const spread = lo.syncImages(spreadRef.current, images);
     onUpdateRef.current(spread);
   }, []);
-  const syncedRef = useRef19({ layout, spreadIdx, margin });
-  useEffect15(() => {
+  const syncedRef = useRef20({ layout, spreadIdx, margin });
+  useEffect16(() => {
     const prev = syncedRef.current;
     syncedRef.current = { layout, spreadIdx, margin };
     if (prev.layout === layout && prev.spreadIdx === spreadIdx && prev.margin === margin) return;
@@ -4358,7 +4572,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     }
     syncToLayout(rectRef.current);
   }, [layout, spreadIdx, margin, syncToLayout]);
-  const toggleImage = useCallback13(() => {
+  const toggleImage = useCallback14(() => {
     if (rectRef.current) {
       for (const cancel of [...activeDragCleanupsRef.current]) cancel();
       rectRef.current = null;
@@ -4371,7 +4585,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
       syncToLayout(r);
     }
   }, [defX, defY, defW, defH, syncToLayout]);
-  const applyRect = useCallback13(
+  const applyRect = useCallback14(
     (rect) => {
       if (rectRef.current === null) return;
       rectRef.current = rect;
@@ -4380,7 +4594,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     [syncToLayout]
   );
-  const onOverlayPointerDown = useCallback13(
+  const onOverlayPointerDown = useCallback14(
     (e) => {
       if (!isPrimaryPointerPress3(e)) return;
       e.preventDefault();
@@ -4402,7 +4616,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     [applyRect]
   );
-  const onResizePointerDown = useCallback13(
+  const onResizePointerDown = useCallback14(
     (e) => {
       if (!isPrimaryPointerPress3(e)) return;
       e.preventDefault();
@@ -4435,7 +4649,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
 }
 
 // src/useLibrary.ts
-import { useCallback as useCallback14, useEffect as useEffect16, useMemo as useMemo12, useState as useState18 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect17, useMemo as useMemo12, useState as useState18 } from "react";
 function resolveCurrentId(volumes, currentId, preferredId) {
   if (volumes.length === 0) return null;
   if (preferredId != null && volumes.some((v) => v.id === preferredId)) return preferredId;
@@ -4449,7 +4663,7 @@ function useLibrary(options) {
   );
   const [navigated, setNavigated] = useState18(false);
   const resolvedId = resolveCurrentId(volumes, currentId, navigated ? void 0 : initialVolumeId);
-  useEffect16(() => {
+  useEffect17(() => {
     if (resolvedId === currentId) return;
     setCurrentId(resolvedId);
     const volume = volumes.find((v) => v.id === resolvedId);
@@ -4463,7 +4677,7 @@ function useLibrary(options) {
     () => index >= 0 && index < volumes.length ? volumes[index] : null,
     [index, volumes]
   );
-  const activate = useCallback14(
+  const activate = useCallback15(
     (i) => {
       const v = volumes[i];
       if (!v) return;
@@ -4473,17 +4687,17 @@ function useLibrary(options) {
     },
     [volumes, onChange]
   );
-  const next = useCallback14(() => {
+  const next = useCallback15(() => {
     if (index < 0) return;
     const ni = Math.min(volumes.length - 1, index + 1);
     if (ni !== index) activate(ni);
   }, [index, activate, volumes.length]);
-  const prev = useCallback14(() => {
+  const prev = useCallback15(() => {
     if (index < 0) return;
     const ni = Math.max(0, index - 1);
     if (ni !== index) activate(ni);
   }, [index, activate]);
-  const goTo = useCallback14(
+  const goTo = useCallback15(
     (id) => {
       const ni = volumes.findIndex((v) => v.id === id);
       if (ni < 0) return;
@@ -4495,19 +4709,27 @@ function useLibrary(options) {
 }
 
 // src/useManuscriptLayout.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo13, useRef as useRef21 } from "react";
+function chapterSignature(chapter) {
+  return chapter ? JSON.stringify([chapter.id, chapter.title, chapter.body]) : null;
+}
 function useManuscriptLayout(book, chapter, surface, options = {}) {
   const dialect = options.dialect ?? "mejiro";
+  const signature = chapterSignature(chapter);
+  const chapterRef = useRef21(chapter);
+  chapterRef.current = chapter;
   const source = useMemo13(() => {
-    if (!chapter) return null;
+    if (signature === null) return null;
     return {
       measure: (el) => book.computePageSize(el),
       layout: async () => {
-        const layouts = await book.layoutManuscript({ chapters: [chapter], dialect });
+        const current = chapterRef.current;
+        if (!current) return null;
+        const layouts = await book.layoutManuscript({ chapters: [current], dialect });
         return layouts.values().next().value ?? null;
       }
     };
-  }, [book, chapter, dialect]);
+  }, [book, signature, dialect]);
   return useSurfaceLayout(source, surface, {
     ...options,
     enableResize: options.enableResize ?? true,
@@ -4520,28 +4742,30 @@ import {
   parseReadingPosition,
   serializeReadingPosition
 } from "@libraz/mejiro";
-import { useCallback as useCallback15, useEffect as useEffect17, useRef as useRef20, useState as useState19 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect18, useRef as useRef22, useState as useState19 } from "react";
 function useReadingPosition(options) {
   const { key, throttleMs = 250 } = options;
   const storage = options.storage ?? resolveDefaultStorage();
-  const [position, setPosition] = useState19(
-    () => readStorage(storage, key, parseReadingPosition, null)
-  );
-  const storageRef = useRef20(storage);
+  const storageRef = useRef22(storage);
   storageRef.current = storage;
-  const pendingRef = useRef20(null);
+  const [hydrated, setHydrated] = useState19(
+    () => ({ key, value: readStorage(storage, key, parseReadingPosition, null) })
+  );
+  let position = hydrated.value;
+  if (hydrated.key !== key) {
+    position = readStorage(storage, key, parseReadingPosition, null);
+    setHydrated({ key, value: position });
+  }
+  const pendingRef = useRef22(null);
   if (!pendingRef.current) pendingRef.current = createPendingWrite();
   const pending = pendingRef.current;
-  useEffect17(() => flushOnPageHide(pending.flush), [pending]);
-  useEffect17(() => {
-    setPosition(readStorage(storageRef.current, key, parseReadingPosition, null));
-    return pending.flush;
-  }, [key, pending]);
-  const onChangeRef = useRef20(options.onChange);
+  useEffect18(() => flushOnPageHide(pending.flush), [pending]);
+  useEffect18(() => pending.flush, [key, pending]);
+  const onChangeRef = useRef22(options.onChange);
   onChangeRef.current = options.onChange;
-  const save = useCallback15(
+  const save = useCallback16(
     (next) => {
-      setPosition(next);
+      setHydrated({ key, value: next });
       const currentStorage = storageRef.current;
       if (currentStorage) {
         pending.schedule(() => {
@@ -4552,8 +4776,8 @@ function useReadingPosition(options) {
     },
     [key, throttleMs, pending]
   );
-  const clear = useCallback15(() => {
-    setPosition(null);
+  const clear = useCallback16(() => {
+    setHydrated({ key, value: null });
     pending.cancel();
     removeStorage(storageRef.current, key);
     onChangeRef.current?.(null);