@libraz/mejiro-react 0.9.0 → 0.9.1

package/dist/index.js

@@ -61,7 +61,9 @@ function MejiroChapterNav({
         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.filter((p) => p.headingLevel && p.text.trim() && p.text.trim() !== title).slice(0, 3);
+        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",
           {
@@ -74,7 +76,7 @@ function MejiroChapterNav({
               /* @__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.text)) })
+                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)) })
               ] })
             ]
           }
@@ -91,6 +93,17 @@ function MejiroChapterNav({
 // src/MejiroDropZone.tsx
 import { useRef, useState } from "react";
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function matchesAccept(accept, file) {
+  const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
 function MejiroDropZone({
   accept = ".epub",
   validateFile,
@@ -104,7 +117,7 @@ function MejiroDropZone({
   const [dragover, setDragover] = useState(false);
   const isValid = (file) => {
     if (validateFile) return validateFile(file);
-    return file.name.endsWith(".epub");
+    return matchesAccept(accept, file);
   };
   const rootClass = ["mejiro-reader-drop-zone", dragover ? "is-dragover" : "", className ?? ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs2(
@@ -160,7 +173,30 @@ import {
   EditableEpub,
   exportEditableEpub
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef11, useState as useState9 } from "react";
+
+// src/errors.ts
+import { assertEpubInputSize } from "@libraz/mejiro/epub";
+function toError(cause) {
+  return cause instanceof Error ? cause : new Error(String(cause));
+}
+async function fetchEpubBuffer(url, init) {
+  const res = init ? await fetch(url, init) : await fetch(url);
+  if (!res.ok) throw new Error(`Failed to load EPUB: ${res.status}`);
+  return res.arrayBuffer();
+}
+async function readEpubFile(file, limits) {
+  assertEpubInputSize(file.size, limits);
+  return file.arrayBuffer();
+}
+async function withErrorReporting(task, report) {
+  try {
+    return await task();
+  } catch (cause) {
+    report(toError(cause));
+    return void 0;
+  }
+}
 
 // src/MejiroReader.tsx
 import { DEFAULT_BOOK_OPTIONS, DEFAULT_PAGE_GEOMETRY } from "@libraz/mejiro/book";
@@ -169,12 +205,12 @@ import { manuscriptToEpubBook } from "@libraz/mejiro/epub";
 import {
   forwardRef,
   useCallback as useCallback6,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo4,
-  useRef as useRef9,
-  useState as useState7
+  useRef as useRef10,
+  useState as useState8
 } from "react";
 
 // src/MejiroPageIndicator.tsx
@@ -190,14 +226,59 @@ function MejiroPageIndicator({ current, total }) {
 // src/MejiroScrollView.tsx
 import { normalizeFontFamily as normalizeFontFamily2 } from "@libraz/mejiro/browser";
 import {
-  useEffect,
+  useEffect as useEffect2,
   useLayoutEffect,
-  useMemo as useMemo2,
-  useRef as useRef2
+  useMemo as useMemo3,
+  useRef as useRef3
 } from "react";
 
+// src/MejiroImageOverlay.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function MejiroImageOverlay({
+  rect,
+  label,
+  onOverlayPointerDown,
+  onResizePointerDown,
+  onClose
+}) {
+  const messages = useI18n();
+  const resolvedLabel = label ?? messages.imageButton;
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: "mejiro-reader-image-overlay",
+      style: {
+        left: rect.x,
+        top: rect.y,
+        width: rect.w,
+        height: rect.h
+      },
+      onPointerDown: onOverlayPointerDown,
+      children: [
+        /* @__PURE__ */ jsxs4("div", { className: "mejiro-reader-image-overlay-label", children: [
+          /* @__PURE__ */ jsx4("div", { className: "mejiro-reader-image-overlay-icon" }),
+          /* @__PURE__ */ jsx4("span", { children: resolvedLabel })
+        ] }),
+        /* @__PURE__ */ jsx4("div", { className: "mejiro-reader-image-overlay-resize", onPointerDown: onResizePointerDown }),
+        /* @__PURE__ */ jsx4(
+          "button",
+          {
+            type: "button",
+            "aria-label": messages.imageRemoveButton,
+            title: messages.imageRemoveButton,
+            className: "mejiro-reader-image-overlay-close",
+            onPointerDown: (e) => e.stopPropagation(),
+            onClick: () => onClose?.()
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/MejiroPageView.tsx
 import { normalizeFontFamily } from "@libraz/mejiro/browser";
+import { paragraphClassName as paragraphClassName2 } from "@libraz/mejiro/render";
 
 // src/MejiroPage.tsx
 import { paragraphClassName } from "@libraz/mejiro/render";
@@ -207,12 +288,12 @@ import {
   segmentToInlineNode
 } from "@libraz/mejiro/render";
 import { createElement, Fragment as Fragment2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function renderSegment(segment, key) {
   return renderInlineNode(segmentToInlineNode(segment), key);
 }
 function renderInlineNode(node, key) {
-  if (node.type === "text") return /* @__PURE__ */ jsx4(Fragment2, { children: node.text }, key);
+  if (node.type === "text") return /* @__PURE__ */ jsx5(Fragment2, { children: node.text }, key);
   return createElement(
     node.tag,
     {
@@ -226,33 +307,36 @@ function renderInlineNode(node, key) {
 }
 
 // src/MejiroPage.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function renderLine(line, lineIndex) {
   const nodes = [];
   if (lineIndex > 0) {
-    nodes.push(/* @__PURE__ */ jsx5("br", {}, `br-${lineIndex}`));
+    nodes.push(/* @__PURE__ */ jsx6("br", {}, `br-${lineIndex}`));
   }
   for (let i = 0; i < line.segments.length; i++) {
     nodes.push(renderSegment(line.segments[i], `${lineIndex}-${i}`));
   }
   return nodes;
 }
+function paragraphScaleStyle(scale) {
+  return scale == null ? void 0 : { "--mejiro-paragraph-scale": scale };
+}
 function MejiroPage({ page, className, style }) {
   const rootClass = className ? `mejiro-page ${className}` : "mejiro-page";
-  return /* @__PURE__ */ jsx5("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
+  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
     );
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: paragraphs have no stable ID
-      /* @__PURE__ */ jsx5("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
+      /* @__PURE__ */ jsx6("div", { className: paraClass, style: paragraphScaleStyle(paragraph.scale), children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
     );
   }) });
 }
 
 // src/MejiroPageView.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function MejiroPageView({
   result,
   fontFamily,
@@ -264,33 +348,307 @@ function MejiroPageView({
   if (result.hasImages || slotMode) {
     const rootClass = className ? `mejiro-page-slots ${className}` : "mejiro-page-slots";
     const fontFamilyCss = fontFamily != null ? normalizeFontFamily(fontFamily) : void 0;
-    return /* @__PURE__ */ jsx6("div", { className: rootClass, style: { position: "relative", ...style }, children: result.lines.map((line, i) => {
-      const slot = result.slots[i];
-      if (!slot || slot.height <= 0) return null;
-      const colStyle = {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: rootClass,
+        style: { position: "relative", fontFamily: fontFamilyCss, ...style },
+        children: result.lines.map((line, i) => {
+          const slot = result.slots[i];
+          if (!slot || slot.height <= 0) return null;
+          const colStyle = {
+            position: "absolute",
+            writingMode: "vertical-rl",
+            overflow: "hidden",
+            margin: 0,
+            right: slot.xPos,
+            top: slot.yStart,
+            height: slot.height,
+            fontSize: line.fontSize,
+            lineHeight: lineSpacing
+          };
+          return /* @__PURE__ */ jsx7(
+            "div",
+            {
+              className: paragraphClassName2(line.kind, line.headingLevel),
+              style: colStyle,
+              children: line.segments.map((seg, si) => renderSegment(seg, `${i}-${si}`))
+            },
+            i
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7(MejiroPage, { page: result.page, className, style });
+}
+
+// src/MejiroSelectionLayer.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function MejiroSelectionLayer({
+  rects,
+  side,
+  className,
+  style,
+  rectClassName,
+  rectStyle
+}) {
+  const wrapperClass = className ? `mejiro-selection-layer ${className}` : "mejiro-selection-layer";
+  const rectClass = rectClassName ?? "mejiro-selection-rect";
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: wrapperClass,
+      style: {
         position: "absolute",
-        writingMode: "vertical-rl",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        right: slot.xPos,
-        top: slot.yStart,
-        height: slot.height,
-        fontSize: line.fontSize,
-        fontFamily: fontFamilyCss,
-        lineHeight: lineSpacing,
-        fontWeight: line.headingLevel != null ? 700 : void 0
+        inset: 0,
+        pointerEvents: "none",
+        ...style
+      },
+      children: rects.map((r, i) => {
+        if (r.side !== side) return null;
+        const posStyle = side === "right" ? { left: r.x, top: r.y } : { right: -(r.x + r.width), top: r.y };
+        return /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: rectClass,
+            style: {
+              position: "absolute",
+              width: r.width,
+              height: r.height,
+              ...posStyle,
+              ...r.color != null ? { backgroundColor: r.color } : null,
+              ...rectStyle
+            }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/useMultiImageOverlay.ts
+import { createOverlayDragSession, isPrimaryPointerPress } from "@libraz/mejiro/browser";
+import {
+  useCallback,
+  useEffect,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+var nextId = 0;
+function applyImages(layout, images, spreads, margin) {
+  for (const si of spreads) {
+    const bookImages = (images.get(si) ?? []).map((it) => ({
+      x: it.rect.x,
+      y: it.rect.y,
+      w: it.rect.w,
+      h: it.rect.h,
+      margin
+    }));
+    layout.setImages(si, bookImages);
+  }
+}
+function overlayPageSide(rect) {
+  return rect.x + rect.w / 2 < 0 ? "left" : "right";
+}
+function useMultiImageOverlay(layout, spreadIdx, options = {}) {
+  const defW = options.defaultWidth ?? 120;
+  const defH = options.defaultHeight ?? 160;
+  const defX = options.defaultX ?? 80;
+  const defY = options.defaultY ?? 100;
+  const margin = options.margin;
+  const [images, setImages] = useState2(() => /* @__PURE__ */ new Map());
+  const imagesRef = useRef2(images);
+  imagesRef.current = images;
+  const layoutRef = useRef2(null);
+  layoutRef.current = layout;
+  const spreadIdxRef = useRef2(spreadIdx);
+  spreadIdxRef.current = spreadIdx;
+  const onUpdateRef = useRef2(options.onUpdate);
+  onUpdateRef.current = options.onUpdate;
+  const activeDragCleanupsRef = useRef2(/* @__PURE__ */ new Set());
+  useEffect(
+    () => () => {
+      for (const cleanup of activeDragCleanupsRef.current) cleanup();
+      activeDragCleanupsRef.current.clear();
+    },
+    []
+  );
+  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 appliedRef = useRef2({
+    layout: null,
+    margin
+  });
+  if (layout && (appliedRef.current.layout !== layout || appliedRef.current.margin !== margin)) {
+    appliedRef.current = { layout, margin };
+    applyImages(layout, imagesRef.current, [...imagesRef.current.keys()], margin);
+  }
+  const commit = useCallback(
+    (next, affectedSpread) => {
+      imagesRef.current = next;
+      setImages(next);
+      syncSpreads([affectedSpread]);
+    },
+    [syncSpreads]
+  );
+  const findById = useCallback(
+    (id) => {
+      for (const [s, list] of imagesRef.current) {
+        const i = list.findIndex((it) => it.id === id);
+        if (i >= 0) return { spread: s, index: i, item: list[i] };
+      }
+      return null;
+    },
+    []
+  );
+  const addImage = useCallback(
+    (overrides) => {
+      const si = spreadIdxRef.current;
+      const list = imagesRef.current.get(si) ?? [];
+      const last = list[list.length - 1];
+      const baseX = last ? last.rect.x - 100 : defX;
+      const baseY = last ? last.rect.y + 40 : defY;
+      nextId += 1;
+      const item = {
+        id: `mejiro-img-${nextId}`,
+        rect: {
+          x: overrides?.x ?? baseX,
+          y: overrides?.y ?? baseY,
+          w: overrides?.w ?? defW,
+          h: overrides?.h ?? defH
+        }
       };
-      return (
-        // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable ID
-        /* @__PURE__ */ jsx6("div", { style: colStyle, children: line.segments.map((seg, si) => renderSegment(seg, `${i}-${si}`)) }, i)
+      const next = new Map(imagesRef.current);
+      next.set(si, [...list, item]);
+      commit(next, si);
+      return item;
+    },
+    [defX, defY, defW, defH, commit]
+  );
+  const removeImage = useCallback(
+    (id) => {
+      const found = findById(id);
+      if (!found) return;
+      const next = new Map(imagesRef.current);
+      const list = (next.get(found.spread) ?? []).filter((it) => it.id !== id);
+      if (list.length === 0) next.delete(found.spread);
+      else next.set(found.spread, list);
+      commit(next, found.spread);
+    },
+    [findById, commit]
+  );
+  const updateImage = useCallback(
+    (id, rect) => {
+      const found = findById(id);
+      if (!found) return;
+      const next = new Map(imagesRef.current);
+      const list = (next.get(found.spread) ?? []).map(
+        (it) => it.id === id ? { ...it, rect: { ...it.rect, ...rect } } : it
       );
-    }) });
-  }
-  return /* @__PURE__ */ jsx6(MejiroPage, { page: result.page, className, style });
+      next.set(found.spread, list);
+      commit(next, found.spread);
+    },
+    [findById, commit]
+  );
+  const clearImages = useCallback(
+    (target) => {
+      if (target == null) {
+        const old = imagesRef.current;
+        imagesRef.current = /* @__PURE__ */ new Map();
+        setImages(/* @__PURE__ */ new Map());
+        layoutRef.current?.clearImages();
+        if (layoutRef.current) {
+          for (const si of old.keys()) onUpdateRef.current?.(layoutRef.current.getSpread(si));
+        }
+      } else {
+        const next = new Map(imagesRef.current);
+        next.delete(target);
+        commit(next, target);
+      }
+    },
+    [commit]
+  );
+  const onOverlayPointerDown = useCallback(
+    (id, e) => {
+      if (!isPrimaryPointerPress(e)) return;
+      e.preventDefault();
+      const found = findById(id);
+      if (!found) return;
+      const target = e.currentTarget;
+      createOverlayDragSession({
+        mode: "move",
+        rect: found.item.rect,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.nativeEvent.pointerId,
+        captureElement: target,
+        activeElement: target,
+        dragClass: "is-dragging",
+        registry: activeDragCleanupsRef.current,
+        onChange: (rect) => updateImage(id, rect)
+      });
+    },
+    [findById, updateImage]
+  );
+  const onResizePointerDown = useCallback(
+    (id, e) => {
+      if (!isPrimaryPointerPress(e)) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const found = findById(id);
+      if (!found) return;
+      const target = e.currentTarget;
+      createOverlayDragSession({
+        mode: "resize",
+        rect: found.item.rect,
+        startX: e.clientX,
+        startY: e.clientY,
+        pointerId: e.nativeEvent.pointerId,
+        captureElement: target,
+        activeElement: target.parentElement,
+        dragClass: "is-dragging",
+        registry: activeDragCleanupsRef.current,
+        onChange: (rect) => updateImage(id, rect)
+      });
+    },
+    [findById, updateImage]
+  );
+  useEffect(() => {
+    if (!layout) return;
+    for (const si of imagesRef.current.keys()) onUpdateRef.current?.(layout.getSpread(si));
+  }, [layout, margin]);
+  const imagesBySpread = useMemo2(() => new Map(images), [images, margin]);
+  const currentImages = useMemo2(
+    () => [...imagesBySpread.get(spreadIdx) ?? []],
+    [imagesBySpread, spreadIdx]
+  );
+  const hasImages = useMemo2(() => [...images.values()].some((list) => list.length > 0), [images]);
+  return {
+    imagesBySpread,
+    currentImages,
+    hasImages,
+    addImage,
+    removeImage,
+    updateImage,
+    clearImages,
+    onOverlayPointerDown,
+    onResizePointerDown
+  };
 }
 
 // src/MejiroScrollView.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var NO_IMAGES = [];
 function MejiroScrollView({
   layout,
   pageWidth,
@@ -302,23 +660,49 @@ function MejiroScrollView({
   slotMode,
   onVisiblePageChange,
   scrollToPage,
-  pageGap = 24
+  pageGap = 24,
+  selectionRects,
+  spreadIdx,
+  images = NO_IMAGES,
+  onImagePointerDown,
+  onImageResizePointerDown,
+  onImageClose
 }) {
-  const containerRef = useRef2(null);
-  const pageRefs = useRef2([]);
-  const onVisiblePageChangeRef = useRef2(onVisiblePageChange);
+  const containerRef = useRef3(null);
+  const pageRefs = useRef3([]);
+  const onVisiblePageChangeRef = useRef3(onVisiblePageChange);
   onVisiblePageChangeRef.current = onVisiblePageChange;
-  const programmaticScrollRef = useRef2(false);
-  const pages = useMemo2(() => {
+  const programmaticScrollRef = useRef3(false);
+  const userPageRef = useRef3(null);
+  const rightPage = spreadIdx != null ? spreadIdx * 2 : -1;
+  const leftPage = spreadIdx != null ? spreadIdx * 2 + 1 : -1;
+  const rightImages = useMemo3(
+    () => images.filter((item) => overlayPageSide(item.rect) === "right"),
+    [images]
+  );
+  const leftImages = useMemo3(
+    () => images.filter((item) => overlayPageSide(item.rect) === "left"),
+    [images]
+  );
+  const pages = useMemo3(() => {
     const total = layout.totalPages;
     return Array.from({ length: total }, (_, i) => layout.getPage(i));
-  }, [layout]);
+  }, [layout, images]);
   const pageCount = pages.length;
+  const rectsByPage = useMemo3(() => {
+    const byPage = [];
+    for (const rect of selectionRects ?? []) {
+      const list = byPage[rect.pageIdx] ?? [];
+      list.push(rect);
+      byPage[rect.pageIdx] = list;
+    }
+    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);
-  useEffect(() => {
+  useEffect2(() => {
     const container = containerRef.current;
     if (!container) return;
     if (pageCount === 0) return;
@@ -341,10 +725,9 @@ function MejiroScrollView({
           }
         }
         if (mostVisibleIdx >= 0) {
-          onVisiblePageChangeRef.current?.(
-            mostVisibleIdx,
-            programmaticScrollRef.current ? "programmatic" : "user"
-          );
+          const source = programmaticScrollRef.current ? "programmatic" : "user";
+          if (source === "user") userPageRef.current = mostVisibleIdx;
+          onVisiblePageChangeRef.current?.(mostVisibleIdx, source);
         }
       },
       { root: container, threshold: [0.25, 0.5, 0.75] }
@@ -357,8 +740,10 @@ function MejiroScrollView({
   useLayoutEffect(() => {
     if (scrollToPage == null) return;
     if (pageCount === 0) return;
+    if (scrollToPage === userPageRef.current) return;
     const el = pageRefs.current[scrollToPage];
     if (!(el && containerRef.current)) return;
+    userPageRef.current = null;
     programmaticScrollRef.current = true;
     containerRef.current.scrollTo({
       top: el.offsetTop,
@@ -369,12 +754,12 @@ function MejiroScrollView({
     }, 0);
     return () => clearTimeout(timer);
   }, [scrollToPage, pageCount]);
-  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "mejiro-reader-scroll", children: /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx9("div", { ref: containerRef, className: "mejiro-reader-scroll", children: /* @__PURE__ */ jsx9(
     "div",
     {
       className: "mejiro-reader-scroll-track",
       style: { display: "flex", flexDirection: "column", gap: pageGap },
-      children: pages.map((result, i) => /* @__PURE__ */ jsxs4(
+      children: pages.map((result, i) => /* @__PURE__ */ jsxs5(
         "div",
         {
           ref: (el) => {
@@ -382,24 +767,58 @@ function MejiroScrollView({
           },
           "data-page-idx": i,
           className: "mejiro-reader-page",
-          style: { width: pageWidth, height: pageHeight, flexShrink: 0 },
+          style: {
+            width: pageWidth,
+            height: pageHeight,
+            flexShrink: 0,
+            ...i === rightPage && rightImages.length > 0 || i === leftPage && leftImages.length > 0 ? { overflow: "visible" } : null
+          },
           children: [
-            /* @__PURE__ */ jsx7("div", { className: "mejiro-reader-page-rule" }),
-            /* @__PURE__ */ jsxs4("div", { className: "mejiro-reader-page-header", children: [
-              /* @__PURE__ */ jsx7("span", { className: "mejiro-reader-page-header-title" }),
-              /* @__PURE__ */ jsx7("span", { className: "mejiro-reader-page-header-num", children: i + 1 })
+            /* @__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__ */ jsx7("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsx7("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: /* @__PURE__ */ jsx7(
-              MejiroPageView,
+            /* @__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,
               {
-                result,
-                slotMode,
-                fontFamily,
-                lineSpacing,
-                className: "mejiro-reader-page-content",
-                style: contentStyle
-              }
-            ) }) })
+                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
+            ))
           ]
         },
         i
@@ -410,7 +829,8 @@ function MejiroScrollView({
 
 // src/MejiroSettingsPanel.tsx
 import { normalizeFontFamily as normalizeFontFamily3 } from "@libraz/mejiro/browser";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect3, 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" },
   { value: "sans-serif", label: "System Sans" }
@@ -427,6 +847,48 @@ function parseClampedInput(value, min, max, fallback) {
   if (value.trim() === "") return fallback;
   return clampNumber(Number(value), min, max, fallback);
 }
+function CommittedNumberInput({
+  id,
+  className,
+  value,
+  min,
+  max,
+  step,
+  onCommit
+}) {
+  const [draft, setDraft] = useState3(String(value));
+  const [input, setInput] = useState3(null);
+  const latest = useRef4({ value, min, max, onCommit });
+  latest.current = { value, min, max, onCommit };
+  useEffect3(() => {
+    setDraft(String(value));
+  }, [value]);
+  useEffect3(() => {
+    if (!input) return;
+    const commit = () => {
+      const { value: current, min: lo, max: hi, onCommit: emit } = latest.current;
+      const next = parseClampedInput(input.value, lo, hi, current);
+      setDraft(String(next));
+      emit(next);
+    };
+    input.addEventListener("change", commit);
+    return () => input.removeEventListener("change", commit);
+  }, [input]);
+  return /* @__PURE__ */ jsx10(
+    "input",
+    {
+      ref: setInput,
+      id,
+      className,
+      type: "number",
+      value: draft,
+      min,
+      max,
+      step,
+      onChange: (e) => setDraft(e.target.value)
+    }
+  );
+}
 function MejiroSettingsPanel({
   open,
   settings,
@@ -439,13 +901,13 @@ function MejiroSettingsPanel({
   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__ */ jsx8("div", { className: `mejiro-reader-settings-panel${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx8("div", { className: "mejiro-reader-settings-inner", children: /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-settings-content", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-settings-group", children: [
-      /* @__PURE__ */ jsx8("span", { className: "mejiro-reader-settings-group-title", children: messages.settingsFont }),
-      /* @__PURE__ */ jsx8("div", { className: "mejiro-reader-control", children: /* @__PURE__ */ jsx8("select", { value: currentFont, onChange: (e) => patch({ fontFamily: e.target.value }), children: fontOptions.map((f) => /* @__PURE__ */ jsx8("option", { value: f.value, children: f.label }, f.value)) }) }),
-      /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx8("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-font-size", children: messages.settingsSize }),
-        /* @__PURE__ */ jsx8(
+  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__ */ 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(
           "button",
           {
             type: "button",
@@ -462,25 +924,17 @@ function MejiroSettingsPanel({
             children: "A\u2212"
           }
         ),
-        /* @__PURE__ */ jsx8(
-          "input",
+        /* @__PURE__ */ jsx10(
+          CommittedNumberInput,
           {
             id: "mejiro-reader-font-size",
-            type: "number",
             value: settings.fontSize,
             min: minFontSize,
             max: maxFontSize,
-            onChange: (e) => patch({
-              fontSize: parseClampedInput(
-                e.target.value,
-                minFontSize,
-                maxFontSize,
-                settings.fontSize
-              )
-            })
+            onCommit: (fontSize) => patch({ fontSize })
           }
         ),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
@@ -499,58 +953,50 @@ function MejiroSettingsPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-settings-group", children: [
-      /* @__PURE__ */ jsx8("span", { className: "mejiro-reader-settings-group-title", children: messages.settingsLayout }),
-      /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx8("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-kinsoku", children: messages.settingsKinsoku }),
-        /* @__PURE__ */ jsxs5(
+    /* @__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__ */ jsxs6(
           "select",
           {
             id: "mejiro-reader-kinsoku",
             value: settings.mode ?? "strict",
             onChange: (e) => patch({ mode: e.target.value }),
             children: [
-              /* @__PURE__ */ jsx8("option", { value: "strict", children: messages.settingsStrict }),
-              /* @__PURE__ */ jsx8("option", { value: "loose", children: messages.settingsLoose })
+              /* @__PURE__ */ jsx10("option", { value: "strict", children: messages.settingsStrict }),
+              /* @__PURE__ */ jsx10("option", { value: "loose", children: messages.settingsLoose })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx8("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-hanging", children: messages.settingsHanging }),
-        /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-control", children: [
+        /* @__PURE__ */ jsx10("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-hanging", children: messages.settingsHanging }),
+        /* @__PURE__ */ jsxs6(
           "select",
           {
             id: "mejiro-reader-hanging",
             value: String(settings.enableHanging ?? true),
             onChange: (e) => patch({ enableHanging: e.target.value === "true" }),
             children: [
-              /* @__PURE__ */ jsx8("option", { value: "true", children: messages.toggleOn }),
-              /* @__PURE__ */ jsx8("option", { value: "false", children: messages.toggleOff })
+              /* @__PURE__ */ jsx10("option", { value: "true", children: messages.toggleOn }),
+              /* @__PURE__ */ jsx10("option", { value: "false", children: messages.toggleOff })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx8("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-line-spacing", children: messages.settingsLineSpacing }),
-        /* @__PURE__ */ jsx8(
-          "input",
+      /* @__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(
+          CommittedNumberInput,
           {
             id: "mejiro-reader-line-spacing",
             className: "mejiro-reader-control--wide",
-            type: "number",
             value: settings.lineSpacing ?? 1.8,
             min: 1,
             max: 3,
             step: 0.1,
-            onChange: (e) => patch({
-              lineSpacing: parseClampedInput(
-                e.target.value,
-                1,
-                3,
-                settings.lineSpacing ?? 1.8
-              )
-            })
+            onCommit: (lineSpacing) => patch({ lineSpacing })
           }
         )
       ] })
@@ -559,111 +1005,23 @@ function MejiroSettingsPanel({
 }
 
 // src/MejiroSpread.tsx
-import { normalizeFontFamily as normalizeFontFamily4 } from "@libraz/mejiro/browser";
 import {
-  useRef as useRef3
+  isPrimaryPointerPress as isPrimaryPointerPress2,
+  normalizeFontFamily as normalizeFontFamily4
+} from "@libraz/mejiro/browser";
+import {
+  useRef as useRef5
 } from "react";
-
-// src/MejiroImageOverlay.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function MejiroImageOverlay({
-  rect,
-  label,
-  onOverlayPointerDown,
-  onResizePointerDown,
-  onClose
-}) {
-  const messages = useI18n();
-  const resolvedLabel = label ?? messages.imageButton;
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className: "mejiro-reader-image-overlay",
-      style: {
-        left: rect.x,
-        top: rect.y,
-        width: rect.w,
-        height: rect.h
-      },
-      onPointerDown: onOverlayPointerDown,
-      children: [
-        /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-image-overlay-label", children: [
-          /* @__PURE__ */ jsx9("div", { className: "mejiro-reader-image-overlay-icon" }),
-          /* @__PURE__ */ jsx9("span", { children: resolvedLabel })
-        ] }),
-        /* @__PURE__ */ jsx9("div", { className: "mejiro-reader-image-overlay-resize", onPointerDown: onResizePointerDown }),
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            "aria-label": messages.imageRemoveButton,
-            title: messages.imageRemoveButton,
-            className: "mejiro-reader-image-overlay-close",
-            onPointerDown: (e) => {
-              e.stopPropagation();
-              e.preventDefault();
-              onClose?.();
-            },
-            onKeyDown: (e) => {
-              if (e.key !== "Enter" && e.key !== " ") return;
-              e.stopPropagation();
-              e.preventDefault();
-              onClose?.();
-            }
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/MejiroSelectionLayer.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-function MejiroSelectionLayer({
-  rects,
-  side,
-  className,
-  style,
-  rectClassName,
-  rectStyle
-}) {
-  const wrapperClass = className ? `mejiro-selection-layer ${className}` : "mejiro-selection-layer";
-  const rectClass = rectClassName ?? "mejiro-selection-rect";
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      className: wrapperClass,
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        ...style
-      },
-      children: rects.map((r, i) => {
-        if (r.side !== side) return null;
-        const posStyle = side === "right" ? { left: r.x, top: r.y } : { right: -(r.x + r.width), top: r.y };
-        return /* @__PURE__ */ jsx10(
-          "div",
-          {
-            className: rectClass,
-            style: {
-              position: "absolute",
-              width: r.width,
-              height: r.height,
-              ...posStyle,
-              ...r.color != null ? { backgroundColor: r.color } : null,
-              ...rectStyle
-            }
-          },
-          i
-        );
-      })
-    }
-  );
-}
-
-// src/MejiroSpread.tsx
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var OVERLAY_SELECTOR = ".mejiro-reader-image-overlay";
+var CONTENT_SELECTOR = ".mejiro-reader-page-content";
+function contentAtPoint(root, x, y) {
+  for (const content of root.querySelectorAll(CONTENT_SELECTOR)) {
+    const r = content.getBoundingClientRect();
+    if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return content;
+  }
+  return null;
+}
 function defaultHeader(data) {
   return /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-page-header", children: [
     /* @__PURE__ */ jsx11("span", { className: "mejiro-reader-page-header-title", children: data.title ?? "" }),
@@ -695,20 +1053,21 @@ function MejiroSpread({
   selectionRects,
   onSelectionChange,
   singlePage = false,
+  singleSide = "right",
   onSwipe,
   onSurfaceTap
 }) {
   const messages = useI18n();
-  const hasImages = images.length > 0;
-  const selectionStartRef = useRef3(null);
+  const selectionRef = useRef5(null);
   const selectionEnabled = anchorAtCoord != null && onSelectionChange != null;
-  const gestureRef = useRef3(null);
+  const gestureRef = useRef5(null);
   const gestureEnabled = onSwipe != null || onSurfaceTap != null;
   const SWIPE_THRESHOLD = 40;
   const TAP_MOVE_THRESHOLD = 8;
   function handleGesturePointerDown(e) {
     if (!gestureEnabled) return;
-    if (e.pointerType === "mouse" && e.button !== 0) return;
+    if (!isPrimaryPointerPress2(e)) return;
+    if (e.target?.closest(OVERLAY_SELECTOR)) return;
     gestureRef.current = { x: e.clientX, y: e.clientY, t: Date.now() };
   }
   function handleGesturePointerUp(e) {
@@ -726,15 +1085,13 @@ function MejiroSpread({
     }
     if (ax < TAP_MOVE_THRESHOLD && ay < TAP_MOVE_THRESHOLD) {
       const target = e.target;
-      if (target?.closest("button, a, .mejiro-reader-image-overlay")) return;
+      if (target?.closest(`button, a, ${OVERLAY_SELECTOR}`)) return;
       onSurfaceTap?.();
     }
   }
   function resolvePointer(e) {
     if (!anchorAtCoord) return null;
-    const target = e.target;
-    if (!target) return null;
-    const content = target.closest(".mejiro-reader-page-content");
+    const content = contentAtPoint(e.currentTarget, e.clientX, e.clientY);
     if (!content) return null;
     const pageEl = content.closest(".mejiro-reader-page");
     const isRight = pageEl?.classList.contains("mejiro-reader-page--right") ?? true;
@@ -745,26 +1102,28 @@ function MejiroSpread({
     return anchorAtCoord(spreadX, offsetY);
   }
   function handlePointerDown(e) {
-    if (!selectionEnabled) return;
+    if (!selectionEnabled || selectionRef.current) return;
+    if (!e.target?.closest(CONTENT_SELECTOR)) return;
     const anchor = resolvePointer(e);
     if (!anchor) return;
     e.preventDefault();
-    selectionStartRef.current = anchor;
+    selectionRef.current = { start: anchor, pointerId: e.pointerId };
     e.currentTarget.setPointerCapture(e.pointerId);
     onSelectionChange?.(null);
   }
   function handlePointerMove(e) {
-    if (!selectionEnabled) return;
-    const start = selectionStartRef.current;
-    if (!start) return;
+    const session = selectionRef.current;
+    if (!session || e.pointerId !== session.pointerId) return;
     const end = resolvePointer(e);
     if (!end) return;
+    const { start } = session;
     if (end.paragraph === start.paragraph && end.charIndex === start.charIndex) return;
     onSelectionChange?.({ start, end });
   }
-  function handlePointerUp(e) {
-    if (!selectionEnabled) return;
-    selectionStartRef.current = null;
+  function endSelection(e) {
+    const session = selectionRef.current;
+    if (!session || e.pointerId !== session.pointerId) return;
+    selectionRef.current = null;
     if (e.currentTarget.hasPointerCapture(e.pointerId)) {
       e.currentTarget.releasePointerCapture(e.pointerId);
     }
@@ -774,8 +1133,12 @@ function MejiroSpread({
   if (fontSize != null) contentStyle.fontSize = fontSize;
   if (lineSpacing != null) contentStyle.lineHeight = String(lineSpacing);
   const visibleRects = selectionRects && spreadIdx != null ? selectionRects.filter((r) => r.spreadIdx === spreadIdx) : selectionRects;
+  const imageSide = singlePage ? singleSide : "right";
+  const hostedImages = singlePage ? images.filter((item) => overlayPageSide(item.rect) === singleSide) : images;
+  const hasImages = hostedImages.length > 0;
   const renderPage = (side) => {
     const isRight = side === "right";
+    const hostsImages = side === imageSide;
     const result = isRight ? spread.right : spread.left;
     const header = isRight ? rightHeader : leftHeader;
     const pageKey = `${side}-${header.pageNumber ?? "blank"}`;
@@ -783,7 +1146,7 @@ function MejiroSpread({
       width: pageWidth,
       height: pageHeight
     };
-    if (isRight && hasImages) pageStyle.overflow = "visible";
+    if (hostsImages && hasImages) pageStyle.overflow = "visible";
     return /* @__PURE__ */ jsxs7(
       "div",
       {
@@ -807,10 +1170,10 @@ function MejiroSpread({
             ),
             visibleRects && visibleRects.length > 0 && /* @__PURE__ */ jsx11(MejiroSelectionLayer, { rects: visibleRects, side })
           ] }) }),
-          isRight && images.map((item) => /* @__PURE__ */ jsx11(
+          hostsImages && hostedImages.map((item) => /* @__PURE__ */ jsx11(
             MejiroImageOverlay,
             {
-              rect: item.rect,
+              rect: isRight ? item.rect : { ...item.rect, x: item.rect.x + pageWidth },
               onOverlayPointerDown: (e) => onImagePointerDown?.(item.id, e),
               onResizePointerDown: (e) => onImageResizePointerDown?.(item.id, e),
               onClose: () => onImageClose?.(item.id)
@@ -826,12 +1189,13 @@ function MejiroSpread({
     if (gestureEnabled) handleGesturePointerDown(e);
     if (selectionEnabled) handlePointerDown(e);
   }
-  function combinedPointerMove(e) {
-    if (selectionEnabled) handlePointerMove(e);
-  }
   function combinedPointerUp(e) {
     if (gestureEnabled) handleGesturePointerUp(e);
-    if (selectionEnabled) handlePointerUp(e);
+    endSelection(e);
+  }
+  function combinedPointerCancel(e) {
+    gestureRef.current = null;
+    endSelection(e);
   }
   const useCombined = selectionEnabled || gestureEnabled;
   return /* @__PURE__ */ jsx11("div", { className: "mejiro-reader-book", children: /* @__PURE__ */ jsxs7(
@@ -839,11 +1203,12 @@ function MejiroSpread({
     {
       className: `mejiro-reader-spread${turning ? " is-turning" : ""}${singlePage ? " mejiro-reader-spread--single" : ""}`,
       onPointerDown: useCombined ? combinedPointerDown : void 0,
-      onPointerMove: useCombined ? combinedPointerMove : void 0,
+      onPointerMove: useCombined ? handlePointerMove : void 0,
       onPointerUp: useCombined ? combinedPointerUp : void 0,
-      onPointerCancel: useCombined ? combinedPointerUp : void 0,
+      onPointerCancel: useCombined ? combinedPointerCancel : void 0,
+      onLostPointerCapture: selectionEnabled ? endSelection : void 0,
       children: [
-        renderPage("right"),
+        renderPage(singlePage ? singleSide : "right"),
         !singlePage && renderPage("left"),
         /* @__PURE__ */ jsx11(
           "button",
@@ -902,29 +1267,127 @@ function MejiroStats({
   return /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-stats", children: parts.filter(Boolean).join(" / ") });
 }
 
+// src/persistence.ts
+function resolveDefaultStorage() {
+  try {
+    return globalThis.localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+function readStorage(storage, key, parse, fallback) {
+  if (!storage) return fallback;
+  try {
+    return parse(storage.getItem(key));
+  } catch {
+    return fallback;
+  }
+}
+function removeStorage(storage, key) {
+  if (!storage) return;
+  try {
+    storage.removeItem(key);
+  } catch {
+  }
+}
+function uniqueChapterId(existing) {
+  const taken = new Set(existing.map((chapter) => chapter.id));
+  const stamp = Date.now();
+  let n = existing.length;
+  while (taken.has(`chapter-${stamp}-${n}`)) n++;
+  return `chapter-${stamp}-${n}`;
+}
+function mergeDefined(base, patch) {
+  const next = { ...base };
+  for (const key of Object.keys(patch)) {
+    const value = patch[key];
+    if (value !== void 0) next[key] = value;
+  }
+  return next;
+}
+function createPendingWrite() {
+  let timer = null;
+  let pending = null;
+  function cancel() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    pending = null;
+  }
+  function flush() {
+    const write = pending;
+    cancel();
+    if (!write) return;
+    try {
+      write();
+    } catch {
+    }
+  }
+  return {
+    schedule(write, delayMs) {
+      cancel();
+      pending = write;
+      timer = setTimeout(flush, delayMs);
+    },
+    flush,
+    cancel
+  };
+}
+function flushOnPageHide(flush) {
+  if (typeof window === "undefined") return () => {
+  };
+  const handler = () => flush();
+  window.addEventListener("beforeunload", handler);
+  window.addEventListener("pagehide", handler);
+  return () => {
+    window.removeEventListener("beforeunload", handler);
+    window.removeEventListener("pagehide", handler);
+  };
+}
+function snapshotChapters(chapters) {
+  return chapters.map(({ id, title, body }) => ({ id, title, body }));
+}
+function createDraftChangeTracker(chapters, key) {
+  let lastChapters = snapshotChapters(chapters);
+  let lastKey = key;
+  return {
+    changed(nextChapters, nextKey) {
+      const same = nextKey === lastKey && nextChapters.length === lastChapters.length && nextChapters.every((chapter, i) => {
+        const prev = lastChapters[i];
+        return chapter.id === prev.id && chapter.title === prev.title && chapter.body === prev.body;
+      });
+      if (same) return false;
+      lastChapters = snapshotChapters(nextChapters);
+      lastKey = nextKey;
+      return true;
+    }
+  };
+}
+
 // src/useChapterLayout.ts
 import {
-  useCallback,
-  useEffect as useEffect2,
+  useCallback as useCallback2,
+  useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect2,
-  useRef as useRef4,
-  useState as useState2
+  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;
-  const [layout, setLayout] = useState2(null);
-  const [pageWidth, setPageWidth] = useState2(0);
-  const [pageHeight, setPageHeight] = useState2(0);
-  const [contentHeight, setContentHeight] = useState2(0);
-  const [elapsedMs, setElapsedMs] = useState2(0);
-  const layoutRef = useRef4(null);
-  const requestIdRef = useRef4(0);
-  const pendingRestore = useRef4(null);
+  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);
   layoutRef.current = layout;
-  const optionsRef = useRef4(options);
+  const optionsRef = useRef6(options);
   optionsRef.current = options;
-  const recompute = useCallback(
+  const recompute = useCallback2(
     async (opts = {}) => {
       const blank = opts.blank ?? true;
       const o = optionsRef.current;
@@ -963,13 +1426,20 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
     setContentHeight(0);
     setElapsedMs(0);
   }, [recompute]);
-  useEffect2(() => {
+  useEffect4(() => {
     void recompute();
     return () => {
       requestIdRef.current++;
     };
   }, [recompute]);
-  useEffect2(() => {
+  useLayoutEffect2(() => {
+    const anchor = pendingRestore.current;
+    const restore = optionsRef.current.restorePosition;
+    if (!(layout && anchor && restore)) return;
+    pendingRestore.current = null;
+    restore(layout, anchor);
+  }, [layout]);
+  useEffect4(() => {
     if (!enableResize) return;
     const el = surface.current;
     if (!el) return;
@@ -1024,86 +1494,35 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
 
 // src/useEpub.ts
 import { parseEpub } from "@libraz/mejiro/epub";
-import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef5, useState as useState3 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useRef as useRef7, useState as useState5 } from "react";
 function useEpub(options = {}) {
-  const [epub, setEpub] = useState3(null);
-  const [loading, setLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  const requestIdRef = useRef5(0);
-  const onLoadRef = useRef5(options.onLoad);
-  onLoadRef.current = options.onLoad;
-  const onErrorRef = useRef5(options.onError);
-  onErrorRef.current = options.onError;
-  const fetchOptionsRef = useRef5(options.fetchOptions);
-  fetchOptionsRef.current = options.fetchOptions;
-  const fetchEpubRef = useRef5(options.fetchEpub);
-  fetchEpubRef.current = options.fetchEpub;
-  const limitsRef = useRef5(options.limits);
-  limitsRef.current = options.limits;
-  const loadBuffer = useCallback2(async (buffer) => {
-    const requestId = ++requestIdRef.current;
-    setLoading(true);
-    setError(null);
-    try {
-      const book = await parseEpub(buffer, { limits: limitsRef.current });
-      if (requestId !== requestIdRef.current) return null;
-      setEpub(book);
-      onLoadRef.current?.(book);
-      return book;
-    } catch (err) {
-      if (requestId === requestIdRef.current) {
-        const nextError = err instanceof Error ? err : new Error(String(err));
-        setError(nextError);
-        onErrorRef.current?.(nextError);
-      }
-      return null;
-    } finally {
-      if (requestId === requestIdRef.current) setLoading(false);
-    }
-  }, []);
-  const loadFile = useCallback2(async (file) => {
-    const requestId = ++requestIdRef.current;
-    setLoading(true);
-    setError(null);
-    try {
-      const book = await parseEpub(await file.arrayBuffer(), { limits: limitsRef.current });
-      if (requestId !== requestIdRef.current) return null;
-      setEpub(book);
-      onLoadRef.current?.(book);
-      return book;
-    } catch (err) {
-      if (requestId === requestIdRef.current) {
-        const nextError = err instanceof Error ? err : new Error(String(err));
-        setError(nextError);
-        onErrorRef.current?.(nextError);
-      }
-      return null;
-    } finally {
-      if (requestId === requestIdRef.current) setLoading(false);
-    }
-  }, []);
-  const loadUrl = useCallback2(async (url) => {
+  const [epub, setEpub] = useState5(null);
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  const requestIdRef = useRef7(0);
+  const onLoadRef = useRef7(options.onLoad);
+  onLoadRef.current = options.onLoad;
+  const onErrorRef = useRef7(options.onError);
+  onErrorRef.current = options.onError;
+  const fetchOptionsRef = useRef7(options.fetchOptions);
+  fetchOptionsRef.current = options.fetchOptions;
+  const fetchEpubRef = useRef7(options.fetchEpub);
+  fetchEpubRef.current = options.fetchEpub;
+  const limitsRef = useRef7(options.limits);
+  limitsRef.current = options.limits;
+  const load = useCallback3(async (read) => {
     const requestId = ++requestIdRef.current;
     setLoading(true);
     setError(null);
     try {
-      let buffer;
-      if (fetchEpubRef.current) {
-        buffer = await fetchEpubRef.current(url);
-      } else {
-        const init = fetchOptionsRef.current;
-        const res = init ? await fetch(url, init) : await fetch(url);
-        if (!res.ok) return null;
-        buffer = await res.arrayBuffer();
-      }
-      const book = await parseEpub(buffer, { limits: limitsRef.current });
+      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 = err instanceof Error ? err : new Error(String(err));
+        const nextError = toError(err);
         setError(nextError);
         onErrorRef.current?.(nextError);
       }
@@ -1112,11 +1531,22 @@ function useEpub(options = {}) {
       if (requestId === requestIdRef.current) setLoading(false);
     }
   }, []);
+  const loadBuffer = useCallback3((buffer) => load(async () => buffer), [load]);
+  const loadFile = useCallback3(
+    (file) => load(() => readEpubFile(file, limitsRef.current)),
+    [load]
+  );
+  const loadUrl = useCallback3(
+    (url) => load(
+      () => fetchEpubRef.current ? fetchEpubRef.current(url) : fetchEpubBuffer(url, fetchOptionsRef.current)
+    ),
+    [load]
+  );
   const defaultUrl = options.defaultUrl;
-  useEffect3(() => {
+  useEffect5(() => {
     if (defaultUrl) void loadUrl(defaultUrl);
   }, [defaultUrl, loadUrl]);
-  const replaceEpub = useCallback2((book) => {
+  const replaceEpub = useCallback3((book) => {
     requestIdRef.current++;
     setLoading(false);
     setError(null);
@@ -1127,15 +1557,15 @@ function useEpub(options = {}) {
 
 // src/useMejiroBook.ts
 import { MejiroBook } from "@libraz/mejiro/book";
-import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef6, useState as useState4 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef8, useState as useState6 } from "react";
 function useMejiroBook(initial, options = {}) {
-  const bookRef = useRef6(null);
+  const bookRef = useRef8(null);
   if (!bookRef.current) bookRef.current = new MejiroBook(initial);
-  const [snapshot, setLocal] = useState4(initial);
-  const optionsRef = useRef6(options);
+  const [snapshot, setLocal] = useState6(initial);
+  const optionsRef = useRef8(options);
   optionsRef.current = options;
-  const pendingRef = useRef6(null);
-  const flush = useCallback3(() => {
+  const pendingRef = useRef8(null);
+  const flush = useCallback4(() => {
     const pending = pendingRef.current;
     if (!pending) return;
     pendingRef.current = null;
@@ -1147,7 +1577,7 @@ function useMejiroBook(initial, options = {}) {
         for (const waiter of waiters) waiter.resolve();
       },
       (err) => {
-        const error = err instanceof Error ? err : new Error(String(err));
+        const error = toError(err);
         const handler = optionsRef.current.onError;
         if (handler) {
           handler(error);
@@ -1158,12 +1588,12 @@ function useMejiroBook(initial, options = {}) {
       }
     );
   }, []);
-  const setOptions = useCallback3(
+  const setOptions = useCallback4(
     (next) => {
-      setLocal((prev) => ({ ...prev, ...next }));
+      setLocal((prev) => mergeDefined(prev, next));
       const pending = pendingRef.current ?? { patch: {}, timer: null, waiters: [] };
       pendingRef.current = pending;
-      Object.assign(pending.patch, next);
+      pending.patch = mergeDefined(pending.patch, next);
       const settled = new Promise((resolve, reject) => {
         pending.waiters.push({ resolve, reject });
       });
@@ -1182,8 +1612,9 @@ function useMejiroBook(initial, options = {}) {
     },
     [flush]
   );
-  useEffect4(
+  useEffect6(
     () => () => {
+      bookRef.current?.dispose();
       const pending = pendingRef.current;
       if (!pending) return;
       pendingRef.current = null;
@@ -1195,205 +1626,8 @@ function useMejiroBook(initial, options = {}) {
   return { book: bookRef.current, options: snapshot, setOptions };
 }
 
-// src/useMultiImageOverlay.ts
-import { createOverlayDragSession } from "@libraz/mejiro/browser";
-import {
-  useCallback as useCallback4,
-  useEffect as useEffect5,
-  useMemo as useMemo3,
-  useRef as useRef7,
-  useState as useState5
-} from "react";
-var nextId = 0;
-function useMultiImageOverlay(layout, spreadIdx, options = {}) {
-  const defW = options.defaultWidth ?? 120;
-  const defH = options.defaultHeight ?? 160;
-  const defX = options.defaultX ?? 80;
-  const defY = options.defaultY ?? 100;
-  const margin = options.margin;
-  const [images, setImages] = useState5(() => /* @__PURE__ */ new Map());
-  const imagesRef = useRef7(images);
-  imagesRef.current = images;
-  const layoutRef = useRef7(null);
-  layoutRef.current = layout;
-  const spreadIdxRef = useRef7(spreadIdx);
-  spreadIdxRef.current = spreadIdx;
-  const onUpdateRef = useRef7(options.onUpdate);
-  onUpdateRef.current = options.onUpdate;
-  const activeDragCleanupsRef = useRef7(/* @__PURE__ */ new Set());
-  useEffect5(
-    () => () => {
-      for (const cleanup of activeDragCleanupsRef.current) cleanup();
-      activeDragCleanupsRef.current.clear();
-    },
-    []
-  );
-  const syncSpread = useCallback4(
-    (si) => {
-      const lo = layoutRef.current;
-      if (!lo) return;
-      const items = imagesRef.current.get(si) ?? [];
-      const bookImages = items.map((it) => ({
-        x: it.rect.x,
-        y: it.rect.y,
-        w: it.rect.w,
-        h: it.rect.h,
-        margin
-      }));
-      lo.setImages(si, bookImages);
-      onUpdateRef.current?.(lo.getSpread(si));
-    },
-    [margin]
-  );
-  const commit = useCallback4(
-    (next, affectedSpread) => {
-      imagesRef.current = next;
-      setImages(next);
-      syncSpread(affectedSpread);
-    },
-    [syncSpread]
-  );
-  const findById = useCallback4(
-    (id) => {
-      for (const [s, list] of imagesRef.current) {
-        const i = list.findIndex((it) => it.id === id);
-        if (i >= 0) return { spread: s, index: i, item: list[i] };
-      }
-      return null;
-    },
-    []
-  );
-  const addImage = useCallback4(
-    (overrides) => {
-      const si = spreadIdxRef.current;
-      const list = imagesRef.current.get(si) ?? [];
-      const last = list[list.length - 1];
-      const baseX = last ? last.rect.x - 100 : defX;
-      const baseY = last ? last.rect.y + 40 : defY;
-      nextId += 1;
-      const item = {
-        id: `mejiro-img-${nextId}`,
-        rect: {
-          x: overrides?.x ?? baseX,
-          y: overrides?.y ?? baseY,
-          w: overrides?.w ?? defW,
-          h: overrides?.h ?? defH
-        }
-      };
-      const next = new Map(imagesRef.current);
-      next.set(si, [...list, item]);
-      commit(next, si);
-      return item;
-    },
-    [defX, defY, defW, defH, commit]
-  );
-  const removeImage = useCallback4(
-    (id) => {
-      const found = findById(id);
-      if (!found) return;
-      const next = new Map(imagesRef.current);
-      const list = (next.get(found.spread) ?? []).filter((it) => it.id !== id);
-      if (list.length === 0) next.delete(found.spread);
-      else next.set(found.spread, list);
-      commit(next, found.spread);
-    },
-    [findById, commit]
-  );
-  const updateImage = useCallback4(
-    (id, rect) => {
-      const found = findById(id);
-      if (!found) return;
-      const next = new Map(imagesRef.current);
-      const list = (next.get(found.spread) ?? []).map(
-        (it) => it.id === id ? { ...it, rect: { ...it.rect, ...rect } } : it
-      );
-      next.set(found.spread, list);
-      commit(next, found.spread);
-    },
-    [findById, commit]
-  );
-  const clearImages = useCallback4(
-    (target) => {
-      if (target == null) {
-        const old = imagesRef.current;
-        imagesRef.current = /* @__PURE__ */ new Map();
-        setImages(/* @__PURE__ */ new Map());
-        layoutRef.current?.clearImages();
-        if (layoutRef.current) {
-          for (const si of old.keys()) onUpdateRef.current?.(layoutRef.current.getSpread(si));
-        }
-      } else {
-        const next = new Map(imagesRef.current);
-        next.delete(target);
-        commit(next, target);
-      }
-    },
-    [commit]
-  );
-  const onOverlayPointerDown = useCallback4(
-    (id, e) => {
-      e.preventDefault();
-      const found = findById(id);
-      if (!found) return;
-      const target = e.currentTarget;
-      createOverlayDragSession({
-        mode: "move",
-        rect: found.item.rect,
-        startX: e.clientX,
-        startY: e.clientY,
-        pointerId: e.nativeEvent.pointerId,
-        captureElement: target,
-        activeElement: target,
-        dragClass: "is-dragging",
-        registry: activeDragCleanupsRef.current,
-        onChange: (rect) => updateImage(id, rect)
-      });
-    },
-    [findById, updateImage]
-  );
-  const onResizePointerDown = useCallback4(
-    (id, e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const found = findById(id);
-      if (!found) return;
-      const target = e.currentTarget;
-      createOverlayDragSession({
-        mode: "resize",
-        rect: found.item.rect,
-        startX: e.clientX,
-        startY: e.clientY,
-        pointerId: e.nativeEvent.pointerId,
-        captureElement: target,
-        activeElement: target.parentElement,
-        dragClass: "is-dragging",
-        registry: activeDragCleanupsRef.current,
-        onChange: (rect) => updateImage(id, rect)
-      });
-    },
-    [findById, updateImage]
-  );
-  useEffect5(() => {
-    if (!layout) return;
-    for (const si of imagesRef.current.keys()) syncSpread(si);
-  }, [layout, syncSpread]);
-  const currentImages = useMemo3(() => images.get(spreadIdx) ?? [], [images, spreadIdx]);
-  const hasImages = useMemo3(() => [...images.values()].some((list) => list.length > 0), [images]);
-  return {
-    imagesBySpread: images,
-    currentImages,
-    hasImages,
-    addImage,
-    removeImage,
-    updateImage,
-    clearImages,
-    onOverlayPointerDown,
-    onResizePointerDown
-  };
-}
-
 // src/useSpread.ts
-import { useCallback as useCallback5, useEffect as useEffect6, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState7 } from "react";
 function ignoreNavigationKey(e) {
   if (e.defaultPrevented) return true;
   if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return true;
@@ -1403,29 +1637,57 @@ function ignoreNavigationKey(e) {
   const tag = target.tagName;
   return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
 }
+function navigationCount(totalPages, single) {
+  return Math.max(1, single ? totalPages : Math.ceil(totalPages / 2));
+}
+function firstPageOf(index, single) {
+  return single ? index : index * 2;
+}
+function indexOfPageIn(pageIdx, single) {
+  return single ? pageIdx : Math.floor(pageIdx / 2);
+}
+function firstTextAnchorFrom(layout, page) {
+  for (let p = page; p < layout.totalPages; p++) {
+    const anchor = layout.anchorAt(Math.floor(p / 2), p % 2 === 0 ? "right" : "left");
+    if (anchor) return anchor;
+  }
+  return null;
+}
 function useSpread(layout, options = {}) {
   const enableKeyboard = options.enableKeyboard ?? true;
   const turnDuration = options.turnDuration ?? 180;
-  const onChangeRef = useRef8(options.onChange);
+  const single = options.single ?? false;
+  const onChangeRef = useRef9(options.onChange);
   onChangeRef.current = options.onChange;
-  const [spreadIdx, setSpreadIdx] = useState6(0);
-  const [spread, setSpread] = useState6(null);
-  const [turning, setTurning] = useState6(false);
-  const layoutRef = useRef8(null);
+  const [spreadIdx, setSpreadIdx] = useState7(0);
+  const [indexSingle, setIndexSingle] = useState7(single);
+  if (indexSingle !== single) {
+    setIndexSingle(single);
+    setSpreadIdx(indexOfPageIn(firstPageOf(spreadIdx, indexSingle), single));
+  }
+  const [spread, setSpread] = useState7(null);
+  const [turning, setTurning] = useState7(false);
+  const layoutRef = useRef9(null);
   layoutRef.current = layout;
-  const spreadIdxRef = useRef8(0);
+  const spreadIdxRef = useRef9(0);
   spreadIdxRef.current = spreadIdx;
-  const turnTimerRef = useRef8(null);
-  const layoutGenerationRef = useRef8(0);
-  const lastEmittedRef = useRef8(null);
-  const totalPages = layout?.totalPages ?? 0;
-  const totalSpreads = Math.max(1, Math.ceil(totalPages / 2));
+  const singleRef = useRef9(single);
+  singleRef.current = single;
+  const turnTimerRef = useRef9(null);
+  const layoutGenerationRef = useRef9(0);
+  const lastEmittedRef = useRef9(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(() => {
     if (!layoutRef.current) {
       setSpread(null);
       return;
     }
-    setSpread(layoutRef.current.getSpread(spreadIdxRef.current));
+    const page = firstPageOf(spreadIdxRef.current, singleRef.current);
+    setSpread(layoutRef.current.getSpread(Math.floor(page / 2)));
   }, []);
   useLayoutEffect3(() => {
     layoutGenerationRef.current++;
@@ -1441,9 +1703,9 @@ function useSpread(layout, options = {}) {
     }
     setSpread(layout.getSpread(0));
   }, [layout]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!layout) return;
-    setSpread(layout.getSpread(spreadIdx));
+    setSpread(layout.getSpread(layoutSpreadIdx));
     const last = lastEmittedRef.current;
     if (!last) {
       lastEmittedRef.current = { layout, spreadIdx };
@@ -1453,11 +1715,12 @@ function useSpread(layout, options = {}) {
       onChangeRef.current?.(spreadIdx);
     }
     lastEmittedRef.current = { layout, spreadIdx };
-  }, [layout, spreadIdx]);
+  }, [layout, spreadIdx, layoutSpreadIdx]);
   const goTo = useCallback5(
     (index) => {
       if (!layoutRef.current) return;
-      const max = Math.max(1, Math.ceil(layoutRef.current.totalPages / 2)) - 1;
+      const targetSingle = singleRef.current;
+      const max = navigationCount(layoutRef.current.totalPages, targetSingle) - 1;
       const target = Math.max(0, Math.min(max, index));
       if (target === spreadIdxRef.current) return;
       if (turnDuration > 0) {
@@ -1466,7 +1729,7 @@ function useSpread(layout, options = {}) {
         setTurning(true);
         turnTimerRef.current = setTimeout(() => {
           if (generation !== layoutGenerationRef.current) return;
-          setSpreadIdx(target);
+          setSpreadIdx(indexOfPageIn(firstPageOf(target, targetSingle), singleRef.current));
           setTurning(false);
           turnTimerRef.current = null;
         }, turnDuration);
@@ -1483,12 +1746,20 @@ function useSpread(layout, options = {}) {
       turnTimerRef.current = null;
     }
     setTurning(false);
-    const max = Math.max(1, Math.ceil(layoutRef.current.totalPages / 2)) - 1;
+    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(
+    (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]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!enableKeyboard) return;
     const onKey = (e) => {
       if (!layoutRef.current) return;
@@ -1499,7 +1770,7 @@ function useSpread(layout, options = {}) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [enableKeyboard, next, prev]);
-  useEffect6(
+  useEffect7(
     () => () => {
       if (turnTimerRef.current) clearTimeout(turnTimerRef.current);
     },
@@ -1508,6 +1779,9 @@ function useSpread(layout, options = {}) {
   return {
     spreadIdx,
     spread,
+    firstPage,
+    layoutSpreadIdx,
+    singleSide,
     totalPages,
     totalSpreads,
     turning,
@@ -1515,6 +1789,8 @@ function useSpread(layout, options = {}) {
     prev,
     goTo,
     setSpread: setSpreadIndex,
+    indexOfPage,
+    anchorAt,
     refresh
   };
 }
@@ -1522,6 +1798,52 @@ function useSpread(layout, options = {}) {
 // src/MejiroReader.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var OPTIONS_DEBOUNCE_MS = 60;
+var IMAGE_DEFAULT_X = 80;
+function singlePageImagePlacement(side, pageWidth) {
+  if (side == null) return void 0;
+  return { x: side === "left" ? IMAGE_DEFAULT_X - pageWidth : IMAGE_DEFAULT_X };
+}
+var MANUSCRIPT_SOURCE = /* @__PURE__ */ Symbol("manuscript");
+function manuscriptKey(manuscript) {
+  if (manuscript === void 0) return void 0;
+  return JSON.stringify(manuscript.map(({ id, title, body }) => ({ id, title, body })));
+}
+function reflowOptionsKey(o) {
+  return JSON.stringify([
+    o.fontFamily,
+    o.fontSize,
+    o.lineSpacing,
+    o.mode,
+    o.enableHanging,
+    o.headingScale,
+    o.headingStyles
+  ]);
+}
+function scrollTargetPage(spread, userPage) {
+  return userPage != null && spread.indexOfPage(userPage) === spread.spreadIdx ? userPage : spread.firstPage;
+}
+function createLifecycleTracker(sink) {
+  let last = null;
+  let dwell = null;
+  return (chapter, spreadIdx, view, controlledSpreadIdx) => {
+    if (!view) return;
+    const totalSpreads = view.total;
+    if (controlledSpreadIdx != null) {
+      const target = Math.max(0, Math.min(totalSpreads - 1, controlledSpreadIdx));
+      if (spreadIdx !== target) return;
+    }
+    if (last && last.chapter === chapter && last.spreadIdx === spreadIdx) return;
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    const previous = last;
+    if (previous && dwell) sink.pageRead(dwell.anchor, now - dwell.ts);
+    const inCh = view.anchor;
+    dwell = inCh ? { anchor: { chapter, ...inCh }, ts: now } : null;
+    last = { chapter, spreadIdx };
+    if (!previous) return;
+    sink.spreadChanged(chapter, spreadIdx);
+    if (spreadIdx === totalSpreads - 1) sink.chapterFinished(chapter);
+  };
+}
 function MejiroReaderInner(props, ref) {
   const manuscriptProp = "manuscript" in props ? props.manuscript : void 0;
   const dialectProp = "dialect" in props ? props.dialect : void 0;
@@ -1568,15 +1890,18 @@ function MejiroReaderInner(props, ref) {
     onPageRead,
     onChapterCompleted
   } = props;
-  const surfaceRef = useRef9(null);
-  const fileRef = useRef9(null);
-  const [settingsOpen, setSettingsOpen] = useState7(false);
-  const [chapterState, setChapterState] = useState7(chapterProp ?? 0);
+  const surfaceRef = useRef10(null);
+  const fileRef = useRef10(null);
+  const [settingsOpen, setSettingsOpen] = useState8(false);
+  const [chapterState, setChapterState] = useState8(chapterProp ?? 0);
   const chapterIsUncontrolled = chapterProp == null;
   const chapter = chapterProp ?? chapterState;
-  const [chromeHidden, setChromeHidden] = useState7(false);
-  const [autoSingle, setAutoSingle] = useState7(false);
-  useEffect7(() => {
+  const [chromeHidden, setChromeHidden] = useState8(false);
+  const [userScroll, setUserScroll] = useState8(
+    null
+  );
+  const [autoSingle, setAutoSingle] = useState8(false);
+  useEffect8(() => {
     if (!settingsOpen) return;
     const onKey = (e2) => {
       if (e2.key === "Escape") setSettingsOpen(false);
@@ -1584,7 +1909,7 @@ function MejiroReaderInner(props, ref) {
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [settingsOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (spreadMode !== "auto") return;
     const surface = surfaceRef.current;
     if (!surface) return;
@@ -1601,16 +1926,19 @@ function MejiroReaderInner(props, ref) {
   const effectiveSingle = spreadMode === "single" || spreadMode === "auto" && autoSingle;
   const resolvedGeometry = useMemo4(() => {
     const columns = effectiveSingle ? 1 : 2;
-    if (fit !== "width") return { columns, ...pageGeometryProp };
-    return {
-      columns,
-      gutterOffset: 0,
-      headerOffset: 0,
-      maxHeight: Number.POSITIVE_INFINITY,
-      minWidth: 0,
-      minHeight: 0,
-      ...pageGeometryProp
-    };
+    const geometry = pageGeometryProp ?? {};
+    if (fit !== "width") return mergeDefined({ columns }, geometry);
+    return mergeDefined(
+      {
+        columns,
+        gutterOffset: 0,
+        headerOffset: 0,
+        maxHeight: Number.POSITIVE_INFINITY,
+        minWidth: 0,
+        minHeight: 0
+      },
+      geometry
+    );
   }, [fit, pageGeometryProp, effectiveSingle]);
   const surfaceAspect = useMemo4(() => {
     const columns = effectiveSingle ? 1 : 2;
@@ -1618,10 +1946,10 @@ function MejiroReaderInner(props, ref) {
     return `${columns} / ${aspect}`;
   }, [effectiveSingle, resolvedGeometry]);
   const resolvedOptions = useMemo4(
-    () => ({ ...DEFAULT_BOOK_OPTIONS, ...optionsProp ?? {} }),
+    () => mergeDefined(DEFAULT_BOOK_OPTIONS, optionsProp ?? {}),
     [optionsProp]
   );
-  const onErrorRef = useRef9(onError);
+  const onErrorRef = useRef10(onError);
   onErrorRef.current = onError;
   const reportError = useCallback6((error) => onErrorRef.current?.(error), []);
   const {
@@ -1633,18 +1961,20 @@ function MejiroReaderInner(props, ref) {
     onError: reportError
   });
   const optionsPropKey = JSON.stringify(resolvedOptions);
-  const syncedOptionsPropKeyRef = useRef9(optionsPropKey);
-  const resolvedOptionsRef = useRef9(resolvedOptions);
+  const syncedOptionsPropKeyRef = useRef10(optionsPropKey);
+  const resolvedOptionsRef = useRef10(resolvedOptions);
   resolvedOptionsRef.current = resolvedOptions;
-  useEffect7(() => {
+  useEffect8(() => {
     if (syncedOptionsPropKeyRef.current === optionsPropKey) return;
     syncedOptionsPropKeyRef.current = optionsPropKey;
     void setOptions(resolvedOptionsRef.current);
   }, [optionsPropKey, setOptions]);
+  const manuscriptSourceKey = manuscriptKey(manuscriptProp);
   const synthesizedEpub = useMemo4(() => {
-    if (manuscriptProp === void 0) return null;
-    return manuscriptToEpubBook(manuscriptProp, { dialect: dialectProp });
-  }, [manuscriptProp, dialectProp]);
+    if (manuscriptSourceKey === void 0) return null;
+    const chapters = JSON.parse(manuscriptSourceKey);
+    return manuscriptToEpubBook(chapters, { dialect: dialectProp });
+  }, [manuscriptSourceKey, dialectProp]);
   const epubCtx = useEpub({
     // `epub` / `manuscript` take precedence: skip the URL fetch when a parsed
     // book (or a synthesized manuscript book) is supplied.
@@ -1654,59 +1984,74 @@ function MejiroReaderInner(props, ref) {
     fetchEpub: fetchEpubFn,
     onLoad: (b) => {
       if (chapterProp == null) setChapterState(0);
+      clearImagesRef.current();
       onLoad?.(b);
     }
   });
   const controlled = epubProp !== void 0 || manuscriptProp !== void 0;
   const isManuscriptSource = manuscriptProp !== void 0;
   const e = isManuscriptSource ? synthesizedEpub : controlled ? epubProp ?? null : epubCtx.epub;
-  useEffect7(() => {
+  useEffect8(() => {
     if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
   }, [epubCtx.error]);
-  const pageGeometryRef = useRef9(resolvedGeometry);
+  const pageGeometryRef = useRef10(resolvedGeometry);
   pageGeometryRef.current = resolvedGeometry;
-  const curSpreadIdxRef = useRef9(0);
-  const spreadIdxPropRef = useRef9(spreadIdxProp);
+  const spreadAnchorRef = useRef10(() => null);
+  const spreadIdxPropRef = useRef10(spreadIdxProp);
   spreadIdxPropRef.current = spreadIdxProp;
+  const visibleAnchorRef = useRef10(
+    null
+  );
   const layoutCtx = useChapterLayout(book, e, 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
     // the host owns the position and the controlled-restore effect handles it.
-    capturePosition: (layout2) => spreadIdxPropRef.current != null ? null : layout2.anchorAt(curSpreadIdxRef.current, "right")
+    capturePosition: (layout2) => {
+      if (spreadIdxPropRef.current != null) return null;
+      const visible = visibleAnchorRef.current;
+      if (visible?.layout === layout2) return visible.anchor;
+      return spreadAnchorRef.current();
+    }
   });
-  const spreadChangedRef = useRef9(void 0);
+  const spreadChangedRef = useRef10(void 0);
   spreadChangedRef.current = (i) => {
     onSpreadChange?.(i);
     onSpreadIdxChange?.(i);
   };
   const spreadCtx = useSpread(layoutCtx.layout, {
     enableKeyboard,
+    single: effectiveSingle,
     onChange: (i) => spreadChangedRef.current?.(i)
   });
-  curSpreadIdxRef.current = spreadCtx.spreadIdx;
-  const setSpreadRef = useRef9(spreadCtx.setSpread);
+  spreadAnchorRef.current = () => spreadCtx.anchorAt(spreadCtx.spreadIdx);
+  const indexOfPageRef = useRef10(spreadCtx.indexOfPage);
+  indexOfPageRef.current = spreadCtx.indexOfPage;
+  const anchorSingleRef = useRef10(effectiveSingle);
+  useLayoutEffect4(() => {
+    const l = layoutCtx.layout;
+    const flipped = anchorSingleRef.current !== effectiveSingle;
+    anchorSingleRef.current = effectiveSingle;
+    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);
   setSpreadRef.current = spreadCtx.setSpread;
   useLayoutEffect4(() => {
     const anchor = layoutCtx.pendingRestore.current;
     if (!(anchor && layoutCtx.layout)) return;
     layoutCtx.pendingRestore.current = null;
     const loc = layoutCtx.layout.locateAnchor(anchor);
-    setSpreadRef.current(loc?.spreadIdx ?? 0);
+    setSpreadRef.current(loc ? indexOfPageRef.current(loc.pageIdx) : 0);
+    visibleAnchorRef.current = { layout: layoutCtx.layout, anchor };
   }, [layoutCtx.layout]);
-  const optionsKey = [
-    bookOptions.fontFamily,
-    bookOptions.fontSize,
-    bookOptions.lineSpacing,
-    bookOptions.mode,
-    bookOptions.enableHanging
-  ].join("|");
-  const optionsKeyRef = useRef9(optionsKey);
-  const bookOptionsRef = useRef9(bookOptions);
+  const optionsKey = reflowOptionsKey(bookOptions);
+  const optionsKeyRef = useRef10(optionsKey);
+  const bookOptionsRef = useRef10(bookOptions);
   bookOptionsRef.current = bookOptions;
-  const recomputeRef = useRef9(layoutCtx.recompute);
+  const recomputeRef = useRef10(layoutCtx.recompute);
   recomputeRef.current = layoutCtx.recompute;
-  useEffect7(() => {
+  useEffect8(() => {
     if (optionsKeyRef.current === optionsKey) return;
     optionsKeyRef.current = optionsKey;
     const timer = setTimeout(() => {
@@ -1715,20 +2060,21 @@ function MejiroReaderInner(props, ref) {
           await setOptions({ ...bookOptionsRef.current });
           await recomputeRef.current({ blank: false });
         } catch (err) {
-          reportError(err instanceof Error ? err : new Error(String(err)));
+          reportError(toError(err));
         }
       })();
     }, OPTIONS_DEBOUNCE_MS);
     return () => clearTimeout(timer);
   }, [optionsKey, setOptions, reportError]);
   const geometryKey = JSON.stringify(resolvedGeometry ?? null);
-  const geometryKeyRef = useRef9(geometryKey);
-  useEffect7(() => {
+  const geometryKeyRef = useRef10(geometryKey);
+  useEffect8(() => {
     if (geometryKeyRef.current === geometryKey) return;
     geometryKeyRef.current = geometryKey;
     void recomputeRef.current({ blank: false });
   }, [geometryKey]);
-  const imageCtx = useMultiImageOverlay(layoutCtx.layout, spreadCtx.spreadIdx, {
+  const imageCtx = useMultiImageOverlay(layoutCtx.layout, spreadCtx.layoutSpreadIdx, {
+    defaultX: IMAGE_DEFAULT_X,
     onUpdate: () => spreadCtx.refresh()
   });
   const annotationRects = useMemo4(() => {
@@ -1743,22 +2089,31 @@ function MejiroReaderInner(props, ref) {
       for (const rect of rects) result.push({ ...rect, color: annotation.color });
     }
     return result;
-  }, [annotations, layoutCtx.layout, chapter]);
-  const clearImagesRef = useRef9(imageCtx.clearImages);
+  }, [annotations, layoutCtx.layout, chapter, imageCtx.currentImages]);
+  const clearImagesRef = useRef10(imageCtx.clearImages);
   clearImagesRef.current = imageCtx.clearImages;
-  const onLoadRef = useRef9(onLoad);
+  const onLoadRef = useRef10(onLoad);
   onLoadRef.current = onLoad;
-  useEffect7(() => {
+  const eRef = useRef10(e);
+  eRef.current = e;
+  const sourceKey = isManuscriptSource ? MANUSCRIPT_SOURCE : epubProp;
+  useEffect8(() => {
     if (!controlled) return;
     if (chapterIsUncontrolled) setChapterState(0);
     clearImagesRef.current();
     book.clearCache();
-    if (e) onLoadRef.current?.(e);
-  }, [controlled, e, book, chapterIsUncontrolled]);
-  const spreadGoToRef = useRef9(spreadCtx.goTo);
+    if (eRef.current) onLoadRef.current?.(eRef.current);
+  }, [controlled, sourceKey, book, chapterIsUncontrolled]);
+  const imagesChapterRef = useRef10(chapter);
+  useEffect8(() => {
+    if (imagesChapterRef.current === chapter) return;
+    imagesChapterRef.current = chapter;
+    clearImagesRef.current();
+  }, [chapter]);
+  const spreadGoToRef = useRef10(spreadCtx.goTo);
   spreadGoToRef.current = spreadCtx.goTo;
-  const appliedSpreadIdxPropRef = useRef9(spreadIdxProp);
-  useEffect7(() => {
+  const appliedSpreadIdxPropRef = useRef10(spreadIdxProp);
+  useEffect8(() => {
     if (spreadIdxProp == null) {
       appliedSpreadIdxPropRef.current = spreadIdxProp;
       return;
@@ -1782,7 +2137,7 @@ function MejiroReaderInner(props, ref) {
     },
     [chapter, chapterProp, onChapterChange]
   );
-  const listenersRef = useRef9(/* @__PURE__ */ new Map());
+  const listenersRef = useRef10(/* @__PURE__ */ new Map());
   const emit = useCallback6(
     (event, payload) => {
       const set = listenersRef.current.get(event);
@@ -1791,8 +2146,15 @@ function MejiroReaderInner(props, ref) {
     },
     []
   );
-  const pendingAnchorRef = useRef9(null);
-  const layout = layoutCtx.layout;
+  const pendingAnchorRef = useRef10(null);
+  const layoutOwnerRef = useRef10({
+    layout: null,
+    chapter
+  });
+  if (layoutOwnerRef.current.layout !== layoutCtx.layout) {
+    layoutOwnerRef.current = { layout: layoutCtx.layout, chapter };
+  }
+  const layout = layoutOwnerRef.current.chapter === chapter ? layoutCtx.layout : null;
   const tryApplyPendingAnchor = useCallback6(() => {
     const pending = pendingAnchorRef.current;
     if (!pending) return;
@@ -1804,48 +2166,45 @@ function MejiroReaderInner(props, ref) {
     });
     if (!loc) return;
     pendingAnchorRef.current = null;
-    spreadGoToRef.current(loc.spreadIdx);
+    spreadGoToRef.current(indexOfPageRef.current(loc.pageIdx));
     pending.resolve();
   }, [chapter, layout]);
-  useEffect7(() => {
+  useEffect8(() => {
     tryApplyPendingAnchor();
   }, [tryApplyPendingAnchor]);
-  useEffect7(
+  useEffect8(
     () => () => {
       pendingAnchorRef.current?.resolve();
       pendingAnchorRef.current = null;
     },
     []
   );
-  const didMountRef = useRef9(false);
-  const dwellRef = useRef9(null);
-  const onPageReadRef = useRef9(onPageRead);
+  const onPageReadRef = useRef10(onPageRead);
   onPageReadRef.current = onPageRead;
-  const onChapterCompletedRef = useRef9(onChapterCompleted);
+  const onChapterCompletedRef = useRef10(onChapterCompleted);
   onChapterCompletedRef.current = onChapterCompleted;
-  useEffect7(() => {
-    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
-    if (didMountRef.current && dwellRef.current) {
-      onPageReadRef.current?.(dwellRef.current.anchor, now - dwellRef.current.ts);
-    }
-    if (layout) {
-      const inCh = layout.anchorAt(spreadCtx.spreadIdx, "right");
-      dwellRef.current = inCh ? { anchor: { chapter, ...inCh }, ts: now } : null;
-    } else {
-      dwellRef.current = null;
-    }
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return;
-    }
-    emit("spreadChanged", { chapter, spreadIdx: spreadCtx.spreadIdx });
-    if (spreadCtx.totalSpreads > 0 && spreadCtx.spreadIdx === spreadCtx.totalSpreads - 1) {
-      emit("chapterFinished", { chapter });
-      onChapterCompletedRef.current?.(chapter);
-    }
-  }, [chapter, spreadCtx.spreadIdx, spreadCtx.totalSpreads, layout, emit]);
-  const prevTurningRef = useRef9(false);
-  useEffect7(() => {
+  const trackLifecycleRef = useRef10(null);
+  trackLifecycleRef.current ??= createLifecycleTracker({
+    spreadChanged: (ch, spreadIdx) => emit("spreadChanged", { chapter: ch, spreadIdx }),
+    chapterFinished: (ch) => {
+      emit("chapterFinished", { chapter: ch });
+      onChapterCompletedRef.current?.(ch);
+    },
+    pageRead: (anchor, dwellMs) => onPageReadRef.current?.(anchor, dwellMs)
+  });
+  useEffect8(() => {
+    const view = layout ? { total: spreadCtx.totalSpreads, anchor: spreadCtx.anchorAt(spreadCtx.spreadIdx) } : null;
+    trackLifecycleRef.current?.(chapter, spreadCtx.spreadIdx, view, spreadIdxProp);
+  }, [
+    chapter,
+    spreadCtx.spreadIdx,
+    spreadCtx.totalSpreads,
+    spreadCtx.anchorAt,
+    layout,
+    spreadIdxProp
+  ]);
+  const prevTurningRef = useRef10(false);
+  useEffect8(() => {
     if (spreadCtx.turning && !prevTurningRef.current) {
       emit("turnStart", { from: spreadCtx.spreadIdx });
     } else if (!spreadCtx.turning && prevTurningRef.current) {
@@ -1874,23 +2233,14 @@ function MejiroReaderInner(props, ref) {
       }),
       getAnchor: () => {
         if (!layout) return null;
-        const inCh = layout.anchorAt(spreadCtx.spreadIdx, "right");
+        const inCh = spreadCtx.anchorAt(spreadCtx.spreadIdx);
         return inCh ? { chapter, ...inCh } : null;
       },
       getVisibleRange: () => {
         if (!layout) return null;
-        const start = layout.anchorAt(spreadCtx.spreadIdx, "right");
+        const start = spreadCtx.anchorAt(spreadCtx.spreadIdx);
         if (!start) return null;
-        const next = layout.anchorAt(spreadCtx.spreadIdx + 1, "right");
-        let end;
-        if (next) {
-          end = next;
-        } else {
-          const ch = e?.chapters[chapter];
-          const lastP = (ch?.paragraphs.length ?? 1) - 1;
-          const lastText = ch?.paragraphs[lastP]?.text ?? "";
-          end = { paragraph: Math.max(0, lastP), charIndex: [...lastText].length };
-        }
+        const end = spreadCtx.anchorAt(spreadCtx.spreadIdx + 1) ?? layout.endAnchor() ?? start;
         return {
           start: { chapter, ...start },
           end: { chapter, ...end }
@@ -1915,10 +2265,10 @@ function MejiroReaderInner(props, ref) {
       spreadCtx.spreadIdx,
       spreadCtx.totalPages,
       spreadCtx.totalSpreads,
+      spreadCtx.anchorAt,
       onChapter,
       chapter,
       layout,
-      e,
       setOptions,
       tryApplyPendingAnchor
     ]
@@ -1970,7 +2320,7 @@ function MejiroReaderInner(props, ref) {
         MejiroStats,
         {
           chapter: e?.chapters[chapter] ?? null,
-          totalPages: layoutCtx.layout?.totalPages ?? 0,
+          totalPages: spreadCtx.totalPages,
           elapsedMs: layoutCtx.elapsedMs,
           fontLabel
         }
@@ -1989,7 +2339,12 @@ function MejiroReaderInner(props, ref) {
         {
           type: "button",
           className: `mejiro-reader-btn${imageCtx.hasImages ? " is-active" : ""}`,
-          onClick: () => imageCtx.addImage(),
+          onClick: () => imageCtx.addImage(
+            singlePageImagePlacement(
+              mode === "paginated" ? spreadCtx.singleSide : null,
+              layoutCtx.pageWidth
+            )
+          ),
           children: resolvedMessages.imageButton
         }
       ),
@@ -2007,7 +2362,7 @@ function MejiroReaderInner(props, ref) {
       )
     ] })
   ] }) : null;
-  const currentSpread = spreadCtx.spreadIdx;
+  const currentSpread = spreadCtx.layoutSpreadIdx;
   const rightPage = currentSpread * 2 + 1;
   const leftPage = currentSpread * 2 + 2;
   const showLeft = spreadCtx.spread != null && leftPage <= spreadCtx.spread.totalPages;
@@ -2051,18 +2406,29 @@ function MejiroReaderInner(props, ref) {
                 fontFamily: bookOptions.fontFamily,
                 fontSize: bookOptions.fontSize,
                 lineSpacing: bookOptions.lineSpacing,
-                scrollToPage: spreadCtx.spreadIdx * 2,
+                scrollToPage: scrollTargetPage(
+                  spreadCtx,
+                  userScroll?.layout === layoutCtx.layout ? userScroll.page : null
+                ),
                 onVisiblePageChange: (pageIdx, source) => {
                   if (source === "programmatic") return;
-                  const target = Math.floor(pageIdx / 2);
+                  if (layoutCtx.layout) setUserScroll({ layout: layoutCtx.layout, 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,
+                onImagePointerDown: imageCtx.onOverlayPointerDown,
+                onImageResizePointerDown: imageCtx.onResizePointerDown,
+                onImageClose: imageCtx.removeImage
               }
             ),
             layoutReady && mode === "paginated" && spreadCtx.spread && /* @__PURE__ */ jsx13(
               MejiroSpread,
               {
                 singlePage: effectiveSingle,
+                singleSide: spreadCtx.singleSide ?? void 0,
                 onSwipe: (dir) => dir === "next" ? spreadCtx.next() : spreadCtx.prev(),
                 onSurfaceTap: enableSurfaceTap ? () => setChromeHidden((v) => !v) : void 0,
                 spread: spreadCtx.spread,
@@ -2094,7 +2460,7 @@ function MejiroReaderInner(props, ref) {
                 onImagePointerDown: imageCtx.onOverlayPointerDown,
                 onImageResizePointerDown: imageCtx.onResizePointerDown,
                 onImageClose: imageCtx.removeImage,
-                spreadIdx: spreadCtx.spreadIdx,
+                spreadIdx: spreadCtx.layoutSpreadIdx,
                 selectionRects: annotationRects.length ? annotationRects : void 0
               },
               `${chapter}-${spreadCtx.spreadIdx}-${layoutCtx.pageWidth}x${layoutCtx.pageHeight}`
@@ -2178,21 +2544,22 @@ function MejiroEditor({
   onError
 }) {
   const messages = useI18n();
-  const imageInputRef = useRef10(null);
-  const textareaRef = useRef10(null);
-  const [editor, setEditor] = useState8(null);
-  const [loading, setLoading] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [revision, setRevision] = useState8(0);
-  const [selection, setSelection] = useState8({ chapter: 0, paragraph: 0 });
-  const [text, setText] = useState8("");
-  const [rubyStart, setRubyStart] = useState8(0);
-  const [rubyEnd, setRubyEnd] = useState8(1);
-  const [rubyText, setRubyText] = useState8("");
-  const loadRequestIdRef = useRef10(0);
-  const onLoadRef = useRef10(onLoad);
-  const onErrorRef = useRef10(onError);
-  const limitsRef = useRef10(limits);
+  const imageInputRef = useRef11(null);
+  const textareaRef = useRef11(null);
+  const readerRef = useRef11(null);
+  const [editor, setEditor] = useState9(null);
+  const [loading, setLoading] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [revision, setRevision] = useState9(0);
+  const [selection, setSelection] = useState9({ chapter: 0, paragraph: 0 });
+  const [text, setText] = useState9("");
+  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);
   limitsRef.current = limits;
   const book = editor?.book ?? null;
   const chapter = book?.chapters[selection.chapter] ?? null;
@@ -2202,48 +2569,49 @@ function MejiroEditor({
     void revision;
     return book ? cloneEditableEpubBook(book) : null;
   }, [book, revision]);
-  useEffect8(() => {
+  useEffect9(() => {
     onLoadRef.current = onLoad;
   }, [onLoad]);
-  useEffect8(() => {
+  useEffect9(() => {
     onErrorRef.current = onError;
   }, [onError]);
-  const loadBufferForRequest = useCallback7(async (buffer, requestId) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const next = await EditableEpub.load(buffer, { limits: limitsRef.current });
-      if (requestId !== loadRequestIdRef.current) return;
-      setEditor(next);
-      setSelection({ chapter: 0, paragraph: 0 });
-      setRevision((value) => value + 1);
-      onLoadRef.current?.(next);
-    } catch (err) {
-      if (requestId === loadRequestIdRef.current) {
-        const nextError = err instanceof Error ? err : new Error(String(err));
-        setError(nextError);
-        onErrorRef.current?.(nextError);
-      }
-    } finally {
-      if (requestId === loadRequestIdRef.current) setLoading(false);
-    }
+  const reportError = useCallback7((nextError) => {
+    setError(nextError);
+    onErrorRef.current?.(nextError);
   }, []);
+  const loadBufferForRequest = useCallback7(
+    async (buffer, requestId) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const next = await EditableEpub.load(buffer, { limits: limitsRef.current });
+        if (requestId !== loadRequestIdRef.current) return;
+        setEditor(next);
+        setSelection({ chapter: 0, paragraph: 0 });
+        setRevision((value) => value + 1);
+        onLoadRef.current?.(next);
+      } catch (err) {
+        if (requestId === loadRequestIdRef.current) reportError(toError(err));
+      } finally {
+        if (requestId === loadRequestIdRef.current) setLoading(false);
+      }
+    },
+    [reportError]
+  );
   async function loadFile(file) {
     const requestId = ++loadRequestIdRef.current;
     setLoading(true);
     setError(null);
     try {
-      await loadBufferForRequest(await file.arrayBuffer(), requestId);
+      await loadBufferForRequest(await readEpubFile(file, limitsRef.current), requestId);
     } catch (err) {
       if (requestId === loadRequestIdRef.current) {
-        const nextError = err instanceof Error ? err : new Error(String(err));
-        setError(nextError);
-        onErrorRef.current?.(nextError);
+        reportError(toError(err));
         setLoading(false);
       }
     }
   }
-  useEffect8(() => {
+  useEffect9(() => {
     if (!epubUrl) return;
     let cancelled = false;
     const requestId = ++loadRequestIdRef.current;
@@ -2251,17 +2619,11 @@ function MejiroEditor({
       setLoading(true);
       setError(null);
       try {
-        const res = await fetch(epubUrl);
-        if (!res.ok) throw new Error(`Failed to load EPUB: ${res.status}`);
-        const buffer = await res.arrayBuffer();
+        const buffer = await fetchEpubBuffer(epubUrl);
         if (cancelled || requestId !== loadRequestIdRef.current) return;
         await loadBufferForRequest(buffer, requestId);
       } catch (err) {
-        if (!cancelled && requestId === loadRequestIdRef.current) {
-          const nextError = err instanceof Error ? err : new Error(String(err));
-          setError(nextError);
-          onErrorRef.current?.(nextError);
-        }
+        if (!cancelled && requestId === loadRequestIdRef.current) reportError(toError(err));
       } finally {
         if (!cancelled && requestId === loadRequestIdRef.current) setLoading(false);
       }
@@ -2269,13 +2631,32 @@ function MejiroEditor({
     return () => {
       cancelled = true;
     };
-  }, [epubUrl, loadBufferForRequest]);
-  useEffect8(() => {
-    setText(paragraph?.text ?? "");
+  }, [epubUrl, loadBufferForRequest, reportError]);
+  const syncedRef = useRef11(
+    null
+  );
+  useEffect9(() => {
+    const nextText = paragraph?.text ?? "";
+    const target = `${selection.chapter}:${selection.paragraph}`;
+    const prev = syncedRef.current;
+    syncedRef.current = { editor, target, text: nextText };
+    if (prev && prev.editor === editor && prev.target === target) {
+      setText((current) => current === prev.text ? nextText : current);
+      return;
+    }
+    setText(nextText);
     setRubyStart(0);
-    setRubyEnd(Math.min(1, [...paragraph?.text ?? ""].length));
+    setRubyEnd(Math.min(1, [...nextText].length));
     setRubyText("");
-  }, [paragraph]);
+  }, [editor, selection.chapter, selection.paragraph, paragraph]);
+  useEffect9(() => {
+    if (!previewBook) return;
+    void readerRef.current?.goToAnchor({
+      chapter: selection.chapter,
+      paragraph: selection.paragraph,
+      charIndex: 0
+    });
+  }, [previewBook, selection.chapter, selection.paragraph]);
   function selectParagraph(chapterIndex, paragraphIndex) {
     if (chapterIndex === selection.chapter && paragraphIndex === selection.paragraph) return;
     if (textDirty) applyText();
@@ -2322,39 +2703,49 @@ function MejiroEditor({
     setRevision((value) => value + 1);
   }
   async function addImage(file) {
-    if (!(editor && chapter)) return;
-    editor.addImage(selection.chapter, {
-      filename: file.name,
-      mediaType: file.type || "application/octet-stream",
-      data: await file.arrayBuffer(),
-      alt: file.name,
-      afterBlockId: paragraphBlockId(chapter, selection.paragraph)
-    });
-    setRevision((value) => value + 1);
+    await withErrorReporting(async () => {
+      if (!(editor && chapter)) return;
+      const chapterIndex = selection.chapter;
+      const afterBlockId = paragraphBlockId(chapter, selection.paragraph);
+      const data = await file.arrayBuffer();
+      editor.addImage(chapterIndex, {
+        filename: file.name,
+        mediaType: file.type || "application/octet-stream",
+        data,
+        alt: file.name,
+        afterBlockId
+      });
+      setRevision((value) => value + 1);
+    }, reportError);
   }
   async function exportEpub() {
-    if (!editor) return;
-    const watermark = exportPolicy?.watermark;
-    const source = watermark ? watermarkedBook(editor.book, watermark) : editor.book;
-    let buffer = await exportEditableEpub(source, assetResolver ? { assetResolver } : void 0);
-    if (exportPolicy?.encrypt) buffer = await exportPolicy.encrypt(buffer);
-    const decision = await onBeforeExport?.(buffer);
-    onExport?.(buffer);
-    if (decision === false) return;
-    if (exportPolicy?.allowDownload === false) 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);
+    await withErrorReporting(async () => {
+      if (!editor) return;
+      const watermark = exportPolicy?.watermark;
+      const source = watermark ? watermarkedBook(editor.book, watermark) : editor.book;
+      let buffer = await exportEditableEpub(source, assetResolver ? { assetResolver } : void 0);
+      if (exportPolicy?.encrypt) buffer = await exportPolicy.encrypt(buffer);
+      const decision = await onBeforeExport?.(buffer);
+      onExport?.(buffer);
+      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);
+    }, reportError);
   }
   return /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor", children: [
     /* @__PURE__ */ jsxs9("main", { className: "mejiro-editor-preview", children: [
       previewBook ? /* @__PURE__ */ jsx14(
         MejiroReader,
         {
+          ref: readerRef,
           epub: previewBook,
+          chapter: selection.chapter,
+          onChapterChange: (index) => selectParagraph(index, 0),
           fonts,
           subtitle: messages.editorPreviewSubtitle,
           chapterNavMode: "panel",
@@ -2472,7 +2863,7 @@ function paragraphBlockId(chapter, paragraphIndex) {
 
 // src/MejiroManuscriptEditor.tsx
 import { EpubProject } from "@libraz/mejiro/epub";
-import { useCallback as useCallback9, useEffect as useEffect10, useRef as useRef13, useState as useState11 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef14, useState as useState12 } from "react";
 
 // src/MejiroNotationHighlighter.tsx
 import { tokenizeManuscriptSource } from "@libraz/mejiro";
@@ -2480,8 +2871,8 @@ import {
   forwardRef as forwardRef2,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo6,
-  useRef as useRef11,
-  useState as useState9
+  useRef as useRef12,
+  useState as useState10
 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2({
@@ -2497,11 +2888,11 @@ var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2(
   onCompositionEnd,
   ...rest
 }, ref) {
-  const textareaRef = useRef11(null);
-  const overlayRef = useRef11(null);
+  const textareaRef = useRef12(null);
+  const overlayRef = useRef12(null);
   useImperativeHandle2(ref, () => textareaRef.current, []);
-  const [isComposing, setIsComposing] = useState9(false);
-  const lastSegmentsRef = useRef11(null);
+  const [isComposing, setIsComposing] = useState10(false);
+  const lastSegmentsRef = useRef12(null);
   const segments = useMemo6(() => {
     if (isComposing && lastSegmentsRef.current) return lastSegmentsRef.current;
     const next = buildSegments(value, dialect);
@@ -2590,10 +2981,11 @@ function buildSegments(text, dialect) {
 }
 
 // src/useManuscriptDraft.ts
-import { useCallback as useCallback8, useEffect as useEffect9, useRef as useRef12, useState as useState10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef13, useState as useState11 } from "react";
 var DEFAULT_DELAY = 800;
-function defaultChapter(index, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
-  return { id: `chapter-${Date.now()}-${index}`, title: titleFor(index), body: bodyFor(index) };
+function defaultChapter(existing, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
+  const index = existing.length;
+  return { id: uniqueChapterId(existing), title: titleFor(index), body: bodyFor(index) };
 }
 function useManuscriptDraft(options = {}) {
   const {
@@ -2604,28 +2996,30 @@ function useManuscriptDraft(options = {}) {
     defaultChapterTitle,
     defaultChapterBody
   } = options;
-  const titleForRef = useRef12(defaultChapterTitle);
+  const titleForRef = useRef13(defaultChapterTitle);
   titleForRef.current = defaultChapterTitle;
-  const bodyForRef = useRef12(defaultChapterBody);
+  const bodyForRef = useRef13(defaultChapterBody);
   bodyForRef.current = defaultChapterBody;
-  const [chapters, setChaptersState] = useState10(
-    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter(0, defaultChapterTitle, defaultChapterBody)]
+  const [chapters, setChaptersState] = useState11(
+    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter([], defaultChapterTitle, defaultChapterBody)]
   );
-  const [selected, setSelectedState] = useState10(0);
-  const [autosaveError, setAutosaveError] = useState10(null);
-  const saveRef = useRef12(onAutosave);
+  const [selected, setSelectedState] = useState11(0);
+  const [autosaveError, setAutosaveError] = useState11(null);
+  const saveRef = useRef13(onAutosave);
   saveRef.current = onAutosave;
-  const payloadRef = useRef12(autosavePayload);
+  const payloadRef = useRef13(autosavePayload);
   payloadRef.current = autosavePayload;
-  const chaptersRef = useRef12(chapters);
+  const chaptersRef = useRef13(chapters);
   chaptersRef.current = chapters;
-  const selectedRef = useRef12(selected);
+  const selectedRef = useRef13(selected);
   selectedRef.current = selected;
-  const didMountRef = useRef12(false);
-  const dirtyRef = useRef12(false);
-  const mountedRef = useRef12(true);
-  const revisionRef = useRef12(0);
-  const inFlightRevisionRef = useRef12(-1);
+  const trackerRef = useRef13(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 callback = saveRef.current;
     if (!(callback && dirtyRef.current) || inFlightRevisionRef.current === revisionRef.current) {
@@ -2633,38 +3027,36 @@ function useManuscriptDraft(options = {}) {
     }
     const revision = revisionRef.current;
     inFlightRevisionRef.current = revision;
-    const payload = payloadRef.current ? payloadRef.current(chaptersRef.current) : chaptersRef.current;
+    const plain = snapshotChapters(chaptersRef.current);
+    const payload = payloadRef.current ? payloadRef.current(plain) : plain;
     void Promise.resolve(callback(payload)).then(() => {
       if (revisionRef.current === revision) dirtyRef.current = false;
     }).catch((err) => {
       if (!mountedRef.current) return;
-      setAutosaveError(err instanceof Error ? err : new Error(String(err)));
+      setAutosaveError(toError(err));
     }).finally(() => {
       if (inFlightRevisionRef.current === revision) inFlightRevisionRef.current = -1;
     });
   }, []);
-  useEffect9(() => {
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return void 0;
+  useEffect10(() => {
+    if (trackerRef.current?.changed(chapters, autosaveKey ?? "")) {
+      dirtyRef.current = true;
+      revisionRef.current += 1;
+      setAutosaveError(null);
     }
-    if (!saveRef.current) return void 0;
-    dirtyRef.current = true;
-    revisionRef.current += 1;
-    setAutosaveError(null);
+    if (!(saveRef.current && dirtyRef.current)) return void 0;
     const timer = setTimeout(() => {
       flushAutosave();
     }, autosaveDelay);
     return () => clearTimeout(timer);
   }, [chapters, autosaveKey, autosaveDelay, flushAutosave]);
-  useEffect9(() => {
+  useEffect10(() => {
     mountedRef.current = true;
-    const handleBeforeUnload = () => flushAutosave();
-    window.addEventListener("beforeunload", handleBeforeUnload);
+    const detachPageHide = flushOnPageHide(flushAutosave);
     return () => {
       flushAutosave();
       mountedRef.current = false;
-      window.removeEventListener("beforeunload", handleBeforeUnload);
+      detachPageHide();
     };
   }, [flushAutosave]);
   const commit = useCallback8((nextChapters, nextSelected) => {
@@ -2680,7 +3072,7 @@ function useManuscriptDraft(options = {}) {
   }, []);
   const setChapters = useCallback8(
     (next) => {
-      const normalized = next.length ? next : [defaultChapter(0, titleForRef.current, bodyForRef.current)];
+      const normalized = next.length ? next : [defaultChapter([], titleForRef.current, bodyForRef.current)];
       const prev = selectedRef.current;
       const selectedId = chaptersRef.current[prev]?.id;
       const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
@@ -2701,7 +3093,7 @@ function useManuscriptDraft(options = {}) {
   const addChapter = useCallback8(
     (chapter = {}) => {
       const current = chaptersRef.current;
-      const generated = defaultChapter(current.length, titleForRef.current, bodyForRef.current);
+      const generated = defaultChapter(current, titleForRef.current, bodyForRef.current);
       const next = [
         ...current,
         {
@@ -2815,24 +3207,24 @@ function MejiroManuscriptEditor({
   panelSide = "right"
 }) {
   const messages = useI18n();
-  const coverInputRef = useRef13(null);
-  const bodyTextareaRef = useRef13(null);
+  const coverInputRef = useRef14(null);
+  const bodyTextareaRef = useRef14(null);
   const titleControlled = onTitleChange !== void 0;
   const authorControlled = onAuthorChange !== void 0;
   const coverControlled = onCoverChange !== void 0;
-  const [titleState, setTitleState] = useState11(titleProp ?? messages.manuscriptDefaultTitle);
-  const [authorState, setAuthorState] = useState11(authorProp ?? "");
-  const [coverState, setCoverState] = useState11(coverProp ?? null);
+  const [titleState, setTitleState] = useState12(titleProp ?? messages.manuscriptDefaultTitle);
+  const [authorState, setAuthorState] = useState12(authorProp ?? "");
+  const [coverState, setCoverState] = useState12(coverProp ?? null);
   const title = titleControlled ? titleProp ?? "" : titleState;
   const author = authorControlled ? authorProp ?? "" : authorState;
   const cover = coverControlled ? coverProp ?? null : coverState;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!titleControlled && titleProp !== void 0) setTitleState(titleProp);
   }, [titleControlled, titleProp]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!authorControlled && authorProp !== void 0) setAuthorState(authorProp);
   }, [authorControlled, authorProp]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!coverControlled && coverProp !== void 0) setCoverState(coverProp);
   }, [coverControlled, coverProp]);
   const setTitle = useCallback9(
@@ -2874,8 +3266,8 @@ function MejiroManuscriptEditor({
     reorderChapters
   } = draft;
   const current = chapters[selected] ?? chapters[0];
-  const [draggingIndex, setDraggingIndex] = useState11(null);
-  const [exportError, setExportError] = useState11(null);
+  const [draggingIndex, setDraggingIndex] = useState12(null);
+  const [exportError, setExportError] = useState12(null);
   function wrapSelection(open, close) {
     const el = bodyTextareaRef.current;
     if (!el) return;
@@ -2893,57 +3285,69 @@ function MejiroManuscriptEditor({
       bodyTextareaRef.current.setSelectionRange(start + open.length, caret);
     });
   }
+  const [identifier] = useState12(() => `urn:uuid:${crypto.randomUUID()}`);
   const exportEpub = useCallback9(async () => {
-    try {
-      const project = EpubProject.fromManuscript({
-        metadata: { title, author: author || void 0 },
-        dialect,
-        chapters: chapters.map((chapter) => ({
-          id: chapter.id,
-          title: chapter.title || messages.untitled,
-          body: chapter.body
-        }))
-      });
-      if (cover) {
-        project.setCover({
-          href: coverAssetHref(cover),
-          mediaType: cover.type || void 0,
-          data: await cover.arrayBuffer()
+    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
+          }))
         });
+        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);
-      setExportError(null);
-      onExport?.(buffer);
-      downloadEpub(buffer, title);
-    } catch (cause) {
-      const error = cause instanceof Error ? cause : new Error(String(cause));
-      setExportError(error);
-      onError?.(error);
-    }
+    );
   }, [
     assetResolver,
     author,
     chapters,
     cover,
     dialect,
+    identifier,
     messages.untitled,
     onError,
     onExport,
     title
   ]);
+  const previewManuscript = useMemo7(
+    () => chapters.map((chapter) => ({
+      id: chapter.id,
+      title: chapter.title || messages.untitled,
+      body: chapter.body
+    })),
+    [chapters, messages.untitled]
+  );
   return /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor mejiro-manuscript-editor", "data-panel-side": panelSide, children: [
     /* @__PURE__ */ jsx16("main", { className: "mejiro-editor-preview", children: /* @__PURE__ */ jsx16(
       MejiroReader,
       {
-        subtitle: messages.manuscriptPreviewSubtitle,
-        chapterNavMode: "panel",
-        enableSurfaceTap: false,
-        ...previewProps,
-        manuscript: chapters.map((chapter) => ({
-          id: chapter.id,
-          title: chapter.title || messages.untitled,
-          body: chapter.body
-        })),
+        ...mergeDefined(
+          {
+            subtitle: messages.manuscriptPreviewSubtitle,
+            chapterNavMode: "panel",
+            enableSurfaceTap: false
+          },
+          previewProps ?? {}
+        ),
+        manuscript: previewManuscript,
         dialect,
         fonts,
         chapter: selected,
@@ -3097,12 +3501,15 @@ function MejiroShelf({
 }
 
 // src/MejiroToc.tsx
-import { useMemo as useMemo7, useState as useState12 } from "react";
+import { useMemo as useMemo8, 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) => {
     const title = ch.title ?? format(messages.chapterN, { n: i + 1 });
-    const headings = ch.paragraphs.filter((p) => p.headingLevel && p.text.trim() && p.text.trim() !== title).map((p) => p.text.trim());
+    const headings = ch.paragraphs.flatMap((p, paragraph) => {
+      const text = p.text.trim();
+      return p.headingLevel && text && text !== title ? [{ paragraph, text }] : [];
+    });
     return { index: i, title, headings };
   });
 }
@@ -3117,13 +3524,13 @@ function MejiroToc({
   const messages = useI18n();
   const resolvedTitle = title ?? messages.tocTitle;
   const resolvedSearchPlaceholder = searchPlaceholder ?? messages.tocSearchPlaceholder;
-  const [query, setQuery] = useState12("");
-  const entries = useMemo7(() => buildEntries(epub, messages), [epub, messages]);
-  const filtered = useMemo7(() => {
+  const [query, setQuery] = useState13("");
+  const entries = useMemo8(() => buildEntries(epub, messages), [epub, messages]);
+  const filtered = useMemo8(() => {
     if (!query) return entries;
     const needle = query.toLowerCase();
     return entries.filter(
-      (e) => e.title.toLowerCase().includes(needle) || e.headings.some((h) => h.toLowerCase().includes(needle))
+      (e) => e.title.toLowerCase().includes(needle) || e.headings.some((h) => h.text.toLowerCase().includes(needle))
     );
   }, [entries, query]);
   const activeIndex = currentAnchor?.chapter ?? -1;
@@ -3156,7 +3563,7 @@ function MejiroToc({
           ]
         }
       ),
-      entry.headings.length > 0 && /* @__PURE__ */ jsx18("ul", { className: "mejiro-toc-subheads", children: entry.headings.slice(0, 5).map((h) => /* @__PURE__ */ jsx18("li", { className: "mejiro-toc-subhead", children: h }, h)) })
+      entry.headings.length > 0 && /* @__PURE__ */ jsx18("ul", { className: "mejiro-toc-subheads", children: entry.headings.slice(0, 5).map((h) => /* @__PURE__ */ jsx18("li", { className: "mejiro-toc-subhead", children: h.text }, h.paragraph)) })
     ] }, entry.index)) }),
     filtered.length === 0 && /* @__PURE__ */ jsx18("div", { className: "mejiro-toc-empty", role: "status", children: format(messages.tocEmpty, { query }) })
   ] });
@@ -3169,80 +3576,44 @@ import {
   serializeAnnotations,
   sortAnnotations
 } from "@libraz/mejiro";
-import { useCallback as useCallback10, useEffect as useEffect11, useRef as useRef14, useState as useState13 } from "react";
-function resolveDefaultStorage() {
-  if (typeof globalThis === "undefined") return null;
-  const w = globalThis.localStorage;
-  return w ?? null;
+import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef15, useState as useState14 } 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] = useState13(() => {
-    if (!storage) return [];
-    try {
-      return sortAnnotations(parseAnnotations(storage.getItem(key)));
-    } catch {
-      return [];
-    }
-  });
-  const storageRef = useRef14(storage);
+  const [annotations, setAnnotations] = useState14(
+    () => readStorage(storage, key, parseSorted, [])
+  );
+  const storageRef = useRef15(storage);
   storageRef.current = storage;
-  const annotationsRef = useRef14(annotations);
+  const annotationsRef = useRef15(annotations);
   const applyNext = useCallback10((next) => {
     annotationsRef.current = next;
     setAnnotations(next);
   }, []);
-  const timerRef = useRef14(null);
-  const pendingWriteRef = useRef14(null);
-  const flushPending = useCallback10(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    const write = pendingWriteRef.current;
-    pendingWriteRef.current = null;
-    if (!write) return;
-    try {
-      write();
-    } catch {
-    }
-  }, []);
-  const cancelPending = useCallback10(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    pendingWriteRef.current = null;
-  }, []);
-  useEffect11(() => {
-    const currentStorage = storageRef.current;
-    if (currentStorage) {
-      try {
-        applyNext(sortAnnotations(parseAnnotations(currentStorage.getItem(key))));
-      } catch {
-        applyNext([]);
-      }
-    } else {
-      applyNext([]);
-    }
-    return flushPending;
-  }, [key, applyNext, flushPending]);
-  const onChangeRef = useRef14(options.onChange);
+  const pendingRef = useRef15(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);
   onChangeRef.current = options.onChange;
   const commit = useCallback10(
     (next) => {
       const currentStorage = storageRef.current;
       if (currentStorage) {
-        cancelPending();
-        pendingWriteRef.current = () => {
+        pending.schedule(() => {
           currentStorage.setItem(key, serializeAnnotations(next));
-        };
-        timerRef.current = setTimeout(flushPending, throttleMs);
+        }, throttleMs);
       }
       onChangeRef.current?.(next);
     },
-    [key, throttleMs, cancelPending, flushPending]
+    [key, throttleMs, pending]
   );
   const add = useCallback10(
     (input) => {
@@ -3274,7 +3645,7 @@ function useAnnotations(options) {
       const next = annotationsRef.current.map((annotation) => {
         if (annotation.id !== id) return annotation;
         changed = true;
-        return { ...annotation, ...patch, id };
+        return { ...mergeDefined(annotation, patch), id };
       });
       if (!changed) return;
       const sorted = sortAnnotations(next);
@@ -3285,16 +3656,10 @@ function useAnnotations(options) {
   );
   const clear = useCallback10(() => {
     applyNext([]);
-    const currentStorage = storageRef.current;
-    if (currentStorage) {
-      cancelPending();
-      try {
-        currentStorage.removeItem(key);
-      } catch {
-      }
-    }
+    pending.cancel();
+    removeStorage(storageRef.current, key);
     onChangeRef.current?.([]);
-  }, [key, cancelPending, applyNext]);
+  }, [key, pending, applyNext]);
   return { annotations, add, remove, update, clear };
 }
 
@@ -3304,26 +3669,32 @@ import {
   cloneEditableEpubBook as cloneEditableEpubBook2,
   EditableEpub as EditableEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback11, useEffect as useEffect12, useMemo as useMemo8, useRef as useRef15, useState as useState14 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect13, useMemo as useMemo9, useRef as useRef16, useState as useState15 } from "react";
 function useEditableEpub(options = {}) {
-  const [editor, setEditor] = useState14(null);
-  const [loading, setLoading] = useState14(false);
-  const [exporting, setExporting] = useState14(false);
-  const [error, setError] = useState14(null);
-  const [revision, setRevision] = useState14(0);
-  const [selection, setSelectionState] = useState14({
+  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({
     chapter: 0,
     paragraph: 0
   });
-  const requestIdRef = useRef15(0);
-  const onLoadRef = useRef15(options.onLoad);
-  const onErrorRef = useRef15(options.onError);
-  const onExportRef = useRef15(options.onExport);
-  const limitsRef = useRef15(options.limits);
+  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);
   onLoadRef.current = options.onLoad;
   onErrorRef.current = options.onError;
   onExportRef.current = options.onExport;
   limitsRef.current = options.limits;
+  assetResolverRef.current = options.assetResolver;
+  const editorRef = useRef16(editor);
+  editorRef.current = editor;
+  const selectionRef = useRef16(selection);
+  selectionRef.current = selection;
   const loadBufferWithRequest = useCallback11(
     async (buffer, requestId) => {
       setLoading(true);
@@ -3331,14 +3702,17 @@ function useEditableEpub(options = {}) {
       try {
         const next = await EditableEpub2.load(buffer, { limits: limitsRef.current });
         if (requestId !== requestIdRef.current) return null;
+        const firstParagraph = { chapter: 0, paragraph: 0 };
+        editorRef.current = next;
+        selectionRef.current = firstParagraph;
         setEditor(next);
-        setSelectionState({ chapter: 0, paragraph: 0 });
+        setSelectionState(firstParagraph);
         setRevision((value) => value + 1);
         onLoadRef.current?.(next);
         return next;
       } catch (err) {
         if (requestId === requestIdRef.current) {
-          const nextError = err instanceof Error ? err : new Error(String(err));
+          const nextError = toError(err);
           setError(nextError);
           onErrorRef.current?.(nextError);
         }
@@ -3362,10 +3736,10 @@ function useEditableEpub(options = {}) {
       setLoading(true);
       setError(null);
       try {
-        return await loadBufferWithRequest(await file.arrayBuffer(), requestId);
+        return await loadBufferWithRequest(await readEpubFile(file, limitsRef.current), requestId);
       } catch (err) {
         if (requestId === requestIdRef.current) {
-          const nextError = err instanceof Error ? err : new Error(String(err));
+          const nextError = toError(err);
           setError(nextError);
           onErrorRef.current?.(nextError);
           setLoading(false);
@@ -3381,12 +3755,10 @@ function useEditableEpub(options = {}) {
       setLoading(true);
       setError(null);
       try {
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Failed to load EPUB: ${res.status}`);
-        return await loadBufferWithRequest(await res.arrayBuffer(), requestId);
+        return await loadBufferWithRequest(await fetchEpubBuffer(url), requestId);
       } catch (err) {
         if (requestId === requestIdRef.current) {
-          const nextError = err instanceof Error ? err : new Error(String(err));
+          const nextError = toError(err);
           setError(nextError);
           onErrorRef.current?.(nextError);
           setLoading(false);
@@ -3396,74 +3768,74 @@ function useEditableEpub(options = {}) {
     },
     [loadBufferWithRequest]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (options.defaultUrl) void loadUrl(options.defaultUrl);
   }, [options.defaultUrl, loadUrl]);
   const book = editor?.book ?? null;
   const selectedParagraph = book?.chapters[selection.chapter]?.paragraphs[selection.paragraph] ?? null;
-  const previewBook = useMemo8(() => {
+  const previewBook = useMemo9(() => {
     void revision;
     return book ? cloneEditableEpubBook2(book) : null;
   }, [book, revision]);
   const history = editor?.history ?? null;
-  const setSelection = useCallback11(
-    (nextSelection) => {
-      setSelectionState(clampEditableEpubSelection(book, nextSelection));
-    },
-    [book]
-  );
+  const setSelection = useCallback11((nextSelection) => {
+    const next = clampEditableEpubSelection(editorRef.current?.book ?? null, nextSelection);
+    selectionRef.current = next;
+    setSelectionState(next);
+  }, []);
   const updateParagraph = useCallback11(
     (text, inlineAnnotations) => {
-      if (!editor) return;
-      editor.updateParagraph(selection.chapter, selection.paragraph, {
-        text,
-        inlineAnnotations
-      });
-      setRevision((value) => value + 1);
-    },
-    [editor, selection.chapter, selection.paragraph]
-  );
-  const setInlineAnnotations = useCallback11(
-    (inlineAnnotations) => {
-      if (!editor) return;
-      editor.setInlineAnnotations(selection.chapter, selection.paragraph, inlineAnnotations);
-      setRevision((value) => value + 1);
-    },
-    [editor, selection.chapter, selection.paragraph]
-  );
-  const addImage = useCallback11(
-    (image) => {
-      if (!editor) return;
-      editor.addImage(selection.chapter, image);
+      const current = editorRef.current;
+      if (!current) return;
+      const { chapter, paragraph } = selectionRef.current;
+      current.updateParagraph(chapter, paragraph, { text, inlineAnnotations });
       setRevision((value) => value + 1);
     },
-    [editor, selection.chapter]
+    []
   );
+  const setInlineAnnotations = useCallback11((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 current = editorRef.current;
+    if (!current) return;
+    current.addImage(selectionRef.current.chapter, image);
+    setRevision((value) => value + 1);
+  }, []);
   const undo = useCallback11(() => {
-    if (!editor) return false;
-    const changed = editor.undo();
+    const current = editorRef.current;
+    if (!current) return false;
+    const changed = current.undo();
     if (changed) setRevision((value) => value + 1);
     return changed;
-  }, [editor]);
+  }, []);
   const redo = useCallback11(() => {
-    if (!editor) return false;
-    const changed = editor.redo();
+    const current = editorRef.current;
+    if (!current) return false;
+    const changed = current.redo();
     if (changed) setRevision((value) => value + 1);
     return changed;
-  }, [editor]);
+  }, []);
   const exportEpub = useCallback11(
-    async (options2) => {
-      if (!editor) return null;
+    async (exportOptions) => {
+      const current = editorRef.current;
+      if (!current) return null;
       setExporting(true);
       try {
-        const buffer = await editor.export(options2);
+        const buffer = await current.export(
+          withAssetResolver(exportOptions, assetResolverRef.current)
+        );
         onExportRef.current?.(buffer);
         return buffer;
       } finally {
         setExporting(false);
       }
     },
-    [editor]
+    []
   );
   return {
     editor,
@@ -3488,62 +3860,79 @@ function useEditableEpub(options = {}) {
     exportEpub
   };
 }
+function withAssetResolver(options, resolver) {
+  if (!resolver || options?.assetResolver) return options;
+  return { ...options, assetResolver: resolver };
+}
 
 // src/useEpubProject.ts
 import {
   EpubProject as EpubProject2,
   parseEpub as parseEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback12, useEffect as useEffect13, useMemo as useMemo9, useRef as useRef16, useState as useState15 } from "react";
+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] = useState15({
-    title: "\u65B0\u3057\u3044\u4F5C\u54C1",
-    language: "ja",
-    ...options.metadata
-  });
-  const [chapters, setChaptersState] = useState15(
-    options.chapters?.length ? options.chapters : [defaultChapter3(0, defaultTitle, defaultBody)]
+  const [metadata, setMetadataState] = useState16(
+    () => initialMetadata(options.metadata)
   );
-  const [selectedChapter, setSelectedChapterState] = useState15(0);
-  const [cover, setCoverState] = useState15(options.cover ?? null);
-  const [assets, setAssetsState] = useState15(options.assets ?? []);
-  const [previewBook, setPreviewBook] = useState15(null);
-  const [previewError, setPreviewError] = useState15(null);
-  const [previewing, setPreviewing] = useState15(false);
-  const previewRequestIdRef = useRef16(0);
-  const onPreviewRef = useRef16(options.onPreview);
-  const onExportRef = useRef16(options.onExport);
+  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,
+      metadata: metadataRef.current,
       includeTitlePage: false,
       includeTitleInFirstChapter: true,
-      chapters: chapters.map((chapter) => ({
+      chapters: chaptersRef.current.map((chapter) => ({
         id: chapter.id,
         title: chapter.title || "Untitled",
         body: chapter.body
       })),
-      ...cover ? { cover } : {}
+      ...currentCover ? { cover: currentCover } : {}
     });
-    for (const asset of assets) project.addAsset(asset);
+    for (const asset of assetsRef.current) project.addAsset(asset);
     return project;
-  }, [assets, chapters, cover, metadata]);
-  const assetResolverRef = useRef16(options.assetResolver);
-  assetResolverRef.current = options.assetResolver;
-  useEffect13(() => {
+  }, []);
+  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 resolver = assetResolverRef.current;
           const book = await parseEpub2(
-            await buildProject().export(resolver ? { assetResolver: resolver } : void 0)
+            await buildProject().export(exportOptions(controller.signal))
           );
           if (cancelled || requestId !== previewRequestIdRef.current) return;
           setPreviewBook(book);
@@ -3551,7 +3940,7 @@ function useEpubProject(options = {}) {
           onPreviewRef.current?.(book);
         } catch (err) {
           if (!cancelled && requestId === previewRequestIdRef.current) {
-            setPreviewError(err instanceof Error ? err : new Error(String(err)));
+            setPreviewError(toError(err));
           }
         } finally {
           if (!cancelled && requestId === previewRequestIdRef.current) setPreviewing(false);
@@ -3562,99 +3951,107 @@ function useEpubProject(options = {}) {
       cancelled = true;
       previewRequestIdRef.current++;
       clearTimeout(timer);
+      controller.abort();
     };
-  }, [buildProject, options.debounceMs]);
+  }, [assets, buildProject, chapters, cover, exportOptions, metadata, options.debounceMs]);
   const currentChapter = chapters[selectedChapter] ?? chapters[0] ?? null;
   const setMetadata = useCallback12((patch) => {
-    setMetadataState((current) => ({ ...current, ...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(0, defaultTitle, defaultBody)];
-      setChaptersState(normalized);
-      setSelectedChapterState((current) => {
-        const selectedId = chapters[current]?.id;
-        const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
-        return nextIndex >= 0 ? nextIndex : Math.max(0, Math.min(current, normalized.length - 1));
-      });
+      const 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))
+      );
     },
-    [chapters, defaultBody, defaultTitle]
+    [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) => {
-      setSelectedChapterState(Math.max(0, Math.min(index, chapters.length - 1)));
-    },
-    [chapters.length]
-  );
+  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) => {
-    setChaptersState(
-      (current) => current.map(
-        (chapter, chapterIndex) => chapterIndex === index ? { ...chapter, ...patch } : chapter
-      )
+    const next = chaptersRef.current.map(
+      (chapter, chapterIndex) => chapterIndex === index ? { ...chapter, ...patch } : chapter
     );
+    chaptersRef.current = next;
+    setChaptersState(next);
   }, []);
   const addChapter = useCallback12(
     (chapter = {}) => {
-      setChaptersState((current) => {
-        const generated = defaultChapter3(current.length, defaultTitle, defaultBody);
-        const next = [
-          ...current,
-          {
-            id: chapter.id ?? generated.id,
-            title: chapter.title ?? generated.title,
-            body: chapter.body ?? generated.body
-          }
-        ];
-        setSelectedChapterState(next.length - 1);
-        return next;
-      });
+      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);
     },
-    [defaultBody, defaultTitle]
+    [commit, defaultBody, defaultTitle]
   );
   const removeChapter = useCallback12(
-    (index = selectedChapter) => {
-      setChaptersState((current) => {
-        if (current.length <= 1) return current;
-        const next = current.filter((_, chapterIndex) => chapterIndex !== index);
-        setSelectedChapterState((currentSelected) => {
-          if (currentSelected === index) return Math.max(0, Math.min(index, next.length - 1));
-          if (index < currentSelected) return currentSelected - 1;
-          return Math.max(0, Math.min(currentSelected, next.length - 1));
-        });
-        return next;
-      });
+    (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);
     },
-    [selectedChapter]
+    [commit]
   );
-  const reorderChapters = useCallback12((from, to) => {
-    setChaptersState((current) => {
-      if (from < 0 || from >= current.length) return current;
+  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);
-      setSelectedChapterState((currentSelected) => {
-        if (currentSelected === from) return target;
-        if (from < currentSelected && target >= currentSelected) return currentSelected - 1;
-        if (from > currentSelected && target <= currentSelected) return currentSelected + 1;
-        return currentSelected;
-      });
-      return next;
-    });
-  }, []);
+      const prev = selectedRef.current;
+      let nextSelected = prev;
+      if (prev === from) nextSelected = target;
+      else if (from < prev && target >= prev) nextSelected = prev - 1;
+      else if (from > prev && target <= prev) nextSelected = prev + 1;
+      commit(next, nextSelected);
+    },
+    [commit]
+  );
   const exportEpub = useCallback12(async () => {
-    const resolver = assetResolverRef.current;
-    const buffer = await buildProject().export(resolver ? { assetResolver: resolver } : void 0);
+    const buffer = await buildProject().export(exportOptions());
     onExportRef.current?.(buffer);
     return buffer;
-  }, [buildProject]);
-  return useMemo9(
+  }, [buildProject, exportOptions]);
+  return useMemo10(
     () => ({
       metadata,
       chapters,
@@ -3701,21 +4098,26 @@ function useEpubProject(options = {}) {
     ]
   );
 }
-function defaultChapter3(index, 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" : "") {
-  return {
-    id: `chapter-${Date.now()}-${index}`,
-    title: titleFor(index),
-    body: bodyFor(index)
-  };
+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 } from "@libraz/mejiro/browser";
+import { createOverlayDragSession as createOverlayDragSession2, isPrimaryPointerPress as isPrimaryPointerPress3 } from "@libraz/mejiro/browser";
 import {
   useCallback as useCallback13,
-  useEffect as useEffect14,
-  useRef as useRef17,
-  useState as useState16
+  useEffect as useEffect15,
+  useRef as useRef18,
+  useState as useState17
 } from "react";
 function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defW = options?.defaultWidth ?? 120;
@@ -3723,17 +4125,17 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defX = options?.defaultX ?? 80;
   const defY = options?.defaultY ?? 100;
   const margin = options?.margin;
-  const [imageRect, setImageRect] = useState16(null);
-  const rectRef = useRef17(imageRect);
+  const [imageRect, setImageRect] = useState17(null);
+  const rectRef = useRef18(imageRect);
   rectRef.current = imageRect;
-  const layoutRef = useRef17(layout);
+  const layoutRef = useRef18(layout);
   layoutRef.current = layout;
-  const spreadRef = useRef17(spreadIdx);
+  const spreadRef = useRef18(spreadIdx);
   spreadRef.current = spreadIdx;
-  const onUpdateRef = useRef17(onUpdate);
+  const onUpdateRef = useRef18(onUpdate);
   onUpdateRef.current = onUpdate;
-  const activeDragCleanupsRef = useRef17(/* @__PURE__ */ new Set());
-  useEffect14(
+  const activeDragCleanupsRef = useRef18(/* @__PURE__ */ new Set());
+  useEffect15(
     () => () => {
       for (const cleanup of activeDragCleanupsRef.current) cleanup();
       activeDragCleanupsRef.current.clear();
@@ -3750,20 +4152,17 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     [margin]
   );
-  const syncedRef = useRef17({
-    layout,
-    spreadIdx
-  });
-  useEffect14(() => {
+  const syncedRef = useRef18({ layout, spreadIdx, margin });
+  useEffect15(() => {
     const prev = syncedRef.current;
-    syncedRef.current = { layout, spreadIdx };
-    if (prev.layout === layout && prev.spreadIdx === spreadIdx) return;
+    syncedRef.current = { layout, spreadIdx, margin };
+    if (prev.layout === layout && prev.spreadIdx === spreadIdx && prev.margin === margin) return;
     if (rectRef.current === null) return;
     if (prev.layout && prev.spreadIdx !== spreadIdx) {
       prev.layout.syncImages(prev.spreadIdx, void 0);
     }
     syncToLayout(rectRef.current);
-  }, [layout, spreadIdx, syncToLayout]);
+  }, [layout, spreadIdx, margin, syncToLayout]);
   const toggleImage = useCallback13(() => {
     if (rectRef.current) {
       setImageRect(null);
@@ -3783,6 +4182,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   );
   const onOverlayPointerDown = useCallback13(
     (e) => {
+      if (!isPrimaryPointerPress3(e)) return;
       e.preventDefault();
       const current = rectRef.current;
       if (!current) return;
@@ -3795,7 +4195,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
         pointerId: e.nativeEvent.pointerId,
         captureElement: target,
         activeElement: target,
-        dragClass: "dragging",
+        dragClass: "is-dragging",
         registry: activeDragCleanupsRef.current,
         onChange: applyRect
       });
@@ -3804,6 +4204,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   );
   const onResizePointerDown = useCallback13(
     (e) => {
+      if (!isPrimaryPointerPress3(e)) return;
       e.preventDefault();
       e.stopPropagation();
       const current = rectRef.current;
@@ -3817,7 +4218,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
         pointerId: e.nativeEvent.pointerId,
         captureElement: target,
         activeElement: target.parentElement,
-        dragClass: "dragging",
+        dragClass: "is-dragging",
         registry: activeDragCleanupsRef.current,
         onChange: applyRect
       });
@@ -3834,69 +4235,61 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
 }
 
 // src/useLibrary.ts
-import { useCallback as useCallback14, useEffect as useEffect15, useMemo as useMemo10, useState as useState17 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect16, useMemo as useMemo11, 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;
+  if (currentId != null && volumes.some((v) => v.id === currentId)) return currentId;
+  return volumes[0]?.id ?? null;
+}
 function useLibrary(options) {
   const { volumes, initialVolumeId, onChange } = options;
-  const initialIndex = initialVolumeId != null ? Math.max(
-    0,
-    volumes.findIndex((v) => v.id === initialVolumeId)
-  ) : 0;
-  const [currentId, setCurrentId] = useState17(
-    volumes.length > 0 ? volumes[initialIndex]?.id ?? volumes[0]?.id ?? null : null
+  const [currentId, setCurrentId] = useState18(
+    () => resolveCurrentId(volumes, null, initialVolumeId)
   );
-  useEffect15(() => {
-    if (volumes.length === 0) {
-      if (currentId !== null) setCurrentId(null);
-      return;
-    }
-    if (currentId != null && volumes.some((v) => v.id === currentId)) return;
-    const fallback = volumes[0] ?? null;
-    setCurrentId(fallback?.id ?? null);
-    if (fallback) onChange?.(fallback);
-  }, [currentId, volumes, onChange]);
-  const index = useMemo10(() => {
-    if (volumes.length === 0) return -1;
-    if (currentId == null) return 0;
-    const found = volumes.findIndex((v) => v.id === currentId);
-    return found >= 0 ? found : 0;
-  }, [currentId, volumes]);
-  const current = useMemo10(
+  const [navigated, setNavigated] = useState18(false);
+  const resolvedId = resolveCurrentId(volumes, currentId, navigated ? void 0 : initialVolumeId);
+  useEffect16(() => {
+    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(
+    () => resolvedId == null ? -1 : volumes.findIndex((v) => v.id === resolvedId),
+    [resolvedId, volumes]
+  );
+  const current = useMemo11(
     () => index >= 0 && index < volumes.length ? volumes[index] : null,
     [index, volumes]
   );
-  const fire = useCallback14(
+  const activate = useCallback14(
     (i) => {
       const v = volumes[i];
-      if (v) onChange?.(v);
+      if (!v) return;
+      setNavigated(true);
+      setCurrentId(v.id);
+      onChange?.(v);
     },
     [volumes, onChange]
   );
   const next = useCallback14(() => {
     if (index < 0) return;
     const ni = Math.min(volumes.length - 1, index + 1);
-    if (ni !== index) {
-      setCurrentId(volumes[ni]?.id ?? null);
-      fire(ni);
-    }
-  }, [index, volumes, fire]);
+    if (ni !== index) activate(ni);
+  }, [index, activate, volumes.length]);
   const prev = useCallback14(() => {
     if (index < 0) return;
     const ni = Math.max(0, index - 1);
-    if (ni !== index) {
-      setCurrentId(volumes[ni]?.id ?? null);
-      fire(ni);
-    }
-  }, [index, volumes, fire]);
+    if (ni !== index) activate(ni);
+  }, [index, activate]);
   const goTo = useCallback14(
     (id) => {
       const ni = volumes.findIndex((v) => v.id === id);
       if (ni < 0) return;
-      if (ni !== index) {
-        setCurrentId(id);
-        fire(ni);
-      }
+      if (ni !== index) activate(ni);
     },
-    [index, volumes, fire]
+    [index, volumes, activate]
   );
   return { list: volumes, current, currentIndex: index, next, prev, goTo };
 }
@@ -3904,25 +4297,25 @@ function useLibrary(options) {
 // src/useManuscriptLayout.ts
 import {
   useCallback as useCallback15,
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect5,
-  useRef as useRef18,
-  useState as useState18
+  useRef as useRef19,
+  useState as useState19
 } 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] = useState18(null);
-  const [pageWidth, setPageWidth] = useState18(0);
-  const [pageHeight, setPageHeight] = useState18(0);
-  const [contentHeight, setContentHeight] = useState18(0);
-  const [elapsedMs, setElapsedMs] = useState18(0);
-  const requestIdRef = useRef18(0);
-  const layoutRef = useRef18(null);
+  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 = useRef18(null);
-  const optionsRef = useRef18(options);
+  const pendingRestore = useRef19(null);
+  const optionsRef = useRef19(options);
   optionsRef.current = options;
   const recompute = useCallback15(
     async (opts = {}) => {
@@ -3962,13 +4355,20 @@ function useManuscriptLayout(book, chapter, surface, options = {}) {
     setContentHeight(0);
     setElapsedMs(0);
   }, [recompute]);
-  useEffect16(() => {
+  useEffect17(() => {
     void recompute();
     return () => {
       requestIdRef.current++;
     };
   }, [recompute]);
-  useEffect16(() => {
+  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;
@@ -4018,89 +4418,44 @@ import {
   parseReadingPosition,
   serializeReadingPosition
 } from "@libraz/mejiro";
-import { useCallback as useCallback16, useEffect as useEffect17, useRef as useRef19, useState as useState19 } from "react";
-function resolveDefaultStorage2() {
-  if (typeof globalThis === "undefined") return null;
-  const w = globalThis.localStorage;
-  return w ?? null;
-}
+import { useCallback as useCallback16, useEffect as useEffect18, useRef as useRef20, useState as useState20 } from "react";
 function useReadingPosition(options) {
   const { key, throttleMs = 250 } = options;
-  const storage = options.storage ?? resolveDefaultStorage2();
-  const [position, setPosition] = useState19(() => {
-    if (!storage) return null;
-    try {
-      return parseReadingPosition(storage.getItem(key));
-    } catch {
-      return null;
-    }
-  });
-  const storageRef = useRef19(storage);
+  const storage = options.storage ?? resolveDefaultStorage();
+  const [position, setPosition] = useState20(
+    () => readStorage(storage, key, parseReadingPosition, null)
+  );
+  const storageRef = useRef20(storage);
   storageRef.current = storage;
-  const timerRef = useRef19(null);
-  const pendingWriteRef = useRef19(null);
-  const flushPending = useCallback16(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    const write = pendingWriteRef.current;
-    pendingWriteRef.current = null;
-    if (!write) return;
-    try {
-      write();
-    } catch {
-    }
-  }, []);
-  const cancelPending = useCallback16(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      timerRef.current = null;
-    }
-    pendingWriteRef.current = null;
-  }, []);
-  useEffect17(() => {
-    const currentStorage = storageRef.current;
-    if (currentStorage) {
-      try {
-        setPosition(parseReadingPosition(currentStorage.getItem(key)));
-      } catch {
-        setPosition(null);
-      }
-    } else {
-      setPosition(null);
-    }
-    return flushPending;
-  }, [key, flushPending]);
-  const onChangeRef = useRef19(options.onChange);
+  const pendingRef = useRef20(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);
   onChangeRef.current = options.onChange;
   const save = useCallback16(
     (next) => {
       setPosition(next);
       const currentStorage = storageRef.current;
       if (currentStorage) {
-        cancelPending();
-        pendingWriteRef.current = () => {
+        pending.schedule(() => {
           currentStorage.setItem(key, serializeReadingPosition(next));
-        };
-        timerRef.current = setTimeout(flushPending, throttleMs);
+        }, throttleMs);
       }
       onChangeRef.current?.(next);
     },
-    [key, throttleMs, cancelPending, flushPending]
+    [key, throttleMs, pending]
   );
   const clear = useCallback16(() => {
     setPosition(null);
-    cancelPending();
-    const currentStorage = storageRef.current;
-    if (currentStorage) {
-      try {
-        currentStorage.removeItem(key);
-      } catch {
-      }
-    }
+    pending.cancel();
+    removeStorage(storageRef.current, key);
     onChangeRef.current?.(null);
-  }, [key, cancelPending]);
+  }, [key, pending]);
   return { position, save, clear };
 }