@libraz/mejiro-react 0.9.1 → 0.10.0

package/dist/index.js

@@ -60,27 +60,29 @@ function MejiroChapterNav({
       /* @__PURE__ */ jsx2("ol", { className: "mejiro-reader-chapter-list", children: epub.chapters.map((ch, i) => {
         const title = ch.title ?? format(messages.chapterN, { n: i + 1 });
         const preview = ch.paragraphs.find((p) => !p.headingLevel && p.text.trim())?.text;
-        const chapterKey = `${title}-${ch.paragraphs.map((p) => p.text).join("|").slice(0, 120)}`;
         const headings = ch.paragraphs.flatMap(
           (p, paragraph) => p.headingLevel && p.text.trim() && p.text.trim() !== title ? [{ paragraph, text: p.text }] : []
         ).slice(0, 3);
-        return /* @__PURE__ */ jsx2("li", { className: "mejiro-reader-chapter-list-item", children: /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: `mejiro-reader-chapter-card${i === chapter ? " is-active" : ""}`,
-            "aria-current": i === chapter ? "true" : void 0,
-            onClick: () => onChange(i),
-            children: [
-              /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-number", children: String(i + 1).padStart(2, "0") }),
-              /* @__PURE__ */ jsxs("span", { className: "mejiro-reader-chapter-main", children: [
-                /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-title", children: title }),
-                preview && /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-preview", children: textPreview(preview) }),
-                headings.length > 0 && /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-subheads", children: headings.map((heading) => /* @__PURE__ */ jsx2("span", { children: textPreview(heading.text, 30) }, heading.paragraph)) })
-              ] })
-            ]
-          }
-        ) }, chapterKey);
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: chapter titles and text are not guaranteed unique
+          /* @__PURE__ */ jsx2("li", { className: "mejiro-reader-chapter-list-item", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: `mejiro-reader-chapter-card${i === chapter ? " is-active" : ""}`,
+              "aria-current": i === chapter ? "true" : void 0,
+              onClick: () => onChange(i),
+              children: [
+                /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-number", children: String(i + 1).padStart(2, "0") }),
+                /* @__PURE__ */ jsxs("span", { className: "mejiro-reader-chapter-main", children: [
+                  /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-title", children: title }),
+                  preview && /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-preview", children: textPreview(preview) }),
+                  headings.length > 0 && /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-subheads", children: headings.map((heading) => /* @__PURE__ */ jsx2("span", { children: textPreview(heading.text, 30) }, heading.paragraph)) })
+                ] })
+              ]
+            }
+          ) }, i)
+        );
       }) })
     ] });
   }
