@libraz/mejiro-react 0.9.1 → 0.9.2

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,7 @@ 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 useCallback7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef12, useState as useState9 } from "react";
 
 // src/errors.ts
 import { assertEpubInputSize } from "@libraz/mejiro/epub";
@@ -208,8 +211,8 @@ import {
   useEffect as useEffect8,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect4,
-  useMemo as useMemo4,
-  useRef as useRef10,
+  useMemo as useMemo5,
+  useRef as useRef11,
   useState as useState8
 } from "react";
 
@@ -324,10 +327,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 +468,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 +478,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
@@ -1061,11 +1060,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 +1081,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 +1091,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 +1215,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,6 +1375,9 @@ function createDraftChangeTracker(chapters, key) {
 }
 
 // src/useChapterLayout.ts
+import { useMemo as useMemo4, useRef as useRef7 } from "react";
+
+// src/useSurfaceLayout.ts
 import {
   useCallback as useCallback2,
   useEffect as useEffect4,
@@ -1373,18 +1385,18 @@ import {
   useRef as useRef6,
   useState as useState4
 } from "react";
-function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
-  const enableResize = options.enableResize ?? true;
-  const resizeDebounce = options.resizeDebounce ?? 120;
+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);
+  layoutRef.current = layout;
   const requestIdRef = useRef6(0);
   const pendingRestore = useRef6(null);
-  layoutRef.current = layout;
+  const measuredBoxRef = useRef6(null);
   const optionsRef = useRef6(options);
   optionsRef.current = options;
   const recompute = useCallback2(
@@ -1392,8 +1404,9 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
       const blank = opts.blank ?? true;
       const o = optionsRef.current;
       const requestId = ++requestIdRef.current;
-      const chapter = epub?.chapters[chapterIndex];
-      if (!(chapter && surface.current)) {
+      const el = surface.current;
+      if (!(source && el)) {
+        measuredBoxRef.current = null;
         setLayout(null);
         setPageWidth(0);
         setPageHeight(0);
@@ -1401,22 +1414,36 @@ 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 (requestId !== requestIdRef.current) return;
+        layoutRef.current = next;
+        setLayout(next);
+        setElapsedMs(performance.now() - t0);
+      } catch (err) {
+        if (requestId !== requestIdRef.current) return;
+        const handler = optionsRef.current.onError;
+        if (!handler) throw err;
+        handler(toError(err));
+      }
     },
-    [book, epub, chapterIndex, surface]
+    [source, surface]
   );
+  const recomputeRef = useRef6(recompute);
+  recomputeRef.current = recompute;
+  const trigger = useCallback2((opts) => {
+    recomputeRef.current(opts).catch(() => {
+    });
+  }, []);
   useLayoutEffect2(() => {
     requestIdRef.current++;
     pendingRestore.current = null;
@@ -1427,7 +1454,8 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
     setElapsedMs(0);
   }, [recompute]);
   useEffect4(() => {
-    void recompute();
+    recompute().catch(() => {
+    });
     return () => {
       requestIdRef.current++;
     };
@@ -1454,18 +1482,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,35 +1513,46 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
       window.removeEventListener("resize", onWindowResize);
       clear();
     };
-  }, [surface, enableResize, resizeDebounce, recompute]);
-  return {
-    layout,
-    pageWidth,
-    pageHeight,
-    contentHeight,
-    elapsedMs,
-    recompute,
-    pendingRestore
-  };
+  }, [surface, enableResize, resizeDebounce, trigger]);
+  return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute, pendingRestore };
+}
+
+// src/useChapterLayout.ts
+function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
+  const optionsRef = useRef7(options);
+  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 useCallback3, useEffect as useEffect5, useRef as useRef8, 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 requestIdRef = useRef8(0);
+  const onLoadRef = useRef8(options.onLoad);
   onLoadRef.current = options.onLoad;
-  const onErrorRef = useRef7(options.onError);
+  const onErrorRef = useRef8(options.onError);
   onErrorRef.current = options.onError;
-  const fetchOptionsRef = useRef7(options.fetchOptions);
+  const fetchOptionsRef = useRef8(options.fetchOptions);
   fetchOptionsRef.current = options.fetchOptions;
-  const fetchEpubRef = useRef7(options.fetchEpub);
+  const fetchEpubRef = useRef8(options.fetchEpub);
   fetchEpubRef.current = options.fetchEpub;