@@ -158,6 +160,7 @@ function MejiroDropZone({
             hidden: true,
             onChange: (e) => {
               const file = e.target.files?.[0];
+              e.target.value = "";
               if (file && isValid(file)) onFile(file);
             }
           }
@@ -173,7 +176,29 @@ import {
   EditableEpub,
   exportEditableEpub
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef11, 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";
@@ -202,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 useMemo4,
-  useRef as useRef10,
+  useMemo as useMemo5,
+  useRef as useRef12,
   useState as useState8
 } from "react";
 
@@ -225,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,
@@ -324,10 +353,7 @@ function paragraphScaleStyle(scale) {
 function MejiroPage({ page, className, style }) {
   const rootClass = className ? `mejiro-page ${className}` : "mejiro-page";
   return /* @__PURE__ */ jsx6("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
-    const paraClass = paragraphClassName(
-      paragraph.kind ?? (paragraph.isHeading ? "heading" : void 0),
-      paragraph.headingLevel
-    );
+    const paraClass = paragraphClassName(paragraph.kind, paragraph.headingLevel);
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: paragraphs have no stable ID
       /* @__PURE__ */ jsx6("div", { className: paraClass, style: paragraphScaleStyle(paragraph.scale), children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
@@ -468,6 +494,8 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
   spreadIdxRef.current = spreadIdx;
   const onUpdateRef = useRef2(options.onUpdate);
   onUpdateRef.current = options.onUpdate;
+  const marginRef = useRef2(margin);
+  marginRef.current = margin;
   const activeDragCleanupsRef = useRef2(/* @__PURE__ */ new Set());
   useEffect(
     () => () => {
@@ -476,15 +504,12 @@ function useMultiImageOverlay(layout, spreadIdx, options = {}) {
     },
     []
   );
-  const syncSpreads = useCallback(
-    (spreads) => {
-      const lo = layoutRef.current;
-      if (!lo) return;
-      applyImages(lo, imagesRef.current, spreads, margin);
-      for (const si of spreads) onUpdateRef.current?.(lo.getSpread(si));
-    },
-    [margin]
-  );
+  const syncSpreads = useCallback((spreads) => {
+    const lo = layoutRef.current;
+    if (!lo) return;
+    applyImages(lo, imagesRef.current, spreads, marginRef.current);
+    for (const si of spreads) onUpdateRef.current?.(lo.getSpread(si));
+  }, []);
   const appliedRef = useRef2({
     layout: null,
     margin
@@ -649,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,
@@ -664,6 +754,7 @@ function MejiroScrollView({
   selectionRects,
   spreadIdx,
   images = NO_IMAGES,
+  pageNumbers = "both",
   onImagePointerDown,
   onImageResizePointerDown,
   onImageClose
@@ -698,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;
@@ -759,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
       ))
@@ -829,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" },
@@ -898,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",
           {
@@ -927,7 +1006,7 @@ function MejiroSettingsPanel({
         /* @__PURE__ */ jsx10(
           CommittedNumberInput,
           {
-            id: "mejiro-reader-font-size",
+            id: `${uid}-font-size`,
             value: settings.fontSize,
             min: minFontSize,
             max: maxFontSize,
@@ -956,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: [
@@ -971,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: [
@@ -986,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,
@@ -1061,11 +1140,13 @@ function MejiroSpread({
   const selectionRef = useRef5(null);
   const selectionEnabled = anchorAtCoord != null && onSelectionChange != null;
   const gestureRef = useRef5(null);
+  const swipedRef = useRef5(false);
   const gestureEnabled = onSwipe != null || onSurfaceTap != null;
   const SWIPE_THRESHOLD = 40;
   const TAP_MOVE_THRESHOLD = 8;
   function handleGesturePointerDown(e) {
     if (!gestureEnabled) return;
+    swipedRef.current = false;
     if (!isPrimaryPointerPress2(e)) return;
     if (e.target?.closest(OVERLAY_SELECTOR)) return;
     gestureRef.current = { x: e.clientX, y: e.clientY, t: Date.now() };
@@ -1080,6 +1161,7 @@ function MejiroSpread({
     const ax = Math.abs(dx);
     const ay = Math.abs(dy);
     if (ax >= SWIPE_THRESHOLD && ax >= ay * 1.4) {
+      swipedRef.current = true;
       onSwipe?.(dx < 0 ? "next" : "prev");
       return;
     }
@@ -1089,6 +1171,12 @@ function MejiroSpread({
       onSurfaceTap?.();
     }
   }
+  function suppressSwipeClick(e) {
+    if (!swipedRef.current) return;
+    swipedRef.current = false;
+    e.preventDefault();
+    e.stopPropagation();
+  }
   function resolvePointer(e) {
     if (!anchorAtCoord) return null;
     const content = contentAtPoint(e.currentTarget, e.clientX, e.clientY);
@@ -1207,6 +1295,7 @@ function MejiroSpread({
       onPointerUp: useCombined ? combinedPointerUp : void 0,
       onPointerCancel: useCombined ? combinedPointerCancel : void 0,
       onLostPointerCapture: selectionEnabled ? endSelection : void 0,
+      onClickCapture: gestureEnabled ? suppressSwipeClick : void 0,
       children: [
         renderPage(singlePage ? singleSide : "right"),
         !singlePage && renderPage("left"),
@@ -1366,34 +1455,64 @@ function createDraftChangeTracker(chapters, key) {
 }
 
 // src/useChapterLayout.ts
+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";
-function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
-  const enableResize = options.enableResize ?? true;
-  const resizeDebounce = options.resizeDebounce ?? 120;
+
+// 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);
   const [pageWidth, setPageWidth] = useState4(0);
   const [pageHeight, setPageHeight] = useState4(0);
   const [contentHeight, setContentHeight] = useState4(0);
   const [elapsedMs, setElapsedMs] = useState4(0);
-  const layoutRef = useRef6(null);
-  const requestIdRef = useRef6(0);
-  const pendingRestore = useRef6(null);
+  const [element, setElement] = useState4(surface.current);
+  useLayoutEffect2(() => {
+    if (surface.current !== element) setElement(surface.current);
+  });
+  const layoutRef = useRef7(null);
   layoutRef.current = layout;
-  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 chapter = epub?.chapters[chapterIndex];
-      if (!(chapter && surface.current)) {
+      const requestId = requests.begin();
+      const el = element;
+      if (!(source && el)) {
+        measuredBoxRef.current = null;
         setLayout(null);
         setPageWidth(0);
         setPageHeight(0);
@@ -1401,24 +1520,38 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
         setElapsedMs(0);
         return;
       }
-      const captured = !blank && layoutRef.current ? o.capturePosition?.(layoutRef.current) ?? null : null;
-      pendingRestore.current = captured;
-      if (blank) setLayout(null);
-      const dims = book.computePageSize(surface.current, o.pageGeometry?.());
-      setPageWidth(dims.pageWidth);
-      setPageHeight(dims.pageHeight);
-      setContentHeight(dims.contentHeight);
-      const t0 = performance.now();
-      const l = await book.layoutChapter(chapter);
-      if (requestId !== requestIdRef.current) return;
-      layoutRef.current = l;
-      setLayout(l);
-      setElapsedMs(performance.now() - t0);
+      try {
+        const captured = !blank && layoutRef.current ? o.capturePosition?.(layoutRef.current) ?? null : null;
+        pendingRestore.current = captured;
+        if (blank) setLayout(null);
+        measuredBoxRef.current = { width: el.clientWidth, height: el.clientHeight };
+        const dims = source.measure(el);
+        setPageWidth(dims.pageWidth);
+        setPageHeight(dims.pageHeight);
+        setContentHeight(dims.contentHeight);
+        const t0 = performance.now();
+        const next = await source.layout();
+        if (!requests.isCurrent(requestId)) return;
+        layoutRef.current = next;
+        setLayout(next);
+        setElapsedMs(performance.now() - t0);
+      } catch (err) {
+        if (!requests.isCurrent(requestId)) return;
+        const handler = optionsRef.current.onError;
+        if (!handler) throw err;
+        handler(toError(err));
+      }
     },
-    [book, epub, chapterIndex, surface]
+    [source, element, requests]
   );
+  const recomputeRef = useRef7(recompute);
+  recomputeRef.current = recompute;
+  const trigger = useCallback3((opts) => {
+    recomputeRef.current(opts).catch(() => {
+    });
+  }, []);
   useLayoutEffect2(() => {
-    requestIdRef.current++;
+    requests.invalidate();
     pendingRestore.current = null;
     setLayout(null);
     setPageWidth(0);
@@ -1426,12 +1559,13 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
     setContentHeight(0);
     setElapsedMs(0);
   }, [recompute]);
-  useEffect4(() => {
-    void recompute();
+  useEffect5(() => {
+    recompute().catch(() => {
+    });
     return () => {
-      requestIdRef.current++;
+      requests.invalidate();
     };
-  }, [recompute]);
+  }, [recompute, requests]);
   useLayoutEffect2(() => {
     const anchor = pendingRestore.current;
     const restore = optionsRef.current.restorePosition;
@@ -1439,9 +1573,9 @@ function useChapterLayout(book, epub, chapterIndex, 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;
@@ -1454,18 +1588,23 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
     const scheduleReflow = (immediate) => {
       clear();
       if (immediate) {
-        void recompute({ blank: false });
+        trigger({ blank: false });
         return;
       }
       timer = setTimeout(() => {
         timer = null;
-        void recompute({ blank: false });
+        trigger({ blank: false });
       }, resizeDebounce);
     };
     if (typeof ResizeObserver !== "undefined") {
       const observer = new ResizeObserver(() => {
         const immediate = !observed;
         observed = true;
+        const box = measuredBoxRef.current;
+        if (box && box.width === el.clientWidth && box.height === el.clientHeight) {
+          clear();
+          return;
+        }
         scheduleReflow(immediate);
       });
       observer.observe(el);
@@ -1480,103 +1619,136 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
       window.removeEventListener("resize", onWindowResize);
       clear();
     };
-  }, [surface, enableResize, resizeDebounce, recompute]);
-  return {
-    layout,
-    pageWidth,
-    pageHeight,
-    contentHeight,
-    elapsedMs,
-    recompute,
-    pendingRestore
-  };
+  }, [element, enableResize, resizeDebounce, trigger]);
+  return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute, pendingRestore };
+}
+
+// src/useChapterLayout.ts
+function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
+  const optionsRef = useRef8(options);
+  optionsRef.current = options;
+  const source = useMemo4(() => {
+    const chapter = epub?.chapters[chapterIndex];
+    if (!chapter) return null;
+    return {
+      measure: (el) => book.computePageSize(el, optionsRef.current.pageGeometry?.()),
+      layout: () => book.layoutChapter(chapter)
+    };
+  }, [book, epub, chapterIndex]);
+  return useSurfaceLayout(source, surface, {
+    ...options,
+    enableResize: options.enableResize ?? true,
+    resizeDebounce: options.resizeDebounce ?? 120
+  });
 }
 
 // src/useEpub.ts
 import { parseEpub } from "@libraz/mejiro/epub";
-import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef7, 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 = useRef7(0);
-  const onLoadRef = useRef7(options.onLoad);
+  const requests = useRequestToken();
+  const onLoadRef = useRef9(options.onLoad);
   onLoadRef.current = options.onLoad;
-  const onErrorRef = useRef7(options.onError);
+  const onErrorRef = useRef9(options.onError);
   onErrorRef.current = options.onError;
-  const fetchOptionsRef = useRef7(options.fetchOptions);
+  const fetchOptionsRef = useRef9(options.fetchOptions);
   fetchOptionsRef.current = options.fetchOptions;
-  const fetchEpubRef = useRef7(options.fetchEpub);
+  const fetchEpubRef = useRef9(options.fetchEpub);
   fetchEpubRef.current = options.fetchEpub;
-  const limitsRef = useRef7(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(() => {
-    if (defaultUrl) void loadUrl(defaultUrl);
-  }, [defaultUrl, loadUrl]);
-  const replaceEpub = useCallback3((book) => {
-    requestIdRef.current++;
-    setLoading(false);
-    setError(null);
-    setEpub(book);
-  }, []);
+  useEffect6(() => {
+    if (!defaultUrl) return;
+    void loadUrl(defaultUrl);
+    const requestId = requests.current();
+    return () => {
+      if (requests.current() !== requestId) return;
+      requests.invalidate();
+      setLoading(false);
+    };
+  }, [defaultUrl, loadUrl, requests]);
+  const replaceEpub = useCallback4(
+    (book) => {
+      requests.invalidate();
+      setLoading(false);
+      setError(null);
+      setEpub(book);
+    },
+    [requests]
+  );
   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 useRef8, 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 = useRef8(null);
+  const bookRef = useRef10(null);
   if (!bookRef.current) bookRef.current = new MejiroBook(initial);
   const [snapshot, setLocal] = useState6(initial);
-  const optionsRef = useRef8(options);
+  const optionsRef = useRef10(options);
   optionsRef.current = options;
-  const pendingRef = useRef8(null);
-  const flush = useCallback4(() => {
+  const pendingRef = useRef10(null);
+  const flushGenerationRef = useRef10(0);
+  const flush = useCallback5(() => {
     const pending = pendingRef.current;
     if (!pending) return;
     pendingRef.current = null;
     if (pending.timer) clearTimeout(pending.timer);
     const { waiters } = pending;
+    const generation = ++flushGenerationRef.current;
     const applied = bookRef.current?.setOptions(pending.patch) ?? Promise.resolve();
+    const syncSnapshot = () => {
+      const book = bookRef.current;
+      if (!book || generation !== flushGenerationRef.current) return;
+      setLocal((prev) => ({ ...prev, ...book.getOptions(), ...pendingRef.current?.patch }));
+    };
     void applied.then(
       () => {
+        syncSnapshot();
         for (const waiter of waiters) waiter.resolve();
       },
       (err) => {
+        syncSnapshot();
         const error = toError(err);
         const handler = optionsRef.current.onError;
         if (handler) {
@@ -1588,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: [] };
@@ -1612,7 +1784,7 @@ function useMejiroBook(initial, options = {}) {
     },
     [flush]
   );
-  useEffect6(
+  useEffect7(
     () => () => {
       bookRef.current?.dispose();
       const pending = pendingRef.current;
@@ -1627,7 +1799,7 @@ function useMejiroBook(initial, options = {}) {
 }
 
 // src/useSpread.ts
-import { useCallback as useCallback5, useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef9, 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;
@@ -1657,7 +1829,7 @@ function useSpread(layout, options = {}) {
   const enableKeyboard = options.enableKeyboard ?? true;
   const turnDuration = options.turnDuration ?? 180;
   const single = options.single ?? false;
-  const onChangeRef = useRef9(options.onChange);
+  const onChangeRef = useRef11(options.onChange);
   onChangeRef.current = options.onChange;
   const [spreadIdx, setSpreadIdx] = useState7(0);
   const [indexSingle, setIndexSingle] = useState7(single);
@@ -1667,21 +1839,22 @@ function useSpread(layout, options = {}) {
   }
   const [spread, setSpread] = useState7(null);
   const [turning, setTurning] = useState7(false);
-  const layoutRef = useRef9(null);
+  const layoutRef = useRef11(null);
   layoutRef.current = layout;
-  const spreadIdxRef = useRef9(0);
+  const spreadIdxRef = useRef11(0);
   spreadIdxRef.current = spreadIdx;
-  const singleRef = useRef9(single);
+  const singleRef = useRef11(single);
   singleRef.current = single;
-  const turnTimerRef = useRef9(null);
-  const layoutGenerationRef = useRef9(0);
-  const lastEmittedRef = useRef9(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;
@@ -1695,6 +1868,7 @@ function useSpread(layout, options = {}) {
       clearTimeout(turnTimerRef.current);
       turnTimerRef.current = null;
     }
+    turnTargetRef.current = null;
     setTurning(false);
     setSpreadIdx(0);
     if (!layout) {
@@ -1703,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;
@@ -1716,50 +1890,67 @@ function useSpread(layout, options = {}) {
     }
     lastEmittedRef.current = { layout, spreadIdx };
   }, [layout, spreadIdx, layoutSpreadIdx]);
-  const goTo = useCallback5(
+  const navigationTarget = useCallback6(() => {
+    const pending = turnTargetRef.current;
+    if (!pending) return spreadIdxRef.current;
+    return indexOfPageIn(firstPageOf(pending.index, pending.single), singleRef.current);
+  }, []);
+  const goTo = useCallback6(
     (index) => {
       if (!layoutRef.current) return;
       const targetSingle = singleRef.current;
       const max = navigationCount(layoutRef.current.totalPages, targetSingle) - 1;
       const target = Math.max(0, Math.min(max, index));
+      if (turnTimerRef.current) {
+        if (target === navigationTarget()) return;
+        clearTimeout(turnTimerRef.current);
+        turnTimerRef.current = null;
+        const landed = navigationTarget();
+        turnTargetRef.current = null;
+        spreadIdxRef.current = landed;
+        setSpreadIdx(landed);
+        setTurning(false);
+      }
       if (target === spreadIdxRef.current) return;
       if (turnDuration > 0) {
         const generation = layoutGenerationRef.current;
-        if (turnTimerRef.current) clearTimeout(turnTimerRef.current);
+        turnTargetRef.current = { index: target, single: targetSingle };
         setTurning(true);
         turnTimerRef.current = setTimeout(() => {
           if (generation !== layoutGenerationRef.current) return;
-          setSpreadIdx(indexOfPageIn(firstPageOf(target, targetSingle), singleRef.current));
+          setSpreadIdx(navigationTarget());
           setTurning(false);
+          turnTargetRef.current = null;
           turnTimerRef.current = null;
         }, turnDuration);
       } else {
         setSpreadIdx(target);
       }
     },
-    [turnDuration]
+    [turnDuration, navigationTarget]
   );
-  const setSpreadIndex = useCallback5((index) => {
+  const setSpreadIndex = useCallback6((index) => {
     if (!layoutRef.current) return;
     if (turnTimerRef.current) {
       clearTimeout(turnTimerRef.current);
       turnTimerRef.current = null;
     }
+    turnTargetRef.current = null;
     setTurning(false);
     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(spreadIdxRef.current + 1), [goTo]);
-  const prev = useCallback5(() => goTo(spreadIdxRef.current - 1), [goTo]);
-  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;
@@ -1770,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);
     },
@@ -1823,10 +2014,16 @@ function scrollTargetPage(spread, userPage) {
   return userPage != null && spread.indexOfPage(userPage) === spread.spreadIdx ? userPage : spread.firstPage;
 }
 function createLifecycleTracker(sink) {
+  let lastBook = null;
   let last = null;
   let dwell = null;
-  return (chapter, spreadIdx, view, controlledSpreadIdx) => {
+  return (book, chapter, spreadIdx, view, controlledSpreadIdx) => {
     if (!view) return;
+    if (book !== lastBook) {
+      lastBook = book;
+      last = null;
+      dwell = null;
+    }
     const totalSpreads = view.total;
     if (controlledSpreadIdx != null) {
       const target = Math.max(0, Math.min(totalSpreads - 1, controlledSpreadIdx));
@@ -1844,6 +2041,56 @@ function createLifecycleTracker(sink) {
     if (spreadIdx === totalSpreads - 1) sink.chapterFinished(chapter);
   };
 }
+function clampChapter(index, book) {
+  if (!book) return index;
+  return Math.max(0, Math.min(book.chapters.length - 1, index));
+}
+function createAnchorResolver(nav) {
+  let pending = null;
+  const settle = () => {
+    const settled = pending;
+    pending = null;
+    settled?.resolve();
+  };
+  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();
+      return;
+    }
+    if (anchor.chapter !== target.chapter) {
+      if (current.chapterRequested) return;
+      current.chapterRequested = true;
+      nav.goToChapter(anchor.chapter);
+      return;
+    }
+    if (!target.layout) return;
+    const loc = target.layout.locateAnchor({
+      paragraph: anchor.paragraph,
+      charIndex: anchor.charIndex
+    });
+    if (loc && nav.goToPage(loc.pageIdx)) {
+      current.moved = true;
+      return;
+    }
+    settle();
+  };
+  return {
+    request: (anchor, target) => new Promise((resolve) => {
+      settle();
+      pending = { anchor, resolve, chapterRequested: false, moved: false };
+      update(target);
+    }),
+    update,
+    dispose: settle
+  };
+}
 function MejiroReaderInner(props, ref) {
   const manuscriptProp = "manuscript" in props ? props.manuscript : void 0;
   const dialectProp = "dialect" in props ? props.dialect : void 0;
@@ -1890,18 +2137,17 @@ function MejiroReaderInner(props, ref) {
     onPageRead,
     onChapterCompleted
   } = props;
-  const surfaceRef = useRef10(null);
-  const fileRef = useRef10(null);
+  const surfaceRef = useRef12(null);
+  const fileRef = useRef12(null);
   const [settingsOpen, setSettingsOpen] = useState8(false);
   const [chapterState, setChapterState] = useState8(chapterProp ?? 0);
   const chapterIsUncontrolled = chapterProp == null;
-  const chapter = chapterProp ?? chapterState;
   const [chromeHidden, setChromeHidden] = useState8(false);
   const [userScroll, setUserScroll] = useState8(
     null
   );
   const [autoSingle, setAutoSingle] = useState8(false);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!settingsOpen) return;
     const onKey = (e2) => {
       if (e2.key === "Escape") setSettingsOpen(false);
@@ -1909,22 +2155,25 @@ 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 = useMemo4(() => {
+  const resolvedGeometry = useMemo5(() => {
     const columns = effectiveSingle ? 1 : 2;
     const geometry = pageGeometryProp ?? {};
     if (fit !== "width") return mergeDefined({ columns }, geometry);
@@ -1940,37 +2189,46 @@ function MejiroReaderInner(props, ref) {
       geometry
     );
   }, [fit, pageGeometryProp, effectiveSingle]);
-  const surfaceAspect = useMemo4(() => {
+  const surfaceAspect = useMemo5(() => {
     const columns = effectiveSingle ? 1 : 2;
     const aspect = resolvedGeometry?.aspect ?? DEFAULT_PAGE_GEOMETRY.aspect;
     return `${columns} / ${aspect}`;
   }, [effectiveSingle, resolvedGeometry]);
-  const resolvedOptions = useMemo4(
+  const resolvedOptions = useMemo5(
     () => mergeDefined(DEFAULT_BOOK_OPTIONS, optionsProp ?? {}),
     [optionsProp]
   );
-  const onErrorRef = useRef10(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,
-    setOptions
+    setOptions: applyBookOptions
   } = useMejiroBook(resolvedOptions, {
     debounceMs: OPTIONS_DEBOUNCE_MS,
     onError: reportError
   });
+  const lastApplyRef = useRef12(Promise.resolve());
+  const setOptions = useCallback7(
+    (partial) => {
+      const applied = applyBookOptions(partial);
+      lastApplyRef.current = applied;
+      return applied;
+    },
+    [applyBookOptions]
+  );
   const optionsPropKey = JSON.stringify(resolvedOptions);
-  const syncedOptionsPropKeyRef = useRef10(optionsPropKey);
-  const resolvedOptionsRef = useRef10(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);
   }, [optionsPropKey, setOptions]);
   const manuscriptSourceKey = manuscriptKey(manuscriptProp);
-  const synthesizedEpub = useMemo4(() => {
+  const synthesizedEpub = useMemo5(() => {
     if (manuscriptSourceKey === void 0) return null;
     const chapters = JSON.parse(manuscriptSourceKey);
     return manuscriptToEpubBook(chapters, { dialect: dialectProp });
@@ -1983,7 +2241,6 @@ function MejiroReaderInner(props, ref) {
     limits,
     fetchEpub: fetchEpubFn,
     onLoad: (b) => {
-      if (chapterProp == null) setChapterState(0);
       clearImagesRef.current();
       onLoad?.(b);
     }
@@ -1991,18 +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;
-  useEffect8(() => {
+  const sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : bookIdentity(epubProp);
+  const bookKey = controlled ? sourceKey : epubCtx.epub;
+  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;
+  useEffect9(() => {
     if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
   }, [epubCtx.error]);
-  const pageGeometryRef = useRef10(resolvedGeometry);
+  const pageGeometryRef = useRef12(resolvedGeometry);
   pageGeometryRef.current = resolvedGeometry;
-  const spreadAnchorRef = useRef10(() => null);
-  const spreadIdxPropRef = useRef10(spreadIdxProp);
+  const spreadAnchorRef = useRef12(() => null);
+  const spreadIdxPropRef = useRef12(spreadIdxProp);
   spreadIdxPropRef.current = spreadIdxProp;
-  const visibleAnchorRef = useRef10(
+  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
@@ -2012,10 +2294,13 @@ function MejiroReaderInner(props, ref) {
       const visible = visibleAnchorRef.current;
       if (visible?.layout === layout2) return visible.anchor;
       return spreadAnchorRef.current();
-    }
+    },
+    onError: reportError
   });
-  const spreadChangedRef = useRef10(void 0);
+  const reportedSpreadIdxRef = useRef12(null);
+  const spreadChangedRef = useRef12(void 0);
   spreadChangedRef.current = (i) => {
+    reportedSpreadIdxRef.current = i;
     onSpreadChange?.(i);
     onSpreadIdxChange?.(i);
   };
@@ -2025,9 +2310,9 @@ function MejiroReaderInner(props, ref) {
     onChange: (i) => spreadChangedRef.current?.(i)
   });
   spreadAnchorRef.current = () => spreadCtx.anchorAt(spreadCtx.spreadIdx);
-  const indexOfPageRef = useRef10(spreadCtx.indexOfPage);
+  const indexOfPageRef = useRef12(spreadCtx.indexOfPage);
   indexOfPageRef.current = spreadCtx.indexOfPage;
-  const anchorSingleRef = useRef10(effectiveSingle);
+  const anchorSingleRef = useRef12(effectiveSingle);
   useLayoutEffect4(() => {
     const l = layoutCtx.layout;
     const flipped = anchorSingleRef.current !== effectiveSingle;
@@ -2035,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 = useRef10(spreadCtx.setSpread);
+  const setSpreadRef = useRef12(spreadCtx.setSpread);
   setSpreadRef.current = spreadCtx.setSpread;
   useLayoutEffect4(() => {
     const anchor = layoutCtx.pendingRestore.current;
@@ -2046,18 +2331,16 @@ function MejiroReaderInner(props, ref) {
     visibleAnchorRef.current = { layout: layoutCtx.layout, anchor };
   }, [layoutCtx.layout]);
   const optionsKey = reflowOptionsKey(bookOptions);
-  const optionsKeyRef = useRef10(optionsKey);
-  const bookOptionsRef = useRef10(bookOptions);
-  bookOptionsRef.current = bookOptions;
-  const recomputeRef = useRef10(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(() => {
       void (async () => {
         try {
-          await setOptions({ ...bookOptionsRef.current });
+          await lastApplyRef.current;
           await recomputeRef.current({ blank: false });
         } catch (err) {
           reportError(toError(err));
@@ -2065,10 +2348,10 @@ function MejiroReaderInner(props, ref) {
       })();
     }, OPTIONS_DEBOUNCE_MS);
     return () => clearTimeout(timer);
-  }, [optionsKey, setOptions, reportError]);
+  }, [optionsKey, reportError]);
   const geometryKey = JSON.stringify(resolvedGeometry ?? null);
-  const geometryKeyRef = useRef10(geometryKey);
-  useEffect8(() => {
+  const geometryKeyRef = useRef12(geometryKey);
+  useEffect9(() => {
     if (geometryKeyRef.current === geometryKey) return;
     geometryKeyRef.current = geometryKey;
     void recomputeRef.current({ blank: false });
@@ -2077,7 +2360,7 @@ function MejiroReaderInner(props, ref) {
     defaultX: IMAGE_DEFAULT_X,
     onUpdate: () => spreadCtx.refresh()
   });
-  const annotationRects = useMemo4(() => {
+  const annotationRects = useMemo5(() => {
     if (!(annotations && layoutCtx.layout)) return [];
     const result = [];
     for (const annotation of annotations) {
@@ -2090,30 +2373,31 @@ function MejiroReaderInner(props, ref) {
     }
     return result;
   }, [annotations, layoutCtx.layout, chapter, imageCtx.currentImages]);
-  const clearImagesRef = useRef10(imageCtx.clearImages);
+  const clearImagesRef = useRef12(imageCtx.clearImages);
   clearImagesRef.current = imageCtx.clearImages;
-  const onLoadRef = useRef10(onLoad);
+  const onLoadRef = useRef12(onLoad);
   onLoadRef.current = onLoad;
-  const eRef = useRef10(e);
+  const eRef = useRef12(e);
   eRef.current = e;
-  const sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : epubProp;
-  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 = useRef10(chapter);
-  useEffect8(() => {
+  }, [controlled, sourceKey, book]);
+  const imagesChapterRef = useRef12(chapter);
+  useEffect9(() => {
     if (imagesChapterRef.current === chapter) return;
     imagesChapterRef.current = chapter;
     clearImagesRef.current();
   }, [chapter]);
-  const spreadGoToRef = useRef10(spreadCtx.goTo);
+  const spreadGoToRef = useRef12(spreadCtx.goTo);
   spreadGoToRef.current = spreadCtx.goTo;
-  const appliedSpreadIdxPropRef = useRef10(spreadIdxProp);
-  useEffect8(() => {
+  const appliedSpreadIdxPropRef = useRef12(spreadIdxProp);
+  const [hostTurn, setHostTurn] = useState8(0);
+  useEffect9(() => {
+    const reported = reportedSpreadIdxRef.current;
+    reportedSpreadIdxRef.current = null;
     if (spreadIdxProp == null) {
       appliedSpreadIdxPropRef.current = spreadIdxProp;
       return;
@@ -2122,23 +2406,32 @@ function MejiroReaderInner(props, ref) {
     appliedSpreadIdxPropRef.current = spreadIdxProp;
     if (spreadCtx.spreadIdx === spreadIdxProp) return;
     if (propChanged) spreadGoToRef.current(spreadIdxProp);
+    else if (reported === spreadCtx.spreadIdx) setHostTurn((n) => n + 1);
     else setSpreadRef.current(spreadIdxProp);
-  }, [spreadIdxProp, spreadCtx.spreadIdx]);
+  }, [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(
-    (i) => {
+  const onChapter = useCallback7(
+    (index) => {
+      const i = clampChapter(index, e);
       if (i === chapter) return;
       if (chapterProp == null) setChapterState(i);
       onChapterChange?.(i);
     },
-    [chapter, chapterProp, onChapterChange]
+    [chapter, chapterProp, onChapterChange, e]
   );
-  const listenersRef = useRef10(/* @__PURE__ */ new Map());
-  const emit = useCallback6(
+  const onChapterRef = useRef12(onChapter);
+  onChapterRef.current = onChapter;
+  const listenersRef = useRef12(/* @__PURE__ */ new Map());
+  const emit = useCallback7(
     (event, payload) => {
       const set = listenersRef.current.get(event);
       if (!set) return;
@@ -2146,44 +2439,40 @@ function MejiroReaderInner(props, ref) {
     },
     []
   );
-  const pendingAnchorRef = useRef10(null);
-  const layoutOwnerRef = useRef10({
+  const layoutOwnerRef = useRef12({
     layout: null,
-    chapter
+    chapter,
+    book: bookKey
   });
   if (layoutOwnerRef.current.layout !== layoutCtx.layout) {
-    layoutOwnerRef.current = { layout: layoutCtx.layout, chapter };
+    layoutOwnerRef.current = { layout: layoutCtx.layout, chapter, book: bookKey };
   }
-  const layout = layoutOwnerRef.current.chapter === chapter ? layoutCtx.layout : null;
-  const tryApplyPendingAnchor = useCallback6(() => {
-    const pending = pendingAnchorRef.current;
-    if (!pending) return;
-    if (pending.anchor.chapter !== chapter) return;
-    if (!layout) return;
-    const loc = layout.locateAnchor({
-      paragraph: pending.anchor.paragraph,
-      charIndex: pending.anchor.charIndex
-    });
-    if (!loc) return;
-    pendingAnchorRef.current = null;
-    spreadGoToRef.current(indexOfPageRef.current(loc.pageIdx));
-    pending.resolve();
-  }, [chapter, layout]);
-  useEffect8(() => {
-    tryApplyPendingAnchor();
-  }, [tryApplyPendingAnchor]);
-  useEffect8(
-    () => () => {
-      pendingAnchorRef.current?.resolve();
-      pendingAnchorRef.current = null;
-    },
-    []
-  );
-  const onPageReadRef = useRef10(onPageRead);
+  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 = useRef12(anchorTarget);
+  anchorTargetRef.current = anchorTarget;
+  const spreadIdxNowRef = useRef12(spreadCtx.spreadIdx);
+  spreadIdxNowRef.current = spreadCtx.spreadIdx;
+  const anchorResolverRef = useRef12(null);
+  anchorResolverRef.current ??= createAnchorResolver({
+    goToChapter: (i) => onChapterRef.current(i),
+    goToPage: (pageIdx) => {
+      const target = indexOfPageRef.current(pageIdx);
+      if (target === spreadIdxNowRef.current) return false;
+      setSpreadRef.current(target);
+      return true;
+    }
+  });
+  useEffect9(() => {
+    anchorResolverRef.current?.update(anchorTargetRef.current);
+  }, [anchorTarget.book, chapter, layout, spreadCtx.spreadIdx]);
+  useEffect9(() => () => anchorResolverRef.current?.dispose(), []);
+  const onPageReadRef = useRef12(onPageRead);
   onPageReadRef.current = onPageRead;
-  const onChapterCompletedRef = useRef10(onChapterCompleted);
+  const onChapterCompletedRef = useRef12(onChapterCompleted);
   onChapterCompletedRef.current = onChapterCompleted;
-  const trackLifecycleRef = useRef10(null);
+  const trackLifecycleRef = useRef12(null);
   trackLifecycleRef.current ??= createLifecycleTracker({
     spreadChanged: (ch, spreadIdx) => emit("spreadChanged", { chapter: ch, spreadIdx }),
     chapterFinished: (ch) => {
@@ -2192,10 +2481,11 @@ 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?.(chapter, spreadCtx.spreadIdx, view, spreadIdxProp);
+    trackLifecycleRef.current?.(bookKey, chapter, spreadCtx.spreadIdx, view, spreadIdxProp);
   }, [
+    bookKey,
     chapter,
     spreadCtx.spreadIdx,
     spreadCtx.totalSpreads,
@@ -2203,8 +2493,8 @@ function MejiroReaderInner(props, ref) {
     layout,
     spreadIdxProp
   ]);
-  const prevTurningRef = useRef10(false);
-  useEffect8(() => {
+  const prevTurningRef = useRef12(false);
+  useEffect9(() => {
     if (spreadCtx.turning && !prevTurningRef.current) {
       emit("turnStart", { from: spreadCtx.spreadIdx });
     } else if (!spreadCtx.turning && prevTurningRef.current) {
@@ -2225,12 +2515,7 @@ function MejiroReaderInner(props, ref) {
         totalPages: spreadCtx.totalPages,
         totalSpreads: spreadCtx.totalSpreads
       }),
-      goToAnchor: (anchor) => new Promise((resolve) => {
-        pendingAnchorRef.current?.resolve();
-        pendingAnchorRef.current = { anchor, resolve };
-        if (anchor.chapter !== chapter) onChapter(anchor.chapter);
-        tryApplyPendingAnchor();
-      }),
+      goToAnchor: (anchor) => anchorResolverRef.current?.request(anchor, anchorTargetRef.current) ?? Promise.resolve(),
       getAnchor: () => {
         if (!layout) return null;
         const inCh = spreadCtx.anchorAt(spreadCtx.spreadIdx);
@@ -2269,8 +2554,7 @@ function MejiroReaderInner(props, ref) {
       onChapter,
       chapter,
       layout,
-      setOptions,
-      tryApplyPendingAnchor
+      setOptions
     ]
   );
   const editable = {
@@ -2293,7 +2577,7 @@ function MejiroReaderInner(props, ref) {
   const layoutReady = e && spreadCtx.spread && layoutCtx.layout && layoutCtx.pageWidth > 0;
   const themeName = typeof theme === "string" ? theme : theme.name;
   const themeOverride = typeof theme === "string" ? void 0 : theme.override;
-  const themeStyle = useMemo4(() => {
+  const themeStyle = useMemo5(() => {
     const pad = pageGeometryProp?.padding;
     const styleVars = {};
     if (pad?.x != null) styleVars["--mejiro-page-pad-x"] = `${pad.x}px`;
@@ -2325,7 +2609,7 @@ function MejiroReaderInner(props, ref) {
           fontLabel
         }
       ),
-      enableDropZone && /* @__PURE__ */ jsx13(
+      filePicker && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -2363,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",
     {
@@ -2393,7 +2675,7 @@ function MejiroReaderInner(props, ref) {
         /* @__PURE__ */ jsxs8("div", { className: `mejiro-reader-body${showChapterPanel ? " has-chapter-panel" : ""}`, children: [
           showChapterPanel && /* @__PURE__ */ jsx13(MejiroChapterNav, { epub: e, chapter, onChange: onChapter, variant: "panel" }),
           /* @__PURE__ */ jsxs8("div", { ref: surfaceRef, className: "mejiro-reader-surface", children: [
-            !(e || epubCtx.loading) && enableDropZone && /* @__PURE__ */ jsx13(MejiroDropZone, { onFile: (f) => void epubCtx.loadFile(f) }),
+            !(e || epubCtx.loading) && filePicker && /* @__PURE__ */ jsx13(MejiroDropZone, { onFile: (f) => void epubCtx.loadFile(f) }),
             epubCtx.loading && /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-loading", children: resolvedMessages.loading }),
             !layoutReady && fallback && /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-fallback", children: fallback }),
             layoutReady && mode === "scroll" && layoutCtx.layout && /* @__PURE__ */ jsx13(
@@ -2412,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,
               {
@@ -2441,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,
@@ -2476,6 +2759,7 @@ function MejiroReaderInner(props, ref) {
             hidden: true,
             onChange: (ev) => {
               const file = ev.target.files?.[0];
+              ev.target.value = "";
               if (file) void epubCtx.loadFile(file);
             }
           }
@@ -2493,6 +2777,55 @@ MejiroReader.displayName = "MejiroReader";
 
 // src/MejiroEditor.tsx
 import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+function clampRubyRange(start, end, length) {
+  if (length <= 0) return null;
+  const from = Math.max(0, Math.min(start, length - 1));
+  return { start: from, end: Math.max(from + 1, Math.min(end, length)) };
+}
+function commitPendingEdit(editor, chapterIndex, paragraphIndex, text, ruby) {
+  const paragraphs = editor.book.chapters[chapterIndex]?.paragraphs;
+  if (!paragraphs?.[paragraphIndex]) return false;
+  const textChanged = text !== paragraphs[paragraphIndex].text;
+  const rubyText = ruby?.rubyText.trim();
+  const range = ruby ? clampRubyRange(ruby.start, ruby.end, [...text].length) : null;
+  if (!(rubyText && range)) {
+    if (textChanged) editor.updateParagraph(chapterIndex, paragraphIndex, { text });
+    return textChanged;
+  }
+  editor.transaction(() => {
+    if (textChanged) editor.updateParagraph(chapterIndex, paragraphIndex, { text });
+    const committed = editor.book.chapters[chapterIndex].paragraphs[paragraphIndex];
+    const newRuby = {
+      kind: "ruby",
+      startIndex: range.start,
+      endIndex: range.end,
+      rubyText,
+      type: range.end - range.start === 1 ? "mono" : "group"
+    };
+    const inlineAnnotations = [
+      ...committed.inlineAnnotations.filter(
+        (ann) => ann.kind !== "ruby" || ann.endIndex <= range.start || ann.startIndex >= range.end
+      ),
+      newRuby
+    ].sort((a, b) => a.startIndex - b.startIndex);
+    editor.updateParagraph(chapterIndex, paragraphIndex, { inlineAnnotations });
+  });
+  return true;
+}
+function downloadEpub(buffer, filename) {
+  const url = URL.createObjectURL(new Blob([buffer], { type: "application/epub+zip" }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.hidden = true;
+  document.body.append(a);
+  try {
+    a.click();
+  } finally {
+    a.remove();
+    setTimeout(() => URL.revokeObjectURL(url), 0);
+  }
+}
 function utf16ToCodepoint(text, utf16Offset) {
   let cp = 0;
   let i = 0;
@@ -2510,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),
@@ -2517,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;
@@ -2544,9 +2894,9 @@ function MejiroEditor({
   onError
 }) {
   const messages = useI18n();
-  const imageInputRef = useRef11(null);
-  const textareaRef = useRef11(null);
-  const readerRef = useRef11(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);
@@ -2556,86 +2906,89 @@ function MejiroEditor({
   const [rubyStart, setRubyStart] = useState9(0);
   const [rubyEnd, setRubyEnd] = useState9(1);
   const [rubyText, setRubyText] = useState9("");
-  const loadRequestIdRef = useRef11(0);
-  const onLoadRef = useRef11(onLoad);
-  const onErrorRef = useRef11(onError);
-  const limitsRef = useRef11(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;
   const paragraph = chapter?.paragraphs[selection.paragraph] ?? null;
-  const textDirty = paragraph ? text !== paragraph.text : false;
-  const previewBook = useMemo5(() => {
+  const sceneBreak = chapter ? paragraphBlock(chapter, selection.paragraph)?.paragraphKind === "sceneBreak" : false;
+  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 = useRef11(
+  }, [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;
@@ -2649,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,
@@ -2659,7 +3012,7 @@ function MejiroEditor({
   }, [previewBook, selection.chapter, selection.paragraph]);
   function selectParagraph(chapterIndex, paragraphIndex) {
     if (chapterIndex === selection.chapter && paragraphIndex === selection.paragraph) return;
-    if (textDirty) applyText();
+    commitEdit();
     setSelection({ chapter: chapterIndex, paragraph: paragraphIndex });
   }
   function captureRubyRange() {
@@ -2672,41 +3025,22 @@ function MejiroEditor({
     setRubyStart(start);
     setRubyEnd(Math.max(start + 1, end));
   }
-  function applyText() {
+  function commitEdit(ruby) {
     if (!editor) return;
-    editor.updateParagraph(selection.chapter, selection.paragraph, { text });
-    setRevision((value) => value + 1);
+    if (commitPendingEdit(editor, selection.chapter, selection.paragraph, text, ruby)) {
+      setRevision((value) => value + 1);
+    }
   }
   function applyRuby() {
-    if (!(editor && paragraph && rubyText.trim()) || textDirty) return;
-    const len = [...text].length;
-    const start = Math.max(0, Math.min(rubyStart, len));
-    const end = Math.max(start + 1, Math.min(rubyEnd, len));
-    const newRuby = {
-      kind: "ruby",
-      startIndex: start,
-      endIndex: end,
-      rubyText: rubyText.trim(),
-      type: end - start === 1 ? "mono" : "group"
-    };
-    const nextInline = [
-      ...paragraph.inlineAnnotations.filter(
-        (ann) => ann.endIndex <= start || ann.startIndex >= end
-      ),
-      newRuby
-    ].sort((a, b) => a.startIndex - b.startIndex);
-    editor.updateParagraph(selection.chapter, selection.paragraph, {
-      text,
-      inlineAnnotations: nextInline
-    });
+    if (!(rubyRange && rubyText.trim())) return;
+    commitEdit({ start: rubyStart, end: rubyEnd, rubyText });
     setRubyText("");
-    setRevision((value) => value + 1);
   }
   async function addImage(file) {
     await withErrorReporting(async () => {
       if (!(editor && chapter)) return;
       const chapterIndex = selection.chapter;
-      const afterBlockId = paragraphBlockId(chapter, selection.paragraph);
+      const afterBlockId = paragraphBlock(chapter, selection.paragraph)?.id;
       const data = await file.arrayBuffer();
       editor.addImage(chapterIndex, {
         filename: file.name,
@@ -2716,11 +3050,13 @@ function MejiroEditor({
         afterBlockId
       });
       setRevision((value) => value + 1);
+      clearError();
     }, reportError);
   }
   async function exportEpub() {
     await withErrorReporting(async () => {
       if (!editor) return;
+      commitEdit();
       const watermark = exportPolicy?.watermark;
       const source = watermark ? watermarkedBook(editor.book, watermark) : editor.book;
       let buffer = await exportEditableEpub(source, assetResolver ? { assetResolver } : void 0);
@@ -2728,15 +3064,20 @@ function MejiroEditor({
       const decision = await onBeforeExport?.(buffer);
       onExport?.(buffer);
       const allowDownload = exportPolicy ? exportPolicy.allowDownload !== false : decision !== false;
-      if (!allowDownload) return;
-      const url = URL.createObjectURL(new Blob([buffer], { type: "application/epub+zip" }));
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${editor.title || "edited"}.epub`;
-      a.click();
-      URL.revokeObjectURL(url);
+      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(
@@ -2746,6 +3087,7 @@ function MejiroEditor({
           epub: previewBook,
           chapter: selection.chapter,
           onChapterChange: (index) => selectParagraph(index, 0),
+          onError: reportError,
           fonts,
           subtitle: messages.editorPreviewSubtitle,
           chapterNavMode: "panel",
@@ -2783,24 +3125,26 @@ function MejiroEditor({
         ] }),
         enableProofread && /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
           /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorProofread }),
+          paragraphText,
           /* @__PURE__ */ jsx14(
-            "textarea",
+            "button",
             {
-              ref: textareaRef,
-              value: text,
-              onChange: (event) => setText(event.target.value),
-              onSelect: captureRubyRange
+              type: "button",
+              className: "mejiro-editor-primary",
+              disabled: sceneBreak,
+              onClick: () => commitEdit(),
+              children: messages.editorApplyText
             }
-          ),
-          /* @__PURE__ */ jsx14("button", { type: "button", className: "mejiro-editor-primary", onClick: applyText, children: messages.editorApplyText })
+          )
         ] }),
         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: rubyStart,
-            end: rubyEnd,
-            count: Math.max(0, rubyEnd - rubyStart)
+            start: rubyRange?.start ?? 0,
+            end: rubyRange?.end ?? 0,
+            count: rubyRange ? rubyRange.end - rubyRange.start : 0
           }) }),
           /* @__PURE__ */ jsx14(
             "input",
@@ -2815,7 +3159,7 @@ function MejiroEditor({
             {
               type: "button",
               className: "mejiro-editor-primary",
-              disabled: textDirty || !rubyText.trim(),
+              disabled: !(rubyRange && rubyText.trim()),
               onClick: applyRuby,
               children: messages.editorApplyRuby
             }
@@ -2833,6 +3177,7 @@ function MejiroEditor({
               hidden: true,
               onChange: (event) => {
                 const file = event.target.files?.[0];
+                event.target.value = "";
                 if (file) void addImage(file);
               }
             }
@@ -2851,27 +3196,27 @@ function MejiroEditor({
     ] })
   ] });
 }
-function paragraphBlockId(chapter, paragraphIndex) {
+function paragraphBlock(chapter, paragraphIndex) {
   let current = 0;
   for (const block of chapter.blocks) {
     if (block.kind !== "paragraph") continue;
-    if (current === paragraphIndex) return block.id;
+    if (current === paragraphIndex) return block;
     current++;
   }
   return void 0;
 }
 
 // src/MejiroManuscriptEditor.tsx
-import { EpubProject } from "@libraz/mejiro/epub";
-import { useCallback as useCallback9, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef14, 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";
 import {
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo6,
-  useRef as useRef12,
+  useMemo as useMemo7,
+  useRef as useRef14,
   useState as useState10
 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -2888,12 +3233,13 @@ var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2(
   onCompositionEnd,
   ...rest
 }, ref) {
-  const textareaRef = useRef12(null);
-  const overlayRef = useRef12(null);
+  const textareaRef = useRef14(null);
+  const overlayRef = useRef14(null);
   useImperativeHandle2(ref, () => textareaRef.current, []);
   const [isComposing, setIsComposing] = useState10(false);
-  const lastSegmentsRef = useRef12(null);
-  const segments = useMemo6(() => {
+  const [composingValue, setComposingValue] = useState10("");
+  const lastSegmentsRef = useRef14(null);
+  const segments = useMemo7(() => {
     if (isComposing && lastSegmentsRef.current) return lastSegmentsRef.current;
     const next = buildSegments(value, dialect);
     lastSegmentsRef.current = next;
@@ -2932,14 +3278,19 @@ var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2(
             ref: textareaRef,
             className: `mejiro-notation-textarea${className ? ` ${className}` : ""}`,
             style,
-            value,
-            onChange: (event) => onChange(event.target.value),
+            value: isComposing ? composingValue : value,
+            onChange: (event) => {
+              if (isComposing) setComposingValue(event.target.value);
+              onChange(event.target.value);
+            },
             onCompositionStart: (event) => {
+              setComposingValue(event.currentTarget.value);
               setIsComposing(true);
               onCompositionStart?.(event);
             },
             onCompositionEnd: (event) => {
               setIsComposing(false);
+              onChange(event.currentTarget.value);
               onCompositionEnd?.(event);
             },
             onScroll: (event) => {
@@ -2980,10 +3331,276 @@ function buildSegments(text, dialect) {
   return segments;
 }
 
+// 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.chapters?.length ? options.chapters : [defaultChapter([], defaultTitle, defaultBody)]
+  );
+  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 = 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;
+  }, []);
+  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 useCallback8, useEffect as useEffect10, useRef as useRef13, useState as useState11 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef16, useState as useState12 } from "react";
 var DEFAULT_DELAY = 800;
-function defaultChapter(existing, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
+function defaultChapter2(existing, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
   const index = existing.length;
   return { id: uniqueChapterId(existing), title: titleFor(index), body: bodyFor(index) };
 }
@@ -2996,49 +3613,66 @@ function useManuscriptDraft(options = {}) {
     defaultChapterTitle,
     defaultChapterBody
   } = options;
-  const titleForRef = useRef13(defaultChapterTitle);
+  const titleForRef = useRef16(defaultChapterTitle);
   titleForRef.current = defaultChapterTitle;
-  const bodyForRef = useRef13(defaultChapterBody);
+  const bodyForRef = useRef16(defaultChapterBody);
   bodyForRef.current = defaultChapterBody;
-  const [chapters, setChaptersState] = useState11(
-    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter([], defaultChapterTitle, defaultChapterBody)]
+  const [chapters, setChaptersState] = useState12(
+    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter2([], defaultChapterTitle, defaultChapterBody)]
   );
-  const [selected, setSelectedState] = useState11(0);
-  const [autosaveError, setAutosaveError] = useState11(null);
-  const saveRef = useRef13(onAutosave);
+  const [selected, setSelectedState] = useState12(0);
+  const [autosaveError, setAutosaveError] = useState12(null);
+  const saveRef = useRef16(onAutosave);
   saveRef.current = onAutosave;
-  const payloadRef = useRef13(autosavePayload);
+  const payloadRef = useRef16(autosavePayload);
   payloadRef.current = autosavePayload;
-  const chaptersRef = useRef13(chapters);
+  const chaptersRef = useRef16(chapters);
   chaptersRef.current = chapters;
-  const selectedRef = useRef13(selected);
+  const selectedRef = useRef16(selected);
   selectedRef.current = selected;
-  const trackerRef = useRef13(null);
+  const trackerRef = useRef16(null);
   if (!trackerRef.current)
     trackerRef.current = createDraftChangeTracker(chapters, autosaveKey ?? "");
-  const dirtyRef = useRef13(false);
-  const mountedRef = useRef13(true);
-  const revisionRef = useRef13(0);
-  const inFlightRevisionRef = useRef13(-1);
-  const flushAutosave = useCallback8(() => {
+  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) || inFlightRevisionRef.current === revisionRef.current) {
+    if (!(callback && dirtyRef.current)) return;
+    if (inFlightRef.current) {
+      flushQueuedRef.current = true;
       return;
     }
     const revision = revisionRef.current;
-    inFlightRevisionRef.current = revision;
     const plain = snapshotChapters(chaptersRef.current);
     const payload = payloadRef.current ? payloadRef.current(plain) : plain;
-    void Promise.resolve(callback(payload)).then(() => {
+    const markSaved = () => {
       if (revisionRef.current === revision) dirtyRef.current = false;
-    }).catch((err) => {
+    };
+    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(() => {
-      if (inFlightRevisionRef.current === revision) inFlightRevisionRef.current = -1;
+      inFlightRef.current = false;
+      if (!flushQueuedRef.current) return;
+      flushQueuedRef.current = false;
+      flushAutosave();
     });
   }, []);
-  useEffect10(() => {
+  useEffect12(() => {
     if (trackerRef.current?.changed(chapters, autosaveKey ?? "")) {
       dirtyRef.current = true;
       revisionRef.current += 1;
@@ -3050,7 +3684,7 @@ function useManuscriptDraft(options = {}) {
     }, autosaveDelay);
     return () => clearTimeout(timer);
   }, [chapters, autosaveKey, autosaveDelay, flushAutosave]);
-  useEffect10(() => {
+  useEffect12(() => {
     mountedRef.current = true;
     const detachPageHide = flushOnPageHide(flushAutosave);
     return () => {
@@ -3059,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;
@@ -3083,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,
         {
@@ -3106,7 +3740,7 @@ function useManuscriptDraft(options = {}) {
     },
     [commit]
   );
-  const removeChapter = useCallback8(
+  const removeChapter = useCallback10(
     (index) => {
       const current = chaptersRef.current;
       if (current.length <= 1) return;
@@ -3120,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;
@@ -3153,14 +3787,6 @@ function useManuscriptDraft(options = {}) {
 
 // src/MejiroManuscriptEditor.tsx
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-function downloadEpub(buffer, title) {
-  const url = URL.createObjectURL(new Blob([buffer], { type: "application/epub+zip" }));
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `${title || "book"}.epub`;
-  a.click();
-  URL.revokeObjectURL(url);
-}
 function coverExtension(mediaType) {
   switch (mediaType) {
     case "image/gif":
@@ -3181,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 }),
@@ -3207,41 +3833,41 @@ function MejiroManuscriptEditor({
   panelSide = "right"
 }) {
   const messages = useI18n();
-  const coverInputRef = useRef14(null);
-  const bodyTextareaRef = useRef14(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);
@@ -3249,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}`,
@@ -3266,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;
@@ -3285,37 +3919,31 @@ 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);
-      },
-      (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,
     chapters,
@@ -3323,11 +3951,12 @@ function MejiroManuscriptEditor({
     dialect,
     identifier,
     messages.untitled,
-    onError,
     onExport,
+    clearError,
+    reportError,
     title
   ]);
-  const previewManuscript = useMemo7(
+  const previewManuscript = useMemo9(
     () => chapters.map((chapter) => ({
       id: chapter.id,
       title: chapter.title || messages.untitled,
@@ -3352,6 +3981,7 @@ function MejiroManuscriptEditor({
         fonts,
         chapter: selected,
         onChapterChange: setSelected,
+        onError: reportError,
         enableImageOverlay: false
       }
     ) }),
@@ -3375,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);
+            }
           }
         )
       ] }),
@@ -3394,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) => {
@@ -3441,7 +4076,7 @@ function MejiroManuscriptEditor({
             onChange: (event) => patchChapter(selected, { title: event.target.value })
           }
         ),
-        /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-grid mejiro-editor-notation", children: [
+        dialect === "mejiro" && /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-grid mejiro-editor-notation", children: [
           /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("\u300A\u300A", "\u300B\u300B"), children: messages.manuscriptEmphasisDots }),
           /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("\u3014", "\u3015"), children: messages.manuscriptTcy }),
           /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("*", "*"), children: messages.manuscriptEm }),
@@ -3501,7 +4136,7 @@ function MejiroShelf({
 }
 
 // src/MejiroToc.tsx
-import { useMemo as useMemo8, 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) => {
@@ -3524,9 +4159,9 @@ function MejiroToc({
   const messages = useI18n();
   const resolvedTitle = title ?? messages.tocTitle;
   const resolvedSearchPlaceholder = searchPlaceholder ?? messages.tocSearchPlaceholder;
-  const [query, setQuery] = useState13("");
-  const entries = useMemo8(() => buildEntries(epub, messages), [epub, messages]);
-  const filtered = useMemo8(() => {
+  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(
@@ -3576,34 +4211,41 @@ import {
   serializeAnnotations,
   sortAnnotations
 } from "@libraz/mejiro";
-import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef15, 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 = useRef15(storage);
+  const storageRef = useRef18(storage);
   storageRef.current = storage;
-  const annotationsRef = useRef15(annotations);
-  const applyNext = useCallback10((next) => {
-    annotationsRef.current = next;
-    setAnnotations(next);
-  }, []);
-  const pendingRef = useRef15(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 = useRef15(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) {
@@ -3615,7 +4257,7 @@ function useAnnotations(options) {
     },
     [key, throttleMs, pending]
   );
-  const add = useCallback10(
+  const add = useCallback12(
     (input) => {
       const annotation = {
         ...input,
@@ -3629,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);
@@ -3639,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) => {
@@ -3654,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);
@@ -3669,39 +4312,40 @@ import {
   cloneEditableEpubBook as cloneEditableEpubBook2,
   EditableEpub as EditableEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo9, useRef as useRef16, 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 = useRef16(0);
-  const onLoadRef = useRef16(options.onLoad);
-  const onErrorRef = useRef16(options.onError);
-  const onExportRef = useRef16(options.onExport);
-  const limitsRef = useRef16(options.limits);
-  const assetResolverRef = useRef16(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 = useRef16(editor);
+  const editorRef = useRef19(editor);
   editorRef.current = editor;
-  const selectionRef = useRef16(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;
@@ -3711,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);
@@ -3747,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);
@@ -3766,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 = useMemo9(() => {
+  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;
@@ -3793,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(
@@ -3832,7 +4488,7 @@ function useEditableEpub(options = {}) {
         onExportRef.current?.(buffer);
         return buffer;
       } finally {
-        setExporting(false);
+        setExporting(--exportsInFlightRef.current > 0);
       }
     },
     []
@@ -3865,258 +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 useMemo10, useRef as useRef17, 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 = useRef17(0);
-  const onPreviewRef = useRef17(options.onPreview);
-  const onExportRef = useRef17(options.onExport);
-  onPreviewRef.current = options.onPreview;
-  onExportRef.current = options.onExport;
-  const assetResolverRef = useRef17(options.assetResolver);
-  assetResolverRef.current = options.assetResolver;
-  const metadataRef = useRef17(metadata);
-  metadataRef.current = metadata;
-  const chaptersRef = useRef17(chapters);
-  chaptersRef.current = chapters;
-  const selectedRef = useRef17(selectedChapter);
-  selectedRef.current = selectedChapter;
-  const coverRef = useRef17(cover);
-  coverRef.current = cover;
-  const assetsRef = useRef17(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 = { ...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 useMemo10(
-    () => ({
-      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 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 useRef18,
+  useCallback as useCallback14,
+  useEffect as useEffect16,
+  useRef as useRef20,
   useState as useState17
 } from "react";
 function useImageOverlay(layout, spreadIdx, onUpdate, options) {
@@ -4126,34 +4536,33 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defY = options?.defaultY ?? 100;
   const margin = options?.margin;
   const [imageRect, setImageRect] = useState17(null);
-  const rectRef = useRef18(imageRect);
+  const rectRef = useRef20(imageRect);
   rectRef.current = imageRect;
-  const layoutRef = useRef18(layout);
+  const layoutRef = useRef20(layout);
   layoutRef.current = layout;
-  const spreadRef = useRef18(spreadIdx);
+  const spreadRef = useRef20(spreadIdx);
   spreadRef.current = spreadIdx;
-  const onUpdateRef = useRef18(onUpdate);
+  const onUpdateRef = useRef20(onUpdate);
   onUpdateRef.current = onUpdate;
-  const activeDragCleanupsRef = useRef18(/* @__PURE__ */ new Set());
-  useEffect15(
+  const marginRef = useRef20(margin);
+  marginRef.current = margin;
+  const activeDragCleanupsRef = useRef20(/* @__PURE__ */ new Set());
+  useEffect16(
     () => () => {
       for (const cleanup of activeDragCleanupsRef.current) cleanup();
       activeDragCleanupsRef.current.clear();
     },
     []
   );
-  const syncToLayout = useCallback13(
-    (rect) => {
-      const lo = layoutRef.current;
-      if (!lo) return;
-      const images = rect ? [{ x: rect.x, y: rect.y, w: rect.w, h: rect.h, margin }] : void 0;
-      const spread = lo.syncImages(spreadRef.current, images);
-      onUpdateRef.current(spread);
-    },
-    [margin]
-  );
-  const syncedRef = useRef18({ layout, spreadIdx, margin });
-  useEffect15(() => {
+  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 = 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;
@@ -4163,24 +4572,29 @@ 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;
       setImageRect(null);
       syncToLayout(null);
     } else {
       const r = { x: defX, y: defY, w: defW, h: defH };
+      rectRef.current = r;
       setImageRect(r);
       syncToLayout(r);
     }
   }, [defX, defY, defW, defH, syncToLayout]);
-  const applyRect = useCallback13(
+  const applyRect = useCallback14(
     (rect) => {
+      if (rectRef.current === null) return;
+      rectRef.current = rect;
       setImageRect(rect);
       syncToLayout(rect);
     },
     [syncToLayout]
   );
-  const onOverlayPointerDown = useCallback13(
+  const onOverlayPointerDown = useCallback14(
     (e) => {
       if (!isPrimaryPointerPress3(e)) return;
       e.preventDefault();
@@ -4202,7 +4616,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     [applyRect]
   );
-  const onResizePointerDown = useCallback13(
+  const onResizePointerDown = useCallback14(
     (e) => {
       if (!isPrimaryPointerPress3(e)) return;
       e.preventDefault();
@@ -4235,7 +4649,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
 }
 
 // src/useLibrary.ts
-import { useCallback as useCallback14, useEffect as useEffect16, useMemo as useMemo11, 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;
@@ -4249,21 +4663,21 @@ 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);
     if (volume) onChange?.(volume);
   }, [currentId, resolvedId, volumes, onChange]);
-  const index = useMemo11(
+  const index = useMemo12(
     () => resolvedId == null ? -1 : volumes.findIndex((v) => v.id === resolvedId),
     [resolvedId, volumes]
   );
-  const current = useMemo11(
+  const current = useMemo12(
     () => index >= 0 && index < volumes.length ? volumes[index] : null,
     [index, volumes]
   );
-  const activate = useCallback14(
+  const activate = useCallback15(
     (i) => {
       const v = volumes[i];
       if (!v) return;
@@ -4273,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;
@@ -4295,122 +4709,32 @@ function useLibrary(options) {
 }
 
 // src/useManuscriptLayout.ts
-import {
-  useCallback as useCallback15,
-  useEffect as useEffect17,
-  useLayoutEffect as useLayoutEffect5,
-  useRef as useRef19,
-  useState as useState19
-} 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 enableResize = options.enableResize ?? true;
-  const resizeDebounce = options.resizeDebounce ?? 120;
-  const [layout, setLayout] = useState19(null);
-  const [pageWidth, setPageWidth] = useState19(0);
-  const [pageHeight, setPageHeight] = useState19(0);
-  const [contentHeight, setContentHeight] = useState19(0);
-  const [elapsedMs, setElapsedMs] = useState19(0);
-  const requestIdRef = useRef19(0);
-  const layoutRef = useRef19(null);
-  layoutRef.current = layout;
-  const pendingRestore = useRef19(null);
-  const optionsRef = useRef19(options);
-  optionsRef.current = options;
-  const recompute = useCallback15(
-    async (opts = {}) => {
-      const blank = opts.blank ?? true;
-      const requestId = ++requestIdRef.current;
-      if (!(chapter && surface.current)) {
-        setLayout(null);
-        setPageWidth(0);
-        setPageHeight(0);
-        setContentHeight(0);
-        setElapsedMs(0);
-        return;
-      }
-      const captured = !blank && layoutRef.current ? optionsRef.current.capturePosition?.(layoutRef.current) ?? null : null;
-      pendingRestore.current = captured;
-      if (blank) setLayout(null);
-      const dims = book.computePageSize(surface.current);
-      setPageWidth(dims.pageWidth);
-      setPageHeight(dims.pageHeight);
-      setContentHeight(dims.contentHeight);
-      const t0 = performance.now();
-      const layouts = await book.layoutManuscript({ chapters: [chapter], dialect });
-      if (requestId !== requestIdRef.current) return;
-      const next = layouts.values().next().value ?? null;
-      layoutRef.current = next;
-      setLayout(next);
-      setElapsedMs(performance.now() - t0);
-    },
-    [book, chapter, dialect, surface]
-  );
-  useLayoutEffect5(() => {
-    requestIdRef.current++;
-    pendingRestore.current = null;
-    setLayout(null);
-    setPageWidth(0);
-    setPageHeight(0);
-    setContentHeight(0);
-    setElapsedMs(0);
-  }, [recompute]);
-  useEffect17(() => {
-    void recompute();
-    return () => {
-      requestIdRef.current++;
-    };
-  }, [recompute]);
-  useLayoutEffect5(() => {
-    const anchor = pendingRestore.current;
-    const restore = optionsRef.current.restorePosition;
-    if (!(layout && anchor && restore)) return;
-    pendingRestore.current = null;
-    restore(layout, anchor);
-  }, [layout]);
-  useEffect17(() => {
-    if (!enableResize) return;
-    const el = surface.current;
-    if (!el) return;
-    let timer = null;
-    let observed = false;
-    const clear = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
+  const signature = chapterSignature(chapter);
+  const chapterRef = useRef21(chapter);
+  chapterRef.current = chapter;
+  const source = useMemo13(() => {
+    if (signature === null) return null;
+    return {
+      measure: (el) => book.computePageSize(el),
+      layout: async () => {
+        const current = chapterRef.current;
+        if (!current) return null;
+        const layouts = await book.layoutManuscript({ chapters: [current], dialect });
+        return layouts.values().next().value ?? null;
       }
     };
-    const scheduleReflow = (immediate) => {
-      clear();
-      if (immediate) {
-        void recompute({ blank: false });
-        return;
-      }
-      timer = setTimeout(() => {
-        timer = null;
-        void recompute({ blank: false });
-      }, resizeDebounce);
-    };
-    if (typeof ResizeObserver !== "undefined") {
-      const observer = new ResizeObserver(() => {
-        const immediate = !observed;
-        observed = true;
-        scheduleReflow(immediate);
-      });
-      observer.observe(el);
-      return () => {
-        observer.disconnect();
-        clear();
-      };
-    }
-    const onWindowResize = () => scheduleReflow(false);
-    window.addEventListener("resize", onWindowResize);
-    return () => {
-      window.removeEventListener("resize", onWindowResize);
-      clear();
-    };
-  }, [surface, enableResize, resizeDebounce, recompute]);
-  return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute, pendingRestore };
+  }, [book, signature, dialect]);
+  return useSurfaceLayout(source, surface, {
+    ...options,
+    enableResize: options.enableResize ?? true,
+    resizeDebounce: options.resizeDebounce ?? 120
+  });
 }
 
 // src/useReadingPosition.ts
@@ -4418,28 +4742,30 @@ import {
   parseReadingPosition,
   serializeReadingPosition
 } from "@libraz/mejiro";
-import { useCallback as useCallback16, useEffect as useEffect18, useRef as useRef20, useState as useState20 } 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] = useState20(
-    () => 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;
   useEffect18(() => flushOnPageHide(pending.flush), [pending]);
-  useEffect18(() => {
-    setPosition(readStorage(storageRef.current, key, parseReadingPosition, null));
-    return pending.flush;
-  }, [key, pending]);
-  const onChangeRef = useRef20(options.onChange);
+  useEffect18(() => pending.flush, [key, pending]);
+  const onChangeRef = useRef22(options.onChange);
   onChangeRef.current = options.onChange;
   const save = useCallback16(
     (next) => {
-      setPosition(next);
+      setHydrated({ key, value: next });
       const currentStorage = storageRef.current;
       if (currentStorage) {
         pending.schedule(() => {
@@ -4451,7 +4777,7 @@ function useReadingPosition(options) {
     [key, throttleMs, pending]
   );
   const clear = useCallback16(() => {
-    setPosition(null);
+    setHydrated({ key, value: null });
     pending.cancel();
     removeStorage(storageRef.current, key);
     onChangeRef.current?.(null);