-  const limitsRef = useRef7(options.limits);
+  const limitsRef = useRef8(options.limits);
   limitsRef.current = options.limits;
   const load = useCallback3(async (read) => {
     const requestId = ++requestIdRef.current;
@@ -1544,8 +1588,21 @@ function useEpub(options = {}) {
   );
   const defaultUrl = options.defaultUrl;
   useEffect5(() => {
-    if (defaultUrl) void loadUrl(defaultUrl);
+    if (!defaultUrl) return;
+    void loadUrl(defaultUrl);
+    const requestId = requestIdRef.current;
+    return () => {
+      if (requestIdRef.current !== requestId) return;
+      requestIdRef.current++;
+      setLoading(false);
+    };
   }, [defaultUrl, loadUrl]);
+  useEffect5(
+    () => () => {
+      requestIdRef.current++;
+    },
+    []
+  );
   const replaceEpub = useCallback3((book) => {
     requestIdRef.current++;
     setLoading(false);
@@ -1557,26 +1614,35 @@ function useEpub(options = {}) {
 
 // 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 useCallback4, useEffect as useEffect6, useRef as useRef9, useState as useState6 } from "react";
 function useMejiroBook(initial, options = {}) {
-  const bookRef = useRef8(null);
+  const bookRef = useRef9(null);
   if (!bookRef.current) bookRef.current = new MejiroBook(initial);
   const [snapshot, setLocal] = useState6(initial);
-  const optionsRef = useRef8(options);
+  const optionsRef = useRef9(options);
   optionsRef.current = options;
-  const pendingRef = useRef8(null);
+  const pendingRef = useRef9(null);
+  const flushGenerationRef = useRef9(0);
   const flush = useCallback4(() => {
     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) {
@@ -1627,7 +1693,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 useCallback5, useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef10, 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 +1723,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 = useRef10(options.onChange);
   onChangeRef.current = options.onChange;
   const [spreadIdx, setSpreadIdx] = useState7(0);
   const [indexSingle, setIndexSingle] = useState7(single);
@@ -1667,15 +1733,16 @@ function useSpread(layout, options = {}) {
   }
   const [spread, setSpread] = useState7(null);
   const [turning, setTurning] = useState7(false);
-  const layoutRef = useRef9(null);
+  const layoutRef = useRef10(null);
   layoutRef.current = layout;
-  const spreadIdxRef = useRef9(0);
+  const spreadIdxRef = useRef10(0);
   spreadIdxRef.current = spreadIdx;
-  const singleRef = useRef9(single);
+  const singleRef = useRef10(single);
   singleRef.current = single;
-  const turnTimerRef = useRef9(null);
-  const layoutGenerationRef = useRef9(0);
-  const lastEmittedRef = useRef9(null);
+  const turnTimerRef = useRef10(null);
+  const turnTargetRef = useRef10(null);
+  const layoutGenerationRef = useRef10(0);
+  const lastEmittedRef = useRef10(null);
   const totalPages = spread?.totalPages ?? 0;
   const totalSpreads = navigationCount(totalPages, single);
   const firstPage = firstPageOf(spreadIdx, single);
@@ -1695,6 +1762,7 @@ function useSpread(layout, options = {}) {
       clearTimeout(turnTimerRef.current);
       turnTimerRef.current = null;
     }
+    turnTargetRef.current = null;
     setTurning(false);
     setSpreadIdx(0);
     if (!layout) {
@@ -1716,28 +1784,44 @@ function useSpread(layout, options = {}) {
     }
     lastEmittedRef.current = { layout, spreadIdx };
   }, [layout, spreadIdx, layoutSpreadIdx]);
+  const navigationTarget = useCallback5(() => {
+    const pending = turnTargetRef.current;
+    if (!pending) return spreadIdxRef.current;
+    return indexOfPageIn(firstPageOf(pending.index, pending.single), singleRef.current);
+  }, []);
   const goTo = useCallback5(
     (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) => {
     if (!layoutRef.current) return;
@@ -1745,6 +1829,7 @@ function useSpread(layout, options = {}) {
       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)));
@@ -1757,8 +1842,8 @@ function useSpread(layout, options = {}) {
     },
     [layout, single]
   );
-  const next = useCallback5(() => goTo(spreadIdxRef.current + 1), [goTo]);
-  const prev = useCallback5(() => goTo(spreadIdxRef.current - 1), [goTo]);
+  const next = useCallback5(() => goTo(navigationTarget() + 1), [goTo, navigationTarget]);
+  const prev = useCallback5(() => goTo(navigationTarget() - 1), [goTo, navigationTarget]);
   useEffect7(() => {
     if (!enableKeyboard) return;
     const onKey = (e) => {
@@ -1823,10 +1908,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 +1935,49 @@ 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;
+    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);
+    settle();
+  };
+  return {
+    request: (anchor, target) => new Promise((resolve) => {
+      settle();
+      pending = { anchor, resolve, chapterRequested: 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,12 +2024,11 @@ function MejiroReaderInner(props, ref) {
     onPageRead,
     onChapterCompleted
   } = props;
-  const surfaceRef = useRef10(null);
-  const fileRef = useRef10(null);
+  const surfaceRef = useRef11(null);
+  const fileRef = useRef11(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
@@ -1924,7 +2057,7 @@ function MejiroReaderInner(props, ref) {
     return () => observer.disconnect();
   }, [spreadMode]);
   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,29 +2073,38 @@ 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 = useRef11(onError);
   onErrorRef.current = onError;
   const reportError = useCallback6((error) => onErrorRef.current?.(error), []);
   const {
     book,
     options: bookOptions,
-    setOptions
+    setOptions: applyBookOptions
   } = useMejiroBook(resolvedOptions, {
     debounceMs: OPTIONS_DEBOUNCE_MS,
     onError: reportError
   });
+  const lastApplyRef = useRef11(Promise.resolve());
+  const setOptions = useCallback6(
+    (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 = useRef11(optionsPropKey);
+  const resolvedOptionsRef = useRef11(resolvedOptions);
   resolvedOptionsRef.current = resolvedOptions;
   useEffect8(() => {
     if (syncedOptionsPropKeyRef.current === optionsPropKey) return;
@@ -1970,7 +2112,7 @@ function MejiroReaderInner(props, ref) {
     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 });
@@ -1991,15 +2133,19 @@ function MejiroReaderInner(props, ref) {
   const controlled = epubProp !== void 0 || manuscriptProp !== void 0;
   const isManuscriptSource = manuscriptProp !== void 0;
   const e = isManuscriptSource ? synthesizedEpub : controlled ? epubProp ?? null : epubCtx.epub;
+  const sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : epubProp;
+  const bookKey = controlled ? sourceKey : epubCtx.epub;
+  const chapter = clampChapter(chapterProp ?? chapterState, e);
+  const filePicker = enableDropZone && !controlled;
   useEffect8(() => {
     if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
   }, [epubCtx.error]);
-  const pageGeometryRef = useRef10(resolvedGeometry);
+  const pageGeometryRef = useRef11(resolvedGeometry);
   pageGeometryRef.current = resolvedGeometry;
-  const spreadAnchorRef = useRef10(() => null);
-  const spreadIdxPropRef = useRef10(spreadIdxProp);
+  const spreadAnchorRef = useRef11(() => null);
+  const spreadIdxPropRef = useRef11(spreadIdxProp);
   spreadIdxPropRef.current = spreadIdxProp;
-  const visibleAnchorRef = useRef10(
+  const visibleAnchorRef = useRef11(
     null
   );
   const layoutCtx = useChapterLayout(book, e, chapter, surfaceRef, {
@@ -2012,10 +2158,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 = useRef11(null);
+  const spreadChangedRef = useRef11(void 0);
   spreadChangedRef.current = (i) => {
+    reportedSpreadIdxRef.current = i;
     onSpreadChange?.(i);
     onSpreadIdxChange?.(i);
   };
@@ -2025,9 +2174,9 @@ function MejiroReaderInner(props, ref) {
     onChange: (i) => spreadChangedRef.current?.(i)
   });
   spreadAnchorRef.current = () => spreadCtx.anchorAt(spreadCtx.spreadIdx);
-  const indexOfPageRef = useRef10(spreadCtx.indexOfPage);
+  const indexOfPageRef = useRef11(spreadCtx.indexOfPage);
   indexOfPageRef.current = spreadCtx.indexOfPage;
-  const anchorSingleRef = useRef10(effectiveSingle);
+  const anchorSingleRef = useRef11(effectiveSingle);
   useLayoutEffect4(() => {
     const l = layoutCtx.layout;
     const flipped = anchorSingleRef.current !== effectiveSingle;
@@ -2035,7 +2184,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 = useRef11(spreadCtx.setSpread);
   setSpreadRef.current = spreadCtx.setSpread;
   useLayoutEffect4(() => {
     const anchor = layoutCtx.pendingRestore.current;
@@ -2046,10 +2195,8 @@ 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 = useRef11(optionsKey);
+  const recomputeRef = useRef11(layoutCtx.recompute);
   recomputeRef.current = layoutCtx.recompute;
   useEffect8(() => {
     if (optionsKeyRef.current === optionsKey) return;
@@ -2057,7 +2204,7 @@ function MejiroReaderInner(props, ref) {
     const timer = setTimeout(() => {
       void (async () => {
         try {
-          await setOptions({ ...bookOptionsRef.current });
+          await lastApplyRef.current;
           await recomputeRef.current({ blank: false });
         } catch (err) {
           reportError(toError(err));
@@ -2065,9 +2212,9 @@ 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);
+  const geometryKeyRef = useRef11(geometryKey);
   useEffect8(() => {
     if (geometryKeyRef.current === geometryKey) return;
     geometryKeyRef.current = geometryKey;
@@ -2077,7 +2224,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,13 +2237,12 @@ function MejiroReaderInner(props, ref) {
     }
     return result;
   }, [annotations, layoutCtx.layout, chapter, imageCtx.currentImages]);
-  const clearImagesRef = useRef10(imageCtx.clearImages);
+  const clearImagesRef = useRef11(imageCtx.clearImages);
   clearImagesRef.current = imageCtx.clearImages;
-  const onLoadRef = useRef10(onLoad);
+  const onLoadRef = useRef11(onLoad);
   onLoadRef.current = onLoad;
-  const eRef = useRef10(e);
+  const eRef = useRef11(e);
   eRef.current = e;
-  const sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : epubProp;
   useEffect8(() => {
     if (!controlled) return;
     if (chapterIsUncontrolled) setChapterState(0);
@@ -2104,16 +2250,19 @@ function MejiroReaderInner(props, ref) {
     book.clearCache();
     if (eRef.current) onLoadRef.current?.(eRef.current);
   }, [controlled, sourceKey, book, chapterIsUncontrolled]);
-  const imagesChapterRef = useRef10(chapter);
+  const imagesChapterRef = useRef11(chapter);
   useEffect8(() => {
     if (imagesChapterRef.current === chapter) return;
     imagesChapterRef.current = chapter;
     clearImagesRef.current();
   }, [chapter]);
-  const spreadGoToRef = useRef10(spreadCtx.goTo);
+  const spreadGoToRef = useRef11(spreadCtx.goTo);
   spreadGoToRef.current = spreadCtx.goTo;
-  const appliedSpreadIdxPropRef = useRef10(spreadIdxProp);
+  const appliedSpreadIdxPropRef = useRef11(spreadIdxProp);
+  const [hostTurn, setHostTurn] = useState8(0);
   useEffect8(() => {
+    const reported = reportedSpreadIdxRef.current;
+    reportedSpreadIdxRef.current = null;
     if (spreadIdxProp == null) {
       appliedSpreadIdxPropRef.current = spreadIdxProp;
       return;
@@ -2122,22 +2271,26 @@ 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]);
   useLayoutEffect4(() => {
     const next = spreadIdxPropRef.current;
     if (next == null || !layoutCtx.layout) return;
     setSpreadRef.current(next);
   }, [layoutCtx.layout]);
   const onChapter = useCallback6(
-    (i) => {
+    (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 onChapterRef = useRef11(onChapter);
+  onChapterRef.current = onChapter;
+  const listenersRef = useRef11(/* @__PURE__ */ new Map());
   const emit = useCallback6(
     (event, payload) => {
       const set = listenersRef.current.get(event);
@@ -2146,44 +2299,33 @@ function MejiroReaderInner(props, ref) {
     },
     []
   );
-  const pendingAnchorRef = useRef10(null);
-  const layoutOwnerRef = useRef10({
+  const layoutOwnerRef = useRef11({
     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]);
+  const owner = layoutOwnerRef.current;
+  const layout = owner.chapter === chapter && owner.book === bookKey ? layoutCtx.layout : null;
+  const anchorTarget = { book: epubCtx.loading ? null : e, chapter, layout };
+  const anchorTargetRef = useRef11(anchorTarget);
+  anchorTargetRef.current = anchorTarget;
+  const anchorResolverRef = useRef11(null);
+  anchorResolverRef.current ??= createAnchorResolver({
+    goToChapter: (i) => onChapterRef.current(i),
+    goToPage: (pageIdx) => spreadGoToRef.current(indexOfPageRef.current(pageIdx))
+  });
   useEffect8(() => {
-    tryApplyPendingAnchor();
-  }, [tryApplyPendingAnchor]);
-  useEffect8(
-    () => () => {
-      pendingAnchorRef.current?.resolve();
-      pendingAnchorRef.current = null;
-    },
-    []
-  );
-  const onPageReadRef = useRef10(onPageRead);
+    anchorResolverRef.current?.update(anchorTargetRef.current);
+  }, [anchorTarget.book, chapter, layout]);
+  useEffect8(() => () => anchorResolverRef.current?.dispose(), []);
+  const onPageReadRef = useRef11(onPageRead);
   onPageReadRef.current = onPageRead;
-  const onChapterCompletedRef = useRef10(onChapterCompleted);
+  const onChapterCompletedRef = useRef11(onChapterCompleted);
   onChapterCompletedRef.current = onChapterCompleted;
-  const trackLifecycleRef = useRef10(null);
+  const trackLifecycleRef = useRef11(null);
   trackLifecycleRef.current ??= createLifecycleTracker({
     spreadChanged: (ch, spreadIdx) => emit("spreadChanged", { chapter: ch, spreadIdx }),
     chapterFinished: (ch) => {
@@ -2194,8 +2336,9 @@ function MejiroReaderInner(props, ref) {
   });
   useEffect8(() => {
     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,7 +2346,7 @@ function MejiroReaderInner(props, ref) {
     layout,
     spreadIdxProp
   ]);
-  const prevTurningRef = useRef10(false);
+  const prevTurningRef = useRef11(false);
   useEffect8(() => {
     if (spreadCtx.turning && !prevTurningRef.current) {
       emit("turnStart", { from: spreadCtx.spreadIdx });
@@ -2225,12 +2368,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 +2407,7 @@ function MejiroReaderInner(props, ref) {
       onChapter,
       chapter,
       layout,
-      setOptions,
-      tryApplyPendingAnchor
+      setOptions
     ]
   );
   const editable = {
@@ -2293,7 +2430,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 +2462,7 @@ function MejiroReaderInner(props, ref) {
           fontLabel
         }
       ),
-      enableDropZone && /* @__PURE__ */ jsx13(
+      filePicker && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -2393,7 +2530,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(
@@ -2476,6 +2613,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 +2631,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;
@@ -2544,9 +2731,9 @@ function MejiroEditor({
   onError
 }) {
   const messages = useI18n();
-  const imageInputRef = useRef11(null);
-  const textareaRef = useRef11(null);
-  const readerRef = useRef11(null);
+  const imageInputRef = useRef12(null);
+  const textareaRef = useRef12(null);
+  const readerRef = useRef12(null);
   const [editor, setEditor] = useState9(null);
   const [loading, setLoading] = useState9(false);
   const [error, setError] = useState9(null);
@@ -2556,16 +2743,17 @@ 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 loadRequestIdRef = useRef12(0);
+  const onLoadRef = useRef12(onLoad);
+  const onErrorRef = useRef12(onError);
+  const limitsRef = useRef12(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]);
@@ -2632,7 +2820,7 @@ function MejiroEditor({
       cancelled = true;
     };
   }, [epubUrl, loadBufferForRequest, reportError]);
-  const syncedRef = useRef11(
+  const syncedRef = useRef12(
     null
   );
   useEffect9(() => {
@@ -2659,7 +2847,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 +2860,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,
@@ -2721,6 +2890,7 @@ function MejiroEditor({
   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);
@@ -2729,12 +2899,7 @@ function MejiroEditor({
       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);
+      downloadEpub(buffer, `${editor.title || "edited"}.epub`);
     }, reportError);
   }
   return /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor", children: [
@@ -2788,19 +2953,29 @@ function MejiroEditor({
             {
               ref: textareaRef,
               value: text,
+              readOnly: sceneBreak,
               onChange: (event) => setText(event.target.value),
               onSelect: captureRubyRange
             }
           ),
-          /* @__PURE__ */ jsx14("button", { type: "button", className: "mejiro-editor-primary", onClick: applyText, children: messages.editorApplyText })
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "mejiro-editor-primary",
+              disabled: sceneBreak,
+              onClick: () => commitEdit(),
+              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 }),
           /* @__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 +2990,7 @@ function MejiroEditor({
             {
               type: "button",
               className: "mejiro-editor-primary",
-              disabled: textDirty || !rubyText.trim(),
+              disabled: !(rubyRange && rubyText.trim()),
               onClick: applyRuby,
               children: messages.editorApplyRuby
             }
@@ -2833,6 +3008,7 @@ function MejiroEditor({
               hidden: true,
               onChange: (event) => {
                 const file = event.target.files?.[0];
+                event.target.value = "";
                 if (file) void addImage(file);
               }
             }
@@ -2851,11 +3027,11 @@ 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;
@@ -2863,15 +3039,15 @@ function paragraphBlockId(chapter, paragraphIndex) {
 
 // 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 { useCallback as useCallback9, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef15, useState as useState12 } 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 useRef13,
   useState as useState10
 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -2888,12 +3064,13 @@ var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2(
   onCompositionEnd,
   ...rest
 }, ref) {
-  const textareaRef = useRef12(null);
-  const overlayRef = useRef12(null);
+  const textareaRef = useRef13(null);
+  const overlayRef = useRef13(null);
   useImperativeHandle2(ref, () => textareaRef.current, []);
   const [isComposing, setIsComposing] = useState10(false);
-  const lastSegmentsRef = useRef12(null);
-  const segments = useMemo6(() => {
+  const [composingValue, setComposingValue] = useState10("");
+  const lastSegmentsRef = useRef13(null);
+  const segments = useMemo7(() => {
     if (isComposing && lastSegmentsRef.current) return lastSegmentsRef.current;
     const next = buildSegments(value, dialect);
     lastSegmentsRef.current = next;
@@ -2932,14 +3109,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) => {
@@ -2981,7 +3163,7 @@ function buildSegments(text, dialect) {
 }
 
 // src/useManuscriptDraft.ts
-import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef13, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef14, useState as useState11 } from "react";
 var DEFAULT_DELAY = 800;
 function defaultChapter(existing, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
   const index = existing.length;
@@ -2996,46 +3178,63 @@ function useManuscriptDraft(options = {}) {
     defaultChapterTitle,
     defaultChapterBody
   } = options;
-  const titleForRef = useRef13(defaultChapterTitle);
+  const titleForRef = useRef14(defaultChapterTitle);
   titleForRef.current = defaultChapterTitle;
-  const bodyForRef = useRef13(defaultChapterBody);
+  const bodyForRef = useRef14(defaultChapterBody);
   bodyForRef.current = defaultChapterBody;
   const [chapters, setChaptersState] = useState11(
     () => options.initialChapters?.length ? options.initialChapters : [defaultChapter([], defaultChapterTitle, defaultChapterBody)]
   );
   const [selected, setSelectedState] = useState11(0);
   const [autosaveError, setAutosaveError] = useState11(null);
-  const saveRef = useRef13(onAutosave);
+  const saveRef = useRef14(onAutosave);
   saveRef.current = onAutosave;
-  const payloadRef = useRef13(autosavePayload);
+  const payloadRef = useRef14(autosavePayload);
   payloadRef.current = autosavePayload;
-  const chaptersRef = useRef13(chapters);
+  const chaptersRef = useRef14(chapters);
   chaptersRef.current = chapters;
-  const selectedRef = useRef13(selected);
+  const selectedRef = useRef14(selected);
   selectedRef.current = selected;
-  const trackerRef = useRef13(null);
+  const trackerRef = useRef14(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 dirtyRef = useRef14(false);
+  const mountedRef = useRef14(true);
+  const revisionRef = useRef14(0);
+  const inFlightRef = useRef14(false);
+  const flushQueuedRef = useRef14(false);
   const flushAutosave = useCallback8(() => {
     const callback = saveRef.current;
-    if (!(callback && dirtyRef.current) || 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(() => {
@@ -3153,14 +3352,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":
@@ -3207,8 +3398,8 @@ function MejiroManuscriptEditor({
   panelSide = "right"
 }) {
   const messages = useI18n();
-  const coverInputRef = useRef14(null);
-  const bodyTextareaRef = useRef14(null);
+  const coverInputRef = useRef15(null);
+  const bodyTextareaRef = useRef15(null);
   const titleControlled = onTitleChange !== void 0;
   const authorControlled = onAuthorChange !== void 0;
   const coverControlled = onCoverChange !== void 0;
@@ -3308,7 +3499,7 @@ function MejiroManuscriptEditor({
         const buffer = await project.export(assetResolver ? { assetResolver } : void 0);
         setExportError(null);
         onExport?.(buffer);
-        downloadEpub(buffer, title);
+        downloadEpub(buffer, `${title || "book"}.epub`);
       },
       (error) => {
         setExportError(error);
@@ -3327,7 +3518,7 @@ function MejiroManuscriptEditor({
     onExport,
     title
   ]);
-  const previewManuscript = useMemo7(
+  const previewManuscript = useMemo8(
     () => chapters.map((chapter) => ({
       id: chapter.id,
       title: chapter.title || messages.untitled,
@@ -3441,7 +3632,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 +3692,7 @@ function MejiroShelf({
 }
 
 // src/MejiroToc.tsx
-import { useMemo as useMemo8, useState as useState13 } from "react";
+import { useMemo as useMemo9, useState as useState13 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function buildEntries(epub, messages) {
   return epub.chapters.map((ch, i) => {
@@ -3525,8 +3716,8 @@ function MejiroToc({
   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 entries = useMemo9(() => buildEntries(epub, messages), [epub, messages]);
+  const filtered = useMemo9(() => {
     if (!query) return entries;
     const needle = query.toLowerCase();
     return entries.filter(
@@ -3576,7 +3767,7 @@ import {
   serializeAnnotations,
   sortAnnotations
 } from "@libraz/mejiro";
-import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef15, useState as useState14 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef16, useState as useState14 } from "react";
 function parseSorted(raw) {
   return sortAnnotations(parseAnnotations(raw));
 }
@@ -3586,14 +3777,14 @@ function useAnnotations(options) {
   const [annotations, setAnnotations] = useState14(
     () => readStorage(storage, key, parseSorted, [])
   );
-  const storageRef = useRef15(storage);
+  const storageRef = useRef16(storage);
   storageRef.current = storage;
-  const annotationsRef = useRef15(annotations);
+  const annotationsRef = useRef16(annotations);
   const applyNext = useCallback10((next) => {
     annotationsRef.current = next;
     setAnnotations(next);
   }, []);
-  const pendingRef = useRef15(null);
+  const pendingRef = useRef16(null);
   if (!pendingRef.current) pendingRef.current = createPendingWrite();
   const pending = pendingRef.current;
   useEffect12(() => flushOnPageHide(pending.flush), [pending]);
@@ -3601,7 +3792,7 @@ function useAnnotations(options) {
     applyNext(readStorage(storageRef.current, key, parseSorted, []));
     return pending.flush;
   }, [key, applyNext, pending]);
-  const onChangeRef = useRef15(options.onChange);
+  const onChangeRef = useRef16(options.onChange);
   onChangeRef.current = options.onChange;
   const commit = useCallback10(
     (next) => {
@@ -3669,7 +3860,7 @@ 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 useCallback11, useEffect as useEffect13, useMemo as useMemo10, useRef as useRef17, useState as useState15 } from "react";
 function useEditableEpub(options = {}) {
   const [editor, setEditor] = useState15(null);
   const [loading, setLoading] = useState15(false);
@@ -3680,20 +3871,20 @@ function useEditableEpub(options = {}) {
     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 requestIdRef = useRef17(0);
+  const onLoadRef = useRef17(options.onLoad);
+  const onErrorRef = useRef17(options.onError);
+  const onExportRef = useRef17(options.onExport);
+  const limitsRef = useRef17(options.limits);
+  const assetResolverRef = useRef17(options.assetResolver);
   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 = useRef17(editor);
   editorRef.current = editor;
-  const selectionRef = useRef16(selection);
+  const selectionRef = useRef17(selection);
   selectionRef.current = selection;
   const loadBufferWithRequest = useCallback11(
     async (buffer, requestId) => {
@@ -3773,7 +3964,7 @@ function useEditableEpub(options = {}) {
   }, [options.defaultUrl, loadUrl]);
   const book = editor?.book ?? null;
   const selectedParagraph = book?.chapters[selection.chapter]?.paragraphs[selection.paragraph] ?? null;
-  const previewBook = useMemo9(() => {
+  const previewBook = useMemo10(() => {
     void revision;
     return book ? cloneEditableEpubBook2(book) : null;
   }, [book, revision]);
@@ -3870,7 +4061,7 @@ 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";
+import { useCallback as useCallback12, useEffect as useEffect14, useMemo as useMemo11, useRef as useRef18, useState as useState16 } from "react";
 function useEpubProject(options = {}) {
   const defaultTitle = options.defaultChapterTitle;
   const defaultBody = options.defaultChapterBody;
@@ -3886,22 +4077,22 @@ function useEpubProject(options = {}) {
   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);
+  const previewRequestIdRef = useRef18(0);
+  const onPreviewRef = useRef18(options.onPreview);
+  const onExportRef = useRef18(options.onExport);
   onPreviewRef.current = options.onPreview;
   onExportRef.current = options.onExport;
-  const assetResolverRef = useRef17(options.assetResolver);
+  const assetResolverRef = useRef18(options.assetResolver);
   assetResolverRef.current = options.assetResolver;
-  const metadataRef = useRef17(metadata);
+  const metadataRef = useRef18(metadata);
   metadataRef.current = metadata;
-  const chaptersRef = useRef17(chapters);
+  const chaptersRef = useRef18(chapters);
   chaptersRef.current = chapters;
-  const selectedRef = useRef17(selectedChapter);
+  const selectedRef = useRef18(selectedChapter);
   selectedRef.current = selectedChapter;
-  const coverRef = useRef17(cover);
+  const coverRef = useRef18(cover);
   coverRef.current = cover;
-  const assetsRef = useRef17(assets);
+  const assetsRef = useRef18(assets);
   assetsRef.current = assets;
   const buildProject = useCallback12(() => {
     const currentCover = coverRef.current;
@@ -3956,7 +4147,7 @@ function useEpubProject(options = {}) {
   }, [assets, buildProject, chapters, cover, exportOptions, metadata, options.debounceMs]);
   const currentChapter = chapters[selectedChapter] ?? chapters[0] ?? null;
   const setMetadata = useCallback12((patch) => {
-    const next = { ...metadataRef.current, ...patch };
+    const next = mergeMetadata(metadataRef.current, patch);
     metadataRef.current = next;
     setMetadataState(next);
   }, []);
@@ -4051,7 +4242,7 @@ function useEpubProject(options = {}) {
     onExportRef.current?.(buffer);
     return buffer;
   }, [buildProject, exportOptions]);
-  return useMemo10(
+  return useMemo11(
     () => ({
       metadata,
       chapters,
@@ -4098,6 +4289,11 @@ function useEpubProject(options = {}) {
     ]
   );
 }
+function mergeMetadata(current, patch) {
+  const next = { ...current, ...patch };
+  if (!next.identifier?.trim()) next.identifier = current.identifier;
+  return next;
+}
 function initialMetadata(patch = {}) {
   const metadata = mergeDefined(
     { title: "\u65B0\u3057\u3044\u4F5C\u54C1", language: "ja" },
@@ -4116,7 +4312,7 @@ import { createOverlayDragSession as createOverlayDragSession2, isPrimaryPointer
 import {
   useCallback as useCallback13,
   useEffect as useEffect15,
-  useRef as useRef18,
+  useRef as useRef19,
   useState as useState17
 } from "react";
 function useImageOverlay(layout, spreadIdx, onUpdate, options) {
@@ -4126,15 +4322,17 @@ 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 = useRef19(imageRect);
   rectRef.current = imageRect;
-  const layoutRef = useRef18(layout);
+  const layoutRef = useRef19(layout);
   layoutRef.current = layout;
-  const spreadRef = useRef18(spreadIdx);
+  const spreadRef = useRef19(spreadIdx);
   spreadRef.current = spreadIdx;
-  const onUpdateRef = useRef18(onUpdate);
+  const onUpdateRef = useRef19(onUpdate);
   onUpdateRef.current = onUpdate;
-  const activeDragCleanupsRef = useRef18(/* @__PURE__ */ new Set());
+  const marginRef = useRef19(margin);
+  marginRef.current = margin;
+  const activeDragCleanupsRef = useRef19(/* @__PURE__ */ new Set());
   useEffect15(
     () => () => {
       for (const cleanup of activeDragCleanupsRef.current) cleanup();
@@ -4142,17 +4340,14 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     []
   );
-  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 });
+  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: marginRef.current }] : void 0;
+    const spread = lo.syncImages(spreadRef.current, images);
+    onUpdateRef.current(spread);
+  }, []);
+  const syncedRef = useRef19({ layout, spreadIdx, margin });
   useEffect15(() => {
     const prev = syncedRef.current;
     syncedRef.current = { layout, spreadIdx, margin };
@@ -4165,16 +4360,21 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   }, [layout, spreadIdx, margin, syncToLayout]);
   const toggleImage = useCallback13(() => {
     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(
     (rect) => {
+      if (rectRef.current === null) return;
+      rectRef.current = rect;
       setImageRect(rect);
       syncToLayout(rect);
     },
@@ -4235,7 +4435,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 useCallback14, useEffect as useEffect16, 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;
@@ -4255,11 +4455,11 @@ function useLibrary(options) {
     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]
   );
@@ -4295,122 +4495,24 @@ 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 } from "react";
 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 scheduleReflow = (immediate) => {
-      clear();
-      if (immediate) {
-        void recompute({ blank: false });
-        return;
+  const source = useMemo13(() => {
+    if (!chapter) return null;
+    return {
+      measure: (el) => book.computePageSize(el),
+      layout: async () => {
+        const layouts = await book.layoutManuscript({ chapters: [chapter], dialect });
+        return layouts.values().next().value ?? null;
       }
-      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, chapter, dialect]);
+  return useSurfaceLayout(source, surface, {
+    ...options,
+    enableResize: options.enableResize ?? true,
+    resizeDebounce: options.resizeDebounce ?? 120
+  });
 }
 
 // src/useReadingPosition.ts
@@ -4418,11 +4520,11 @@ import {
   parseReadingPosition,
   serializeReadingPosition
 } from "@libraz/mejiro";
-import { useCallback as useCallback16, useEffect as useEffect18, useRef as useRef20, useState as useState20 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect17, useRef as useRef20, useState as useState19 } from "react";
 function useReadingPosition(options) {
   const { key, throttleMs = 250 } = options;
   const storage = options.storage ?? resolveDefaultStorage();
-  const [position, setPosition] = useState20(
+  const [position, setPosition] = useState19(
     () => readStorage(storage, key, parseReadingPosition, null)
   );
   const storageRef = useRef20(storage);
@@ -4430,14 +4532,14 @@ function useReadingPosition(options) {
   const pendingRef = useRef20(null);
   if (!pendingRef.current) pendingRef.current = createPendingWrite();
   const pending = pendingRef.current;
-  useEffect18(() => flushOnPageHide(pending.flush), [pending]);
-  useEffect18(() => {
+  useEffect17(() => flushOnPageHide(pending.flush), [pending]);
+  useEffect17(() => {
     setPosition(readStorage(storageRef.current, key, parseReadingPosition, null));
     return pending.flush;
   }, [key, pending]);
   const onChangeRef = useRef20(options.onChange);
   onChangeRef.current = options.onChange;
-  const save = useCallback16(
+  const save = useCallback15(
     (next) => {
       setPosition(next);
       const currentStorage = storageRef.current;
@@ -4450,7 +4552,7 @@ function useReadingPosition(options) {
     },
     [key, throttleMs, pending]
   );
-  const clear = useCallback16(() => {
+  const clear = useCallback15(() => {
     setPosition(null);
     pending.cancel();
     removeStorage(storageRef.current, key);