@libraz/mejiro-react 0.5.0 → 0.7.0

package/dist/index.js

@@ -1,134 +1,13 @@
 // src/i18n.tsx
+import {
+  enMessages,
+  formatMessage,
+  messageCatalogs,
+  resolveMessages as resolveCoreMessages
+} from "@libraz/mejiro";
 import { createContext, useContext, useMemo } from "react";
+import { enMessages as enMessages2, jaMessages } from "@libraz/mejiro";
 import { jsx } from "react/jsx-runtime";
-var enMessages = {
-  logoSubtitle: "Vertical Reader",
-  openButton: "Open",
-  settingsButton: "Settings",
-  imageButton: "Image",
-  imageRemoveButton: "Remove image",
-  loading: "Loading...",
-  prevSpread: "Previous spread",
-  nextSpread: "Next spread",
-  settingsFont: "Font",
-  settingsSize: "Size",
-  settingsSizeDown: "Decrease font size",
-  settingsSizeUp: "Increase font size",
-  settingsLayout: "Layout",
-  settingsKinsoku: "Kinsoku",
-  settingsHanging: "Hanging",
-  settingsLineSpacing: "Line spacing",
-  settingsStrict: "Strict",
-  settingsLoose: "Loose",
-  toggleOn: "On",
-  toggleOff: "Off",
-  dropZoneTitle: "Drop an EPUB here or click to open",
-  dropZoneHint: ".epub files only",
-  tocTitle: "Contents",
-  tocSearchPlaceholder: "Search chapters\u2026",
-  tocEmpty: 'No chapters match "{query}".',
-  shelfTitle: "Library",
-  chapterN: "Chapter {n}",
-  spreadAnnouncement: "Spread {spread} of {total}",
-  editorPreviewSubtitle: "Editor Preview",
-  editorTitle: "EPUB Editor",
-  editorNoBookLoaded: "No book loaded",
-  editorParagraphs: "Paragraphs",
-  editorProofread: "Proofread",
-  editorApplyText: "Apply text",
-  editorRuby: "Ruby",
-  editorRubyHint: "Select base text in the textarea, then type the ruby reading below.",
-  editorRubyRange: "Base: {start}-{end} ({count} chars)",
-  editorRubyPlaceholder: "furigana",
-  editorApplyRuby: "Apply ruby",
-  editorImages: "Images",
-  editorInsertImageAfterParagraph: "Insert image after paragraph",
-  editorExportEpub: "Export EPUB",
-  manuscriptPreviewSubtitle: "Manuscript Preview",
-  manuscriptTitle: "Manuscript EPUB",
-  manuscriptRubyHint: "Use \uFF5C\u6F22\u5B57\u300A\u304B\u3093\u3058\u300B or \u6F22\u5B57\u300A\u304B\u3093\u3058\u300B for ruby.",
-  manuscriptMetadata: "Metadata",
-  manuscriptChapters: "Chapters",
-  manuscriptDraft: "Draft",
-  manuscriptChooseCoverImage: "Choose cover image",
-  manuscriptDefaultTitle: "New work",
-  manuscriptDefaultChapterTitle: "Chapter {n}",
-  manuscriptDefaultBody: "This is a ruby example: \uFF5Ckanji\u300Areading\u300B.\n\nPaste your draft here.",
-  untitled: "Untitled",
-  manuscriptAddChapter: "Add chapter",
-  manuscriptRemove: "Remove",
-  manuscriptEmphasisDots: "Emphasis dots",
-  manuscriptTcy: "Tate-chu-yoko",
-  manuscriptEm: "Em",
-  manuscriptStrong: "Strong",
-  manuscriptReorderHandle: "Reorder {title}"
-};
-var jaMessages = {
-  logoSubtitle: "\u7E26\u66F8\u304D\u30EA\u30FC\u30C0\u30FC",
-  openButton: "\u958B\u304F",
-  settingsButton: "\u8A2D\u5B9A",
-  imageButton: "\u753B\u50CF",
-  imageRemoveButton: "\u753B\u50CF\u3092\u524A\u9664",
-  loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D\u2026",
-  prevSpread: "\u524D\u306E\u898B\u958B\u304D",
-  nextSpread: "\u6B21\u306E\u898B\u958B\u304D",
-  settingsFont: "\u30D5\u30A9\u30F3\u30C8",
-  settingsSize: "\u30B5\u30A4\u30BA",
-  settingsSizeDown: "\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA\u3092\u4E0B\u3052\u308B",
-  settingsSizeUp: "\u30D5\u30A9\u30F3\u30C8\u30B5\u30A4\u30BA\u3092\u4E0A\u3052\u308B",
-  settingsLayout: "\u30EC\u30A4\u30A2\u30A6\u30C8",
-  settingsKinsoku: "\u7981\u5247",
-  settingsHanging: "\u3076\u3089\u4E0B\u3052",
-  settingsLineSpacing: "\u884C\u9593",
-  settingsStrict: "\u53B3\u683C",
-  settingsLoose: "\u7DE9\u548C",
-  toggleOn: "\u30AA\u30F3",
-  toggleOff: "\u30AA\u30D5",
-  dropZoneTitle: "EPUB \u3092\u30C9\u30ED\u30C3\u30D7\u307E\u305F\u306F\u30AF\u30EA\u30C3\u30AF\u3067\u958B\u304F",
-  dropZoneHint: ".epub \u30D5\u30A1\u30A4\u30EB\u306E\u307F",
-  tocTitle: "\u76EE\u6B21",
-  tocSearchPlaceholder: "\u7AE0\u3092\u691C\u7D22\u2026",
-  tocEmpty: "\u300C{query}\u300D\u306B\u4E00\u81F4\u3059\u308B\u7AE0\u306F\u3042\u308A\u307E\u305B\u3093\u3002",
-  shelfTitle: "\u672C\u68DA",
-  chapterN: "\u7B2C{n}\u7AE0",
-  spreadAnnouncement: "{total}\u898B\u958B\u304D\u4E2D{spread}\u898B\u958B\u304D\u76EE",
-  editorPreviewSubtitle: "\u7DE8\u96C6\u30D7\u30EC\u30D3\u30E5\u30FC",
-  editorTitle: "EPUB \u30A8\u30C7\u30A3\u30BF\u30FC",
-  editorNoBookLoaded: "\u672C\u304C\u8AAD\u307F\u8FBC\u307E\u308C\u3066\u3044\u307E\u305B\u3093",
-  editorParagraphs: "\u6BB5\u843D",
-  editorProofread: "\u6821\u6B63",
-  editorApplyText: "\u672C\u6587\u3092\u9069\u7528",
-  editorRuby: "\u30EB\u30D3",
-  editorRubyHint: "\u30C6\u30AD\u30B9\u30C8\u30A8\u30EA\u30A2\u3067\u89AA\u6587\u5B57\u3092\u9078\u629E\u3057\u3066\u304B\u3089\u3001\u4E0B\u306B\u30EB\u30D3\u3092\u5165\u529B\u3057\u307E\u3059\u3002",
-  editorRubyRange: "\u89AA\u6587\u5B57: {start}-{end}\uFF08{count}\u6587\u5B57\uFF09",
-  editorRubyPlaceholder: "\u3075\u308A\u304C\u306A",
-  editorApplyRuby: "\u30EB\u30D3\u3092\u9069\u7528",
-  editorImages: "\u753B\u50CF",
-  editorInsertImageAfterParagraph: "\u6BB5\u843D\u306E\u5F8C\u306B\u753B\u50CF\u3092\u633F\u5165",
-  editorExportEpub: "EPUB \u3092\u66F8\u304D\u51FA\u3059",
-  manuscriptPreviewSubtitle: "\u539F\u7A3F\u30D7\u30EC\u30D3\u30E5\u30FC",
-  manuscriptTitle: "\u539F\u7A3F EPUB",
-  manuscriptRubyHint: "\u30EB\u30D3\u306B\u306F \uFF5C\u6F22\u5B57\u300A\u304B\u3093\u3058\u300B \u307E\u305F\u306F \u6F22\u5B57\u300A\u304B\u3093\u3058\u300B \u3092\u4F7F\u3044\u307E\u3059\u3002",
-  manuscriptMetadata: "\u30E1\u30BF\u30C7\u30FC\u30BF",
-  manuscriptChapters: "\u7AE0",
-  manuscriptDraft: "\u539F\u7A3F",
-  manuscriptChooseCoverImage: "\u8868\u7D19\u753B\u50CF\u3092\u9078\u629E",
-  manuscriptDefaultTitle: "\u65B0\u3057\u3044\u4F5C\u54C1",
-  manuscriptDefaultChapterTitle: "\u7B2C{n}\u8A71",
-  manuscriptDefaultBody: "\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",
-  untitled: "\u7121\u984C",
-  manuscriptAddChapter: "\u7AE0\u3092\u8FFD\u52A0",
-  manuscriptRemove: "\u524A\u9664",
-  manuscriptEmphasisDots: "\u508D\u70B9",
-  manuscriptTcy: "\u7E26\u4E2D\u6A2A",
-  manuscriptEm: "\u5F37\u8ABF",
-  manuscriptStrong: "\u592A\u5B57",
-  manuscriptReorderHandle: "{title} \u306E\u9806\u756A\u3092\u5909\u66F4"
-};
-var CATALOGS = {
-  en: enMessages,
-  ja: jaMessages
-};
 var I18nContext = createContext(enMessages);
 function MejiroI18nProvider({
   locale,
@@ -136,10 +15,10 @@ function MejiroI18nProvider({
   children
 }) {
   const fromContext = useContext(I18nContext);
-  const value = useMemo(() => {
-    const base = locale != null ? CATALOGS[locale] : fromContext;
-    return messages ? { ...base, ...messages } : base;
-  }, [locale, messages, fromContext]);
+  const value = useMemo(
+    () => resolveCoreMessages(locale, messages, locale != null ? enMessages : fromContext),
+    [locale, messages, fromContext]
+  );
   return /* @__PURE__ */ jsx(I18nContext.Provider, { value, children });
 }
 function useI18n(options = {}) {
@@ -147,19 +26,14 @@ function useI18n(options = {}) {
   const { locale, messages } = options;
   return useMemo(() => {
     if (locale == null && messages == null) return fromContext;
-    const base = locale != null ? CATALOGS[locale] : fromContext;
-    return messages ? { ...base, ...messages } : base;
+    return resolveCoreMessages(locale, messages, fromContext);
   }, [locale, messages, fromContext]);
 }
 function resolveMessages(locale, overrides) {
-  const base = locale != null ? CATALOGS[locale] : enMessages;
-  return overrides ? { ...base, ...overrides } : base;
+  return resolveCoreMessages(locale, overrides);
 }
 function format(template, vars) {
-  return template.replace(
-    /\{(\w+)\}/g,
-    (_, k) => Object.hasOwn(vars, k) ? String(vars[k]) : `{${k}}`
-  );
+  return formatMessage(template, vars);
 }
 
 // src/MejiroChapterNav.tsx
@@ -208,7 +82,10 @@ function MejiroChapterNav({
       }) })
     ] });
   }
-  return /* @__PURE__ */ jsx2("div", { className: "mejiro-reader-chapter-nav", children: /* @__PURE__ */ jsx2("select", { value: chapter, onChange: (e) => onChange(Number(e.target.value)), children: epub.chapters.map((ch, i) => /* @__PURE__ */ jsx2("option", { value: i, children: ch.title ?? format(messages.chapterN, { n: i + 1 }) }, ch.title ?? `chapter-${i}`)) }) });
+  return /* @__PURE__ */ jsx2("div", { className: "mejiro-reader-chapter-nav", children: /* @__PURE__ */ jsx2("select", { value: chapter, onChange: (e) => onChange(Number(e.target.value)), children: epub.chapters.map((ch, i) => (
+    // biome-ignore lint/suspicious/noArrayIndexKey: chapter titles are not guaranteed unique
+    /* @__PURE__ */ jsx2("option", { value: i, children: ch.title ?? format(messages.chapterN, { n: i + 1 }) }, i)
+  )) }) });
 }
 
 // src/MejiroDropZone.tsx
@@ -274,10 +151,10 @@ function MejiroDropZone({
 
 // src/MejiroEditor.tsx
 import { EditableEpub } from "@libraz/mejiro/epub";
-import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef10, useState as useState8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef10, useState as useState8 } from "react";
 
 // src/MejiroReader.tsx
-import { DEFAULT_BOOK_OPTIONS } from "@libraz/mejiro/book";
+import { DEFAULT_BOOK_OPTIONS, DEFAULT_PAGE_GEOMETRY } from "@libraz/mejiro/book";
 import { normalizeFontFamily as normalizeFontFamily5 } from "@libraz/mejiro/browser";
 import { manuscriptToEpubBook } from "@libraz/mejiro/epub";
 import {
@@ -285,6 +162,7 @@ import {
   useCallback as useCallback6,
   useEffect as useEffect6,
   useImperativeHandle,
+  useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo4,
   useRef as useRef9,
   useState as useState7
@@ -311,38 +189,36 @@ import {
 
 // src/MejiroPageView.tsx
 import { normalizeFontFamily } from "@libraz/mejiro/browser";
-import { Fragment as Fragment3 } from "react";
 
-// src/MejiroPage.tsx
-import { Fragment as Fragment2 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/renderInlineNode.tsx
+import {
+  segmentToInlineNode
+} from "@libraz/mejiro/render";
+import { createElement, Fragment as Fragment2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function renderSegment(segment, key) {
-  switch (segment.type) {
-    case "text":
-      return /* @__PURE__ */ jsx4(Fragment2, { children: segment.text }, key);
-    case "ruby":
-      return /* @__PURE__ */ jsxs4("ruby", { children: [
-        segment.base,
-        /* @__PURE__ */ jsx4("rt", { children: segment.rubyText })
-      ] }, key);
-    case "emphasis":
-      return /* @__PURE__ */ jsx4("span", { className: `mejiro-emphasis mejiro-emphasis--${segment.style}`, children: segment.text }, key);
-    case "tcy":
-      return /* @__PURE__ */ jsx4("span", { className: "mejiro-tcy", children: segment.text }, key);
-    case "em":
-      return /* @__PURE__ */ jsx4("em", { children: segment.text }, key);
-    case "strong":
-      return /* @__PURE__ */ jsx4("strong", { children: segment.text }, key);
-    case "link":
-      return /* @__PURE__ */ jsx4("a", { href: segment.href, title: segment.title, children: segment.text }, key);
-    case "footnote-ref":
-      return /* @__PURE__ */ jsx4("a", { className: "mejiro-footnote-ref", href: `#${segment.noteId}`, children: segment.text }, key);
-  }
+  return renderInlineNode(segmentToInlineNode(segment), key);
 }
+function renderInlineNode(node, key) {
+  if (node.type === "text") return /* @__PURE__ */ jsx4(Fragment2, { children: node.text }, key);
+  return createElement(
+    node.tag,
+    {
+      key,
+      className: node.className,
+      href: node.href,
+      title: node.title
+    },
+    node.children.map((child, index) => renderInlineNode(child, `${key}-${index}`))
+  );
+}
+
+// src/MejiroPage.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
 function renderLine(line, lineIndex) {
   const nodes = [];
   if (lineIndex > 0) {
-    nodes.push(/* @__PURE__ */ jsx4("br", {}, `br-${lineIndex}`));
+    nodes.push(/* @__PURE__ */ jsx5("br", {}, `br-${lineIndex}`));
   }
   for (let i = 0; i < line.segments.length; i++) {
     nodes.push(renderSegment(line.segments[i], `${lineIndex}-${i}`));
@@ -351,7 +227,7 @@ function renderLine(line, lineIndex) {
 }
 function MejiroPage({ page, className, style }) {
   const rootClass = className ? `mejiro-page ${className}` : "mejiro-page";
-  return /* @__PURE__ */ jsx4("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
+  return /* @__PURE__ */ jsx5("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
     let paraClass = "mejiro-paragraph";
     if (paragraph.headingLevel != null) {
       paraClass += ` mejiro-paragraph--h${paragraph.headingLevel}`;
@@ -360,36 +236,13 @@ function MejiroPage({ page, className, style }) {
     }
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: paragraphs have no stable ID
-      /* @__PURE__ */ jsx4("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
+      /* @__PURE__ */ jsx5("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
     );
   }) });
 }
 
 // src/MejiroPageView.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-function renderSlotSegment(segment, key) {
-  switch (segment.type) {
-    case "text":
-      return /* @__PURE__ */ jsx5(Fragment3, { children: segment.text }, key);
-    case "ruby":
-      return /* @__PURE__ */ jsxs5("ruby", { children: [
-        segment.base,
-        /* @__PURE__ */ jsx5("rt", { children: segment.rubyText })
-      ] }, key);
-    case "emphasis":
-      return /* @__PURE__ */ jsx5("span", { className: `mejiro-emphasis mejiro-emphasis--${segment.style}`, children: segment.text }, key);
-    case "tcy":
-      return /* @__PURE__ */ jsx5("span", { className: "mejiro-tcy", children: segment.text }, key);
-    case "em":
-      return /* @__PURE__ */ jsx5("em", { children: segment.text }, key);
-    case "strong":
-      return /* @__PURE__ */ jsx5("strong", { children: segment.text }, key);
-    case "link":
-      return /* @__PURE__ */ jsx5("a", { href: segment.href, title: segment.title, children: segment.text }, key);
-    case "footnote-ref":
-      return /* @__PURE__ */ jsx5("a", { className: "mejiro-footnote-ref", href: `#${segment.noteId}`, children: segment.text }, key);
-  }
-}
+import { jsx as jsx6 } from "react/jsx-runtime";
 function MejiroPageView({
   result,
   fontFamily,
@@ -401,7 +254,7 @@ 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__ */ jsx5("div", { className: rootClass, style: { position: "relative", ...style }, children: result.lines.map((line, i) => {
+    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 = {
@@ -419,15 +272,15 @@ function MejiroPageView({
       };
       return (
         // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable ID
-        /* @__PURE__ */ jsx5("div", { style: colStyle, children: line.segments.map((seg, si) => renderSlotSegment(seg, `${i}-${si}`)) }, i)
+        /* @__PURE__ */ jsx6("div", { style: colStyle, children: line.segments.map((seg, si) => renderSegment(seg, `${i}-${si}`)) }, i)
       );
     }) });
   }
-  return /* @__PURE__ */ jsx5(MejiroPage, { page: result.page, className, style });
+  return /* @__PURE__ */ jsx6(MejiroPage, { page: result.page, className, style });
 }
 
 // src/MejiroScrollView.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function MejiroScrollView({
   layout,
   pageWidth,
@@ -444,10 +297,12 @@ function MejiroScrollView({
   const pageRefs = useRef2([]);
   const onVisiblePageChangeRef = useRef2(onVisiblePageChange);
   onVisiblePageChangeRef.current = onVisiblePageChange;
+  const programmaticScrollRef = useRef2(false);
   const pages = useMemo2(() => {
     const total = layout.totalPages;
     return Array.from({ length: total }, (_, i) => layout.getPage(i));
   }, [layout]);
+  const pageCount = pages.length;
   const useSlot = true;
   const contentStyle = { height: contentHeight };
   if (fontFamily) contentStyle.fontFamily = normalizeFontFamily2(fontFamily);
@@ -456,6 +311,7 @@ function MejiroScrollView({
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
+    if (pageCount === 0) return;
     if (typeof IntersectionObserver === "undefined") return;
     let mostVisibleIdx = -1;
     let mostVisibleRatio = 0;
@@ -474,7 +330,12 @@ function MejiroScrollView({
             }
           }
         }
-        if (mostVisibleIdx >= 0) onVisiblePageChangeRef.current?.(mostVisibleIdx);
+        if (mostVisibleIdx >= 0) {
+          onVisiblePageChangeRef.current?.(
+            mostVisibleIdx,
+            programmaticScrollRef.current ? "programmatic" : "user"
+          );
+        }
       },
       { root: container, threshold: [0.25, 0.5, 0.75] }
     );
@@ -482,22 +343,28 @@ function MejiroScrollView({
       if (el) observer.observe(el);
     }
     return () => observer.disconnect();
-  }, []);
+  }, [pageCount]);
   useLayoutEffect(() => {
     if (scrollToPage == null) return;
+    if (pageCount === 0) return;
     const el = pageRefs.current[scrollToPage];
     if (!(el && containerRef.current)) return;
+    programmaticScrollRef.current = true;
     containerRef.current.scrollTo({
       top: el.offsetTop,
       behavior: "auto"
     });
-  }, [scrollToPage]);
-  return /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "mejiro-reader-scroll", children: /* @__PURE__ */ jsx6(
+    const timer = setTimeout(() => {
+      programmaticScrollRef.current = false;
+    }, 0);
+    return () => clearTimeout(timer);
+  }, [scrollToPage, pageCount]);
+  return /* @__PURE__ */ jsx7("div", { ref: containerRef, className: "mejiro-reader-scroll", children: /* @__PURE__ */ jsx7(
     "div",
     {
       className: "mejiro-reader-scroll-track",
       style: { display: "flex", flexDirection: "column", gap: pageGap },
-      children: pages.map((result, i) => /* @__PURE__ */ jsxs6(
+      children: pages.map((result, i) => /* @__PURE__ */ jsxs4(
         "div",
         {
           ref: (el) => {
@@ -507,12 +374,12 @@ function MejiroScrollView({
           className: "mejiro-reader-page",
           style: { width: pageWidth, height: pageHeight, flexShrink: 0 },
           children: [
-            /* @__PURE__ */ jsx6("div", { className: "mejiro-reader-page-rule" }),
-            /* @__PURE__ */ jsxs6("div", { className: "mejiro-reader-page-header", children: [
-              /* @__PURE__ */ jsx6("span", { className: "mejiro-reader-page-header-title" }),
-              /* @__PURE__ */ jsx6("span", { className: "mejiro-reader-page-header-num", children: i + 1 })
+            /* @__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__ */ jsx6("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsx6("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsx7("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: /* @__PURE__ */ jsx7(
               MejiroPageView,
               {
                 result,
@@ -533,11 +400,23 @@ function MejiroScrollView({
 
 // src/MejiroSettingsPanel.tsx
 import { normalizeFontFamily as normalizeFontFamily3 } from "@libraz/mejiro/browser";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var DEFAULT_FONTS = [
   { value: "serif", label: "System Serif" },
   { value: "sans-serif", label: "System Sans" }
 ];
+function fontLabelFromCss(css) {
+  const first = css.split(",")[0]?.trim() ?? css;
+  return first.replace(/^["']|["']$/g, "") || css;
+}
+function clampNumber(value, min, max, fallback) {
+  if (!Number.isFinite(value)) return fallback;
+  return Math.max(min, Math.min(max, value));
+}
+function parseClampedInput(value, min, max, fallback) {
+  if (value.trim() === "") return fallback;
+  return clampNumber(Number(value), min, max, fallback);
+}
 function MejiroSettingsPanel({
   open,
   settings,
@@ -548,20 +427,15 @@ function MejiroSettingsPanel({
 }) {
   const messages = useI18n();
   const patch = (next) => onChange({ ...settings, ...next });
-  return /* @__PURE__ */ jsx7("div", { className: `mejiro-reader-settings-panel${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-settings-inner", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-settings-group", children: [
-      /* @__PURE__ */ jsx7("span", { className: "mejiro-reader-settings-group-title", children: messages.settingsFont }),
-      /* @__PURE__ */ jsx7("div", { className: "mejiro-reader-control", children: /* @__PURE__ */ jsx7(
-        "select",
-        {
-          value: normalizeFontFamily3(settings.fontFamily),
-          onChange: (e) => patch({ fontFamily: e.target.value }),
-          children: fonts.map((f) => /* @__PURE__ */ jsx7("option", { value: f.value, children: f.label }, f.value))
-        }
-      ) }),
-      /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx7("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-font-size", children: messages.settingsSize }),
-        /* @__PURE__ */ jsx7(
+  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(
           "button",
           {
             type: "button",
@@ -571,7 +445,7 @@ function MejiroSettingsPanel({
             children: "A\u2212"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "input",
           {
             id: "mejiro-reader-font-size",
@@ -579,10 +453,17 @@ function MejiroSettingsPanel({
             value: settings.fontSize,
             min: minFontSize,
             max: maxFontSize,
-            onChange: (e) => patch({ fontSize: Number(e.target.value) })
+            onChange: (e) => patch({
+              fontSize: parseClampedInput(
+                e.target.value,
+                minFontSize,
+                maxFontSize,
+                settings.fontSize
+              )
+            })
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -594,41 +475,41 @@ function MejiroSettingsPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-settings-group", children: [
-      /* @__PURE__ */ jsx7("span", { className: "mejiro-reader-settings-group-title", children: messages.settingsLayout }),
-      /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx7("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-kinsoku", children: messages.settingsKinsoku }),
-        /* @__PURE__ */ jsxs7(
+    /* @__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(
           "select",
           {
             id: "mejiro-reader-kinsoku",
             value: settings.mode ?? "strict",
             onChange: (e) => patch({ mode: e.target.value }),
             children: [
-              /* @__PURE__ */ jsx7("option", { value: "strict", children: messages.settingsStrict }),
-              /* @__PURE__ */ jsx7("option", { value: "loose", children: messages.settingsLoose })
+              /* @__PURE__ */ jsx8("option", { value: "strict", children: messages.settingsStrict }),
+              /* @__PURE__ */ jsx8("option", { value: "loose", children: messages.settingsLoose })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx7("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-hanging", children: messages.settingsHanging }),
-        /* @__PURE__ */ jsxs7(
+      /* @__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(
           "select",
           {
             id: "mejiro-reader-hanging",
             value: String(settings.enableHanging ?? true),
             onChange: (e) => patch({ enableHanging: e.target.value === "true" }),
             children: [
-              /* @__PURE__ */ jsx7("option", { value: "true", children: messages.toggleOn }),
-              /* @__PURE__ */ jsx7("option", { value: "false", children: messages.toggleOff })
+              /* @__PURE__ */ jsx8("option", { value: "true", children: messages.toggleOn }),
+              /* @__PURE__ */ jsx8("option", { value: "false", children: messages.toggleOff })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-control", children: [
-        /* @__PURE__ */ jsx7("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-line-spacing", children: messages.settingsLineSpacing }),
-        /* @__PURE__ */ jsx7(
+      /* @__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",
           {
             id: "mejiro-reader-line-spacing",
@@ -638,12 +519,19 @@ function MejiroSettingsPanel({
             min: 1,
             max: 3,
             step: 0.1,
-            onChange: (e) => patch({ lineSpacing: Number(e.target.value) })
+            onChange: (e) => patch({
+              lineSpacing: parseClampedInput(
+                e.target.value,
+                1,
+                3,
+                settings.lineSpacing ?? 1.8
+              )
+            })
           }
         )
       ] })
     ] })
-  ] }) });
+  ] }) }) });
 }
 
 // src/MejiroSpread.tsx
@@ -653,7 +541,7 @@ import {
 } from "react";
 
 // src/MejiroImageOverlay.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function MejiroImageOverlay({
   rect,
   label,
@@ -663,7 +551,7 @@ function MejiroImageOverlay({
 }) {
   const messages = useI18n();
   const resolvedLabel = label ?? messages.imageButton;
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: "mejiro-reader-image-overlay",
@@ -675,21 +563,28 @@ function MejiroImageOverlay({
       },
       onPointerDown: onOverlayPointerDown,
       children: [
-        /* @__PURE__ */ jsxs8("div", { className: "mejiro-reader-image-overlay-label", children: [
-          /* @__PURE__ */ jsx8("div", { className: "mejiro-reader-image-overlay-icon" }),
-          /* @__PURE__ */ jsx8("span", { children: resolvedLabel })
+        /* @__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__ */ jsx8("div", { className: "mejiro-reader-image-overlay-resize", onPointerDown: onResizePointerDown }),
-        /* @__PURE__ */ jsx8(
+        /* @__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?.();
             }
           }
         )
@@ -699,7 +594,7 @@ function MejiroImageOverlay({
 }
 
 // src/MejiroSelectionLayer.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function MejiroSelectionLayer({
   rects,
   side,
@@ -710,7 +605,7 @@ function MejiroSelectionLayer({
 }) {
   const wrapperClass = className ? `mejiro-selection-layer ${className}` : "mejiro-selection-layer";
   const rectClass = rectClassName ?? "mejiro-selection-rect";
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: wrapperClass,
@@ -723,7 +618,7 @@ function MejiroSelectionLayer({
       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__ */ jsx9(
+        return /* @__PURE__ */ jsx10(
           "div",
           {
             className: rectClass,
@@ -743,11 +638,11 @@ function MejiroSelectionLayer({
 }
 
 // src/MejiroSpread.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function defaultHeader(data) {
-  return /* @__PURE__ */ jsxs9("div", { className: "mejiro-reader-page-header", children: [
-    /* @__PURE__ */ jsx10("span", { className: "mejiro-reader-page-header-title", children: data.title ?? "" }),
-    /* @__PURE__ */ jsx10("span", { className: "mejiro-reader-page-header-num", children: data.pageNumber != null ? String(data.pageNumber) : "" })
+  return /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-page-header", children: [
+    /* @__PURE__ */ jsx11("span", { className: "mejiro-reader-page-header-title", children: data.title ?? "" }),
+    /* @__PURE__ */ jsx11("span", { className: "mejiro-reader-page-header-num", children: data.pageNumber != null ? String(data.pageNumber) : "" })
   ] });
 }
 function MejiroSpread({
@@ -862,16 +757,16 @@ function MejiroSpread({
       height: pageHeight
     };
     if (isRight && hasImages) pageStyle.overflow = "visible";
-    return /* @__PURE__ */ jsxs9(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: `mejiro-reader-page mejiro-reader-page--${side}`,
         style: pageStyle,
         children: [
-          /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-page-rule" }),
+          /* @__PURE__ */ jsx11("div", { className: "mejiro-reader-page-rule" }),
           renderPageHeader ? renderPageHeader(side, header) : defaultHeader(header),
-          /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsxs9("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: [
-            /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: [
+            /* @__PURE__ */ jsx11(
               MejiroPageView,
               {
                 result,
@@ -883,9 +778,9 @@ function MejiroSpread({
               },
               pageKey
             ),
-            selectionRects && selectionRects.length > 0 && /* @__PURE__ */ jsx10(MejiroSelectionLayer, { rects: selectionRects, side })
+            selectionRects && selectionRects.length > 0 && /* @__PURE__ */ jsx11(MejiroSelectionLayer, { rects: selectionRects, side })
           ] }) }),
-          isRight && images.map((item) => /* @__PURE__ */ jsx10(
+          isRight && images.map((item) => /* @__PURE__ */ jsx11(
             MejiroImageOverlay,
             {
               rect: item.rect,
@@ -912,7 +807,7 @@ function MejiroSpread({
     if (selectionEnabled) handlePointerUp(e);
   }
   const useCombined = selectionEnabled || gestureEnabled;
-  return /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-book", children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx11("div", { className: "mejiro-reader-book", children: /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `mejiro-reader-spread${turning ? " is-turning" : ""}${singlePage ? " mejiro-reader-spread--single" : ""}`,
@@ -923,7 +818,7 @@ function MejiroSpread({
       children: [
         renderPage("right"),
         !singlePage && renderPage("left"),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -932,7 +827,7 @@ function MejiroSpread({
             onClick: onPrev
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -949,7 +844,7 @@ function MejiroSpread({
 
 // src/MejiroStats.tsx
 import { estimateReadingTime, formatReadingTime } from "@libraz/mejiro/book";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function MejiroStats({
   chapter,
   totalPages,
@@ -959,7 +854,7 @@ function MejiroStats({
   cpm = 600,
   readingTimeLocale = "ja"
 }) {
-  if (!chapter) return /* @__PURE__ */ jsx11("span", { className: "mejiro-reader-stats" });
+  if (!chapter) return /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-stats" });
   const totalChars = chapter.paragraphs.reduce((s, p) => s + p.text.length, 0);
   const totalRuby = chapter.paragraphs.reduce(
     (s, p) => s + p.inlineAnnotations.filter((a) => a.kind === "ruby").length,
@@ -974,11 +869,17 @@ function MejiroStats({
     fontLabel || null,
     `${elapsedMs.toFixed(0)}ms`
   ];
-  return /* @__PURE__ */ jsx11("span", { className: "mejiro-reader-stats", children: parts.filter(Boolean).join(" / ") });
+  return /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-stats", children: parts.filter(Boolean).join(" / ") });
 }
 
 // src/useChapterLayout.ts
-import { useCallback, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState2 } from "react";
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
 function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
   const enableResize = options.enableResize ?? true;
   const resizeDebounce = options.resizeDebounce ?? 120;
@@ -989,31 +890,43 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
   const [elapsedMs, setElapsedMs] = useState2(0);
   const layoutRef = useRef4(null);
   const requestIdRef = useRef4(0);
+  const pendingRestore = useRef4(null);
   layoutRef.current = layout;
-  const recompute = useCallback(async () => {
-    const requestId = ++requestIdRef.current;
-    const chapter = epub?.chapters[chapterIndex];
-    if (!(chapter && surface.current)) {
-      setLayout(null);
-      setPageWidth(0);
-      setPageHeight(0);
-      setContentHeight(0);
-      setElapsedMs(0);
-      return;
-    }
-    setLayout(null);
-    const dims = book.computePageSize(surface.current);
-    setPageWidth(dims.pageWidth);
-    setPageHeight(dims.pageHeight);
-    setContentHeight(dims.contentHeight);
-    const t0 = performance.now();
-    const l = await book.layoutChapter(chapter);
-    if (requestId !== requestIdRef.current) return;
-    setLayout(l);
-    setElapsedMs(performance.now() - t0);
-  }, [book, epub, chapterIndex, surface]);
+  const optionsRef = useRef4(options);
+  optionsRef.current = options;
+  const recompute = useCallback(
+    async (opts = {}) => {
+      const blank = opts.blank ?? true;
+      const o = optionsRef.current;
+      const requestId = ++requestIdRef.current;
+      const chapter = epub?.chapters[chapterIndex];
+      if (!(chapter && surface.current)) {
+        setLayout(null);
+        setPageWidth(0);
+        setPageHeight(0);
+        setContentHeight(0);
+        setElapsedMs(0);
+        return;
+      }
+      const captured = !blank && layoutRef.current ? o.capturePosition?.(layoutRef.current) ?? null : null;
+      pendingRestore.current = captured;
+      if (blank) setLayout(null);
+      const dims = book.computePageSize(surface.current, o.pageGeometry?.());
+      setPageWidth(dims.pageWidth);
+      setPageHeight(dims.pageHeight);
+      setContentHeight(dims.contentHeight);
+      const t0 = performance.now();
+      const l = await book.layoutChapter(chapter);
+      if (requestId !== requestIdRef.current) return;
+      layoutRef.current = l;
+      setLayout(l);
+      setElapsedMs(performance.now() - t0);
+    },
+    [book, epub, chapterIndex, surface]
+  );
   useLayoutEffect2(() => {
     requestIdRef.current++;
+    pendingRestore.current = null;
     setLayout(null);
     setPageWidth(0);
     setPageHeight(0);
@@ -1028,29 +941,55 @@ function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
   }, [recompute]);
   useEffect2(() => {
     if (!enableResize) return;
+    const el = surface.current;
+    if (!el) return;
     let timer = null;
-    const onResize = () => {
-      if (!(surface.current && layoutRef.current)) return;
-      if (timer) clearTimeout(timer);
+    let observed = false;
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const scheduleReflow = (immediate) => {
+      clear();
+      if (immediate) {
+        void recompute({ blank: false });
+        return;
+      }
       timer = setTimeout(() => {
-        if (!(surface.current && layoutRef.current)) return;
-        const dims = book.computePageSize(surface.current);
-        setPageWidth(dims.pageWidth);
-        setPageHeight(dims.pageHeight);
-        setContentHeight(dims.contentHeight);
-        layoutRef.current.resize({
-          pageWidth: dims.pageWidth,
-          lineWidth: dims.contentHeight - book.getOptions().fontSize * 0.5
-        });
+        timer = null;
+        void recompute({ blank: false });
       }, resizeDebounce);
     };
-    window.addEventListener("resize", onResize);
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        const immediate = !observed;
+        observed = true;
+        scheduleReflow(immediate);
+      });
+      observer.observe(el);
+      return () => {
+        observer.disconnect();
+        clear();
+      };
+    }
+    const onWindowResize = () => scheduleReflow(false);
+    window.addEventListener("resize", onWindowResize);
     return () => {
-      window.removeEventListener("resize", onResize);
-      if (timer) clearTimeout(timer);
+      window.removeEventListener("resize", onWindowResize);
+      clear();
     };
-  }, [book, surface, enableResize, resizeDebounce]);
-  return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute };
+  }, [surface, enableResize, resizeDebounce, recompute]);
+  return {
+    layout,
+    pageWidth,
+    pageHeight,
+    contentHeight,
+    elapsedMs,
+    recompute,
+    pendingRestore
+  };
 }
 
 // src/useEpub.ts
@@ -1407,6 +1346,7 @@ function useSpread(layout, options = {}) {
   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 refresh = useCallback5(() => {
@@ -1433,7 +1373,15 @@ function useSpread(layout, options = {}) {
   useEffect5(() => {
     if (!layout) return;
     setSpread(layout.getSpread(spreadIdx));
-    onChangeRef.current?.(spreadIdx);
+    const last = lastEmittedRef.current;
+    if (!last) {
+      lastEmittedRef.current = { layout, spreadIdx };
+      return;
+    }
+    if (last.spreadIdx !== spreadIdx) {
+      onChangeRef.current?.(spreadIdx);
+    }
+    lastEmittedRef.current = { layout, spreadIdx };
   }, [layout, spreadIdx]);
   const goTo = useCallback5(
     (index) => {
@@ -1457,6 +1405,16 @@ function useSpread(layout, options = {}) {
     },
     [turnDuration]
   );
+  const setSpreadIndex = useCallback5((index) => {
+    if (!layoutRef.current) return;
+    if (turnTimerRef.current) {
+      clearTimeout(turnTimerRef.current);
+      turnTimerRef.current = null;
+    }
+    setTurning(false);
+    const max = Math.max(1, Math.ceil(layoutRef.current.totalPages / 2)) - 1;
+    setSpreadIdx(Math.max(0, Math.min(max, index)));
+  }, []);
   const next = useCallback5(() => goTo(spreadIdxRef.current + 1), [goTo]);
   const prev = useCallback5(() => goTo(spreadIdxRef.current - 1), [goTo]);
   useEffect5(() => {
@@ -1475,16 +1433,28 @@ function useSpread(layout, options = {}) {
     },
     []
   );
-  return { spreadIdx, spread, totalPages, totalSpreads, turning, next, prev, goTo, refresh };
+  return {
+    spreadIdx,
+    spread,
+    totalPages,
+    totalSpreads,
+    turning,
+    next,
+    prev,
+    goTo,
+    setSpread: setSpreadIndex,
+    refresh
+  };
 }
 
 // src/MejiroReader.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function MejiroReaderInner(props, ref) {
   const manuscriptProp = "manuscript" in props ? props.manuscript : void 0;
   const dialectProp = "dialect" in props ? props.dialect : void 0;
   const {
-    options = DEFAULT_BOOK_OPTIONS,
+    options: optionsProp,
+    pageGeometry: pageGeometryProp,
     fonts,
     epub: epubProp,
     epubUrl,
@@ -1493,6 +1463,7 @@ function MejiroReaderInner(props, ref) {
     theme = "light",
     mode = "paginated",
     spreadMode = "double",
+    fit = "fill",
     enableSurfaceTap = true,
     fallback,
     fetchOptions,
@@ -1508,10 +1479,12 @@ function MejiroReaderInner(props, ref) {
     enableChapterNav = !bare,
     chapterNavMode = "select",
     enableSettings = !bare,
+    renderSettings,
     enableImageOverlay = false,
     enableStats = !bare,
     enableKeyboard = true,
     enablePageIndicator = !bare,
+    pageNumbers = "both",
     annotations,
     onLoad,
     onError,
@@ -1525,6 +1498,7 @@ function MejiroReaderInner(props, ref) {
   const fileRef = useRef9(null);
   const [settingsOpen, setSettingsOpen] = useState7(false);
   const [chapterState, setChapterState] = useState7(chapterProp ?? 0);
+  const chapterIsUncontrolled = chapterProp == null;
   const chapter = chapterProp ?? chapterState;
   const [chromeHidden, setChromeHidden] = useState7(false);
   const [autoSingle, setAutoSingle] = useState7(false);
@@ -1551,7 +1525,37 @@ function MejiroReaderInner(props, ref) {
     return () => observer.disconnect();
   }, [spreadMode]);
   const effectiveSingle = spreadMode === "single" || spreadMode === "auto" && autoSingle;
-  const { book, options: bookOptions, setOptions } = useMejiroBook(options);
+  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
+    };
+  }, [fit, pageGeometryProp, effectiveSingle]);
+  const surfaceAspect = useMemo4(() => {
+    const columns = effectiveSingle ? 1 : 2;
+    const aspect = resolvedGeometry?.aspect ?? DEFAULT_PAGE_GEOMETRY.aspect;
+    return `${columns} / ${aspect}`;
+  }, [effectiveSingle, resolvedGeometry]);
+  const resolvedOptions = useMemo4(
+    () => ({ ...DEFAULT_BOOK_OPTIONS, ...optionsProp ?? {} }),
+    [optionsProp]
+  );
+  const { book, options: bookOptions, setOptions } = useMejiroBook(resolvedOptions);
+  const didSyncOptionsPropRef = useRef9(false);
+  useEffect6(() => {
+    if (!didSyncOptionsPropRef.current) {
+      didSyncOptionsPropRef.current = true;
+      return;
+    }
+    void setOptions(resolvedOptions);
+  }, [resolvedOptions, setOptions]);
   const synthesizedEpub = useMemo4(() => {
     if (manuscriptProp === void 0) return null;
     return manuscriptToEpubBook(manuscriptProp, { dialect: dialectProp });
@@ -1575,7 +1579,18 @@ function MejiroReaderInner(props, ref) {
   useEffect6(() => {
     if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
   }, [epubCtx.error]);
-  const layoutCtx = useChapterLayout(book, e, chapter, surfaceRef);
+  const pageGeometryRef = useRef9(resolvedGeometry);
+  pageGeometryRef.current = resolvedGeometry;
+  const curSpreadIdxRef = useRef9(0);
+  const spreadIdxPropRef = useRef9(spreadIdxProp);
+  spreadIdxPropRef.current = spreadIdxProp;
+  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")
+  });
   const spreadChangedRef = useRef9(void 0);
   spreadChangedRef.current = (i) => {
     onSpreadChange?.(i);
@@ -1585,6 +1600,46 @@ function MejiroReaderInner(props, ref) {
     enableKeyboard,
     onChange: (i) => spreadChangedRef.current?.(i)
   });
+  curSpreadIdxRef.current = spreadCtx.spreadIdx;
+  const setSpreadRef = useRef9(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);
+  }, [layoutCtx.layout]);
+  const optionsKey = [
+    bookOptions.fontFamily,
+    bookOptions.fontSize,
+    bookOptions.lineSpacing,
+    bookOptions.mode,
+    bookOptions.enableHanging
+  ].join("|");
+  const optionsKeyRef = useRef9(optionsKey);
+  const bookOptionsRef = useRef9(bookOptions);
+  bookOptionsRef.current = bookOptions;
+  const recomputeRef = useRef9(layoutCtx.recompute);
+  recomputeRef.current = layoutCtx.recompute;
+  useEffect6(() => {
+    if (optionsKeyRef.current === optionsKey) return;
+    optionsKeyRef.current = optionsKey;
+    const timer = setTimeout(() => {
+      void (async () => {
+        await setOptions({ ...bookOptionsRef.current });
+        await recomputeRef.current({ blank: false });
+      })();
+    }, 60);
+    return () => clearTimeout(timer);
+  }, [optionsKey, setOptions]);
+  const geometryKey = JSON.stringify(resolvedGeometry ?? null);
+  const geometryKeyRef = useRef9(geometryKey);
+  useEffect6(() => {
+    if (geometryKeyRef.current === geometryKey) return;
+    geometryKeyRef.current = geometryKey;
+    void recomputeRef.current({ blank: false });
+  }, [geometryKey]);
   const imageCtx = useMultiImageOverlay(layoutCtx.layout, spreadCtx.spreadIdx, {
     onUpdate: () => spreadCtx.refresh()
   });
@@ -1607,18 +1662,22 @@ function MejiroReaderInner(props, ref) {
   onLoadRef.current = onLoad;
   useEffect6(() => {
     if (!controlled) return;
-    if (chapterProp == null) setChapterState(0);
+    if (chapterIsUncontrolled) setChapterState(0);
     clearImagesRef.current();
     book.clearCache();
-    if (epubProp) onLoadRef.current?.(epubProp);
-  }, [controlled, epubProp, book, chapterProp]);
+    if (e) onLoadRef.current?.(e);
+  }, [controlled, e, book, chapterIsUncontrolled]);
   const spreadGoToRef = useRef9(spreadCtx.goTo);
   spreadGoToRef.current = spreadCtx.goTo;
   useEffect6(() => {
     if (spreadIdxProp == null) return;
-    if (spreadIdxProp === spreadCtx.spreadIdx) return;
     spreadGoToRef.current(spreadIdxProp);
-  }, [spreadIdxProp, spreadCtx.spreadIdx]);
+  }, [spreadIdxProp]);
+  useLayoutEffect4(() => {
+    const next = spreadIdxPropRef.current;
+    if (next == null || !layoutCtx.layout) return;
+    setSpreadRef.current(next);
+  }, [layoutCtx.layout]);
   const onChapter = useCallback6(
     (i) => {
       if (i === chapter) return;
@@ -1788,20 +1847,30 @@ function MejiroReaderInner(props, ref) {
   const layoutReady = e && spreadCtx.spread && layoutCtx.layout && layoutCtx.pageWidth > 0;
   const themeName = typeof theme === "string" ? theme : theme.name;
   const themeOverride = typeof theme === "string" ? void 0 : theme.override;
-  const themeStyle = themeOverride;
+  const themeStyle = useMemo4(() => {
+    const pad = pageGeometryProp?.padding;
+    const styleVars = {};
+    if (pad?.x != null) styleVars["--mejiro-page-pad-x"] = `${pad.x}px`;
+    if (pad?.y != null) styleVars["--mejiro-page-pad-y"] = `${pad.y}px`;
+    if (pad?.bottom != null) styleVars["--mejiro-page-pad-bottom"] = `${pad.bottom}px`;
+    if (fit === "width") styleVars["--mejiro-surface-aspect"] = surfaceAspect;
+    const hasVars = Object.keys(styleVars).length > 0;
+    if (!(themeOverride || hasVars)) return void 0;
+    return { ...themeOverride, ...styleVars };
+  }, [themeOverride, pageGeometryProp, fit, surfaceAspect]);
   const resolvedMessages = useI18n({ locale, messages });
   const effectiveSubtitle = subtitle ?? resolvedMessages.logoSubtitle;
-  const defaultLogo = /* @__PURE__ */ jsxs10("div", { className: "mejiro-reader-logo", children: [
-    /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-logo-mark", children: title }),
-    effectiveSubtitle && /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-logo-sub", children: effectiveSubtitle })
+  const defaultLogo = /* @__PURE__ */ jsxs8("div", { className: "mejiro-reader-logo", children: [
+    /* @__PURE__ */ jsx13("span", { className: "mejiro-reader-logo-mark", children: title }),
+    effectiveSubtitle && /* @__PURE__ */ jsx13("span", { className: "mejiro-reader-logo-sub", children: effectiveSubtitle })
   ] });
-  const header = enableHeader ? /* @__PURE__ */ jsxs10("header", { className: "mejiro-reader-header", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "mejiro-reader-header-left", children: [
+  const header = enableHeader ? /* @__PURE__ */ jsxs8("header", { className: "mejiro-reader-header", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "mejiro-reader-header-left", children: [
       logo === void 0 ? defaultLogo : logo,
-      showChapterSelect && /* @__PURE__ */ jsx12(MejiroChapterNav, { epub: e, chapter, onChange: onChapter })
+      showChapterSelect && /* @__PURE__ */ jsx13(MejiroChapterNav, { epub: e, chapter, onChange: onChapter })
     ] }),
-    /* @__PURE__ */ jsxs10("div", { className: "mejiro-reader-header-actions", children: [
-      enableStats && /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs8("div", { className: "mejiro-reader-header-actions", children: [
+      enableStats && /* @__PURE__ */ jsx13(
         MejiroStats,
         {
           chapter: e?.chapters[chapter] ?? null,
@@ -1810,7 +1879,7 @@ function MejiroReaderInner(props, ref) {
           fontLabel
         }
       ),
-      enableDropZone && /* @__PURE__ */ jsx12(
+      enableDropZone && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -1819,7 +1888,7 @@ function MejiroReaderInner(props, ref) {
           children: resolvedMessages.openButton
         }
       ),
-      enableImageOverlay && e && /* @__PURE__ */ jsx12(
+      enableImageOverlay && e && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -1828,7 +1897,7 @@ function MejiroReaderInner(props, ref) {
           children: resolvedMessages.imageButton
         }
       ),
-      enableSettings && /* @__PURE__ */ jsxs10(
+      enableSettings && /* @__PURE__ */ jsxs8(
         "button",
         {
           type: "button",
@@ -1836,7 +1905,7 @@ function MejiroReaderInner(props, ref) {
           onClick: () => setSettingsOpen((v) => !v),
           children: [
             resolvedMessages.settingsButton,
-            /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-btn-arrow", children: "\u25BE" })
+            /* @__PURE__ */ jsx13("span", { className: "mejiro-reader-btn-arrow", children: "\u25BE" })
           ]
         }
       )
@@ -1846,15 +1915,22 @@ function MejiroReaderInner(props, ref) {
   const rightPage = currentSpread * 2 + 1;
   const leftPage = currentSpread * 2 + 2;
   const showLeft = spreadCtx.spread != null && leftPage <= spreadCtx.spread.totalPages;
-  return /* @__PURE__ */ jsx12(MejiroI18nProvider, { messages: resolvedMessages, children: /* @__PURE__ */ jsxs10(
+  const showRightNum = pageNumbers === "both" || pageNumbers === "right";
+  const showLeftNum = pageNumbers === "both" || pageNumbers === "left";
+  return /* @__PURE__ */ jsx13(MejiroI18nProvider, { messages: resolvedMessages, children: /* @__PURE__ */ jsxs8(
     "div",
     {
-      className: `mejiro-reader${chromeHidden ? " mejiro-reader--chrome-hidden" : ""}`,
+      className: `mejiro-reader${chromeHidden ? " mejiro-reader--chrome-hidden" : ""}${fit === "width" ? " mejiro-reader--fit-width" : ""}`,
       "data-mejiro-theme": themeName,
       style: themeStyle,
       children: [
         header,
-        enableSettings && /* @__PURE__ */ jsx12(
+        enableSettings && (renderSettings ? /* @__PURE__ */ jsx13("div", { className: `mejiro-reader-settings-panel${settingsOpen ? " is-open" : ""}`, children: /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-settings-inner", children: /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-settings-content", children: renderSettings({
+          settings: editable,
+          update: setOptions,
+          open: settingsOpen,
+          toggle: () => setSettingsOpen((v) => !v)
+        }) }) }) }) : /* @__PURE__ */ jsx13(
           MejiroSettingsPanel,
           {
             open: settingsOpen,
@@ -1862,14 +1938,14 @@ function MejiroReaderInner(props, ref) {
             fonts,
             onChange: setOptions
           }
-        ),
-        /* @__PURE__ */ jsxs10("div", { className: `mejiro-reader-body${showChapterPanel ? " has-chapter-panel" : ""}`, children: [
-          showChapterPanel && /* @__PURE__ */ jsx12(MejiroChapterNav, { epub: e, chapter, onChange: onChapter, variant: "panel" }),
-          /* @__PURE__ */ jsxs10("div", { ref: surfaceRef, className: "mejiro-reader-surface", children: [
-            !(e || epubCtx.loading) && enableDropZone && /* @__PURE__ */ jsx12(MejiroDropZone, { onFile: (f) => void epubCtx.loadFile(f) }),
-            epubCtx.loading && /* @__PURE__ */ jsx12("div", { className: "mejiro-reader-loading", children: resolvedMessages.loading }),
-            !layoutReady && fallback && /* @__PURE__ */ jsx12("div", { className: "mejiro-reader-fallback", children: fallback }),
-            layoutReady && mode === "scroll" && layoutCtx.layout && /* @__PURE__ */ jsx12(
+        )),
+        /* @__PURE__ */ jsxs8("div", { className: `mejiro-reader-body${showChapterPanel ? " has-chapter-panel" : ""}`, children: [
+          showChapterPanel && /* @__PURE__ */ jsx13(MejiroChapterNav, { epub: e, chapter, onChange: onChapter, variant: "panel" }),
+          /* @__PURE__ */ jsxs8("div", { ref: surfaceRef, className: "mejiro-reader-surface", children: [
+            !(e || epubCtx.loading) && enableDropZone && /* @__PURE__ */ jsx13(MejiroDropZone, { onFile: (f) => void epubCtx.loadFile(f) }),
+            epubCtx.loading && /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-loading", children: resolvedMessages.loading }),
+            !layoutReady && fallback && /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-fallback", children: fallback }),
+            layoutReady && mode === "scroll" && layoutCtx.layout && /* @__PURE__ */ jsx13(
               MejiroScrollView,
               {
                 layout: layoutCtx.layout,
@@ -1880,13 +1956,14 @@ function MejiroReaderInner(props, ref) {
                 fontSize: bookOptions.fontSize,
                 lineSpacing: bookOptions.lineSpacing,
                 scrollToPage: spreadCtx.spreadIdx * 2,
-                onVisiblePageChange: (pageIdx) => {
+                onVisiblePageChange: (pageIdx, source) => {
+                  if (source === "programmatic") return;
                   const target = Math.floor(pageIdx / 2);
-                  if (target !== spreadCtx.spreadIdx) spreadGoToRef.current(target);
+                  if (target !== spreadCtx.spreadIdx) spreadCtx.setSpread(target);
                 }
               }
             ),
-            layoutReady && mode === "paginated" && spreadCtx.spread && /* @__PURE__ */ jsx12(
+            layoutReady && mode === "paginated" && spreadCtx.spread && /* @__PURE__ */ jsx13(
               MejiroSpread,
               {
                 singlePage: effectiveSingle,
@@ -1900,13 +1977,16 @@ function MejiroReaderInner(props, ref) {
                 fontSize: bookOptions.fontSize,
                 lineSpacing: bookOptions.lineSpacing,
                 turning: spreadCtx.turning,
-                rightHeader: { title: runningTitleRight, pageNumber: rightPage },
+                rightHeader: {
+                  title: runningTitleRight,
+                  pageNumber: showRightNum ? rightPage : null
+                },
                 leftHeader: {
                   title: runningTitleLeft,
-                  pageNumber: showLeft ? leftPage : null
+                  pageNumber: showLeft && showLeftNum ? leftPage : null
                 },
                 images: imageCtx.currentImages,
-                indicator: enablePageIndicator ? /* @__PURE__ */ jsx12(
+                indicator: enablePageIndicator ? /* @__PURE__ */ jsx13(
                   MejiroPageIndicator,
                   {
                     current: spreadCtx.spreadIdx + 1,
@@ -1924,7 +2004,7 @@ function MejiroReaderInner(props, ref) {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "input",
           {
             ref: fileRef,
@@ -1937,7 +2017,7 @@ function MejiroReaderInner(props, ref) {
             }
           }
         ),
-        /* @__PURE__ */ jsx12("div", { className: "mejiro-reader-sr-only", role: "status", "aria-live": "polite", children: spreadCtx.totalSpreads > 0 ? format(resolvedMessages.spreadAnnouncement, {
+        /* @__PURE__ */ jsx13("div", { className: "mejiro-reader-sr-only", role: "status", "aria-live": "polite", children: spreadCtx.totalSpreads > 0 ? format(resolvedMessages.spreadAnnouncement, {
           spread: spreadCtx.spreadIdx + 1,
           total: spreadCtx.totalSpreads
         }) : "" })
@@ -1949,7 +2029,7 @@ var MejiroReader = forwardRef(MejiroReaderInner);
 MejiroReader.displayName = "MejiroReader";
 
 // src/MejiroEditor.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function cloneBook(book) {
   return {
     ...book,
@@ -2025,8 +2105,11 @@ function MejiroEditor({
   const book = editor?.book ?? null;
   const chapter = book?.chapters[selection.chapter] ?? null;
   const paragraph = chapter?.paragraphs[selection.paragraph] ?? null;
-  const previewBook = book ? cloneBook(book) : null;
-  void revision;
+  const textDirty = paragraph ? text !== paragraph.text : false;
+  const previewBook = useMemo5(() => {
+    void revision;
+    return book ? cloneBook(book) : null;
+  }, [book, revision]);
   useEffect7(() => {
     onLoadRef.current = onLoad;
   }, [onLoad]);
@@ -2120,7 +2203,7 @@ function MejiroEditor({
     setRevision((value) => value + 1);
   }
   function applyRuby() {
-    if (!(editor && paragraph && rubyText.trim())) return;
+    if (!(editor && paragraph && rubyText.trim()) || textDirty) return;
     const len = [...text].length;
     const start = Math.max(0, Math.min(rubyStart, len));
     const end = Math.max(start + 1, Math.min(rubyEnd, len));
@@ -2171,9 +2254,9 @@ function MejiroEditor({
     a.click();
     URL.revokeObjectURL(url);
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor", children: [
-    /* @__PURE__ */ jsxs11("main", { className: "mejiro-editor-preview", children: [
-      previewBook ? /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor", children: [
+    /* @__PURE__ */ jsxs9("main", { className: "mejiro-editor-preview", children: [
+      previewBook ? /* @__PURE__ */ jsx14(
         MejiroReader,
         {
           epub: previewBook,
@@ -2183,38 +2266,38 @@ function MejiroEditor({
           enableImageOverlay: false,
           enableSurfaceTap: false
         }
-      ) : /* @__PURE__ */ jsx13(MejiroDropZone, { onFile: (file) => void loadFile(file) }),
-      loading && /* @__PURE__ */ jsx13("div", { className: "mejiro-editor-loading", children: messages.loading }),
-      error && /* @__PURE__ */ jsx13("div", { className: "mejiro-editor-error", children: error.message })
+      ) : /* @__PURE__ */ jsx14(MejiroDropZone, { onFile: (file) => void loadFile(file) }),
+      loading && /* @__PURE__ */ jsx14("div", { className: "mejiro-editor-loading", children: messages.loading }),
+      error && /* @__PURE__ */ jsx14("div", { className: "mejiro-editor-error", children: error.message })
     ] }),
-    /* @__PURE__ */ jsxs11("aside", { className: "mejiro-editor-panel", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-head", children: [
-        /* @__PURE__ */ jsx13("span", { children: messages.editorTitle }),
-        /* @__PURE__ */ jsx13("strong", { children: editor?.title ?? messages.editorNoBookLoaded }),
-        editor?.author && /* @__PURE__ */ jsx13("small", { children: editor.author })
+    /* @__PURE__ */ jsxs9("aside", { className: "mejiro-editor-panel", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-head", children: [
+        /* @__PURE__ */ jsx14("span", { children: messages.editorTitle }),
+        /* @__PURE__ */ jsx14("strong", { children: editor?.title ?? messages.editorNoBookLoaded }),
+        editor?.author && /* @__PURE__ */ jsx14("small", { children: editor.author })
       ] }),
-      book && /* @__PURE__ */ jsxs11(Fragment4, { children: [
-        /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
-          /* @__PURE__ */ jsx13("span", { className: "mejiro-editor-label", children: messages.editorParagraphs }),
-          /* @__PURE__ */ jsx13("div", { className: "mejiro-editor-paragraphs", children: book.chapters.map(
-            (ch, ci) => ch.blocks.filter((b) => b.kind === "paragraph").map((block, pi) => /* @__PURE__ */ jsxs11(
+      book && /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
+          /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorParagraphs }),
+          /* @__PURE__ */ jsx14("div", { className: "mejiro-editor-paragraphs", children: book.chapters.map(
+            (ch, ci) => ch.blocks.filter((b) => b.kind === "paragraph").map((block, pi) => /* @__PURE__ */ jsxs9(
               "button",
               {
                 type: "button",
                 className: selection.chapter === ci && selection.paragraph === pi ? "is-active" : "",
                 onClick: () => selectParagraph(ci, pi),
                 children: [
-                  /* @__PURE__ */ jsx13("span", { children: ch.title ?? format(messages.chapterN, { n: ci + 1 }) }),
-                  /* @__PURE__ */ jsx13("strong", { children: block.text.slice(0, 42) })
+                  /* @__PURE__ */ jsx14("span", { children: ch.title ?? format(messages.chapterN, { n: ci + 1 }) }),
+                  /* @__PURE__ */ jsx14("strong", { children: block.text.slice(0, 42) })
                 ]
               },
               `${ch.href}-${block.id}`
             ))
           ) })
         ] }),
-        enableProofread && /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
-          /* @__PURE__ */ jsx13("span", { className: "mejiro-editor-label", children: messages.editorProofread }),
-          /* @__PURE__ */ jsx13(
+        enableProofread && /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
+          /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorProofread }),
+          /* @__PURE__ */ jsx14(
             "textarea",
             {
               ref: textareaRef,
@@ -2223,17 +2306,17 @@ function MejiroEditor({
               onSelect: captureRubyRange
             }
           ),
-          /* @__PURE__ */ jsx13("button", { type: "button", className: "mejiro-editor-primary", onClick: applyText, children: messages.editorApplyText })
+          /* @__PURE__ */ jsx14("button", { type: "button", className: "mejiro-editor-primary", onClick: applyText, children: messages.editorApplyText })
         ] }),
-        enableRuby && /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
-          /* @__PURE__ */ jsx13("span", { className: "mejiro-editor-label", children: messages.editorRuby }),
-          /* @__PURE__ */ jsx13("p", { className: "mejiro-editor-hint", children: messages.editorRubyHint }),
-          /* @__PURE__ */ jsx13("p", { className: "mejiro-editor-range", children: format(messages.editorRubyRange, {
+        enableRuby && /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
+          /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorRuby }),
+          /* @__PURE__ */ jsx14("p", { className: "mejiro-editor-hint", children: messages.editorRubyHint }),
+          /* @__PURE__ */ jsx14("p", { className: "mejiro-editor-range", children: format(messages.editorRubyRange, {
             start: rubyStart,
             end: rubyEnd,
             count: Math.max(0, rubyEnd - rubyStart)
           }) }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               value: rubyText,
@@ -2241,12 +2324,21 @@ function MejiroEditor({
               onChange: (event) => setRubyText(event.target.value)
             }
           ),
-          /* @__PURE__ */ jsx13("button", { type: "button", className: "mejiro-editor-primary", onClick: applyRuby, children: messages.editorApplyRuby })
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              className: "mejiro-editor-primary",
+              disabled: textDirty || !rubyText.trim(),
+              onClick: applyRuby,
+              children: messages.editorApplyRuby
+            }
+          )
         ] }),
-        enableImages && /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
-          /* @__PURE__ */ jsx13("span", { className: "mejiro-editor-label", children: messages.editorImages }),
-          /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => imageInputRef.current?.click(), children: messages.editorInsertImageAfterParagraph }),
-          /* @__PURE__ */ jsx13(
+        enableImages && /* @__PURE__ */ jsxs9("div", { className: "mejiro-editor-section", children: [
+          /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.editorImages }),
+          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => imageInputRef.current?.click(), children: messages.editorInsertImageAfterParagraph }),
+          /* @__PURE__ */ jsx14(
             "input",
             {
               ref: imageInputRef,
@@ -2260,7 +2352,7 @@ function MejiroEditor({
             }
           )
         ] }),
-        enableExport && /* @__PURE__ */ jsx13(
+        enableExport && /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -2285,35 +2377,189 @@ function paragraphBlockId(chapter, paragraphIndex) {
 
 // src/MejiroManuscriptEditor.tsx
 import { EpubProject } from "@libraz/mejiro/epub";
-import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef12, useState as useState10 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef13, useState as useState11 } from "react";
+
+// src/MejiroNotationHighlighter.tsx
+import { tokenizeManuscriptSource } from "@libraz/mejiro";
+import {
+  forwardRef as forwardRef2,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo6,
+  useRef as useRef11,
+  useState as useState9
+} from "react";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2({
+  value,
+  onChange,
+  dialect = "mejiro",
+  wrapperClassName,
+  wrapperStyle,
+  className,
+  style,
+  onScroll,
+  onCompositionStart,
+  onCompositionEnd,
+  ...rest
+}, ref) {
+  const textareaRef = useRef11(null);
+  const overlayRef = useRef11(null);
+  useImperativeHandle2(ref, () => textareaRef.current, []);
+  const [isComposing, setIsComposing] = useState9(false);
+  const lastSegmentsRef = useRef11(null);
+  const segments = useMemo6(() => {
+    if (isComposing && lastSegmentsRef.current) return lastSegmentsRef.current;
+    const next = buildSegments(value, dialect);
+    lastSegmentsRef.current = next;
+    return next;
+  }, [value, dialect, isComposing]);
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `mejiro-notation-highlighter${wrapperClassName ? ` ${wrapperClassName}` : ""}`,
+      style: wrapperStyle,
+      children: [
+        /* @__PURE__ */ jsxs10(
+          "div",
+          {
+            ref: overlayRef,
+            className: "mejiro-notation-overlay",
+            "aria-hidden": "true",
+            children: [
+              segments.map((segment) => /* @__PURE__ */ jsx15(
+                "span",
+                {
+                  className: segment.kind ? `mejiro-notation-token mejiro-notation-${segment.kind}` : void 0,
+                  "data-token": segment.kind,
+                  children: segment.text
+                },
+                segment.key
+              )),
+              "\u200B"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx15(
+          "textarea",
+          {
+            ...rest,
+            ref: textareaRef,
+            className: `mejiro-notation-textarea${className ? ` ${className}` : ""}`,
+            style,
+            value,
+            onChange: (event) => onChange(event.target.value),
+            onCompositionStart: (event) => {
+              setIsComposing(true);
+              onCompositionStart?.(event);
+            },
+            onCompositionEnd: (event) => {
+              setIsComposing(false);
+              onCompositionEnd?.(event);
+            },
+            onScroll: (event) => {
+              if (overlayRef.current) {
+                overlayRef.current.scrollTop = event.currentTarget.scrollTop;
+                overlayRef.current.scrollLeft = event.currentTarget.scrollLeft;
+              }
+              onScroll?.(event);
+            },
+            spellCheck: false
+          }
+        )
+      ]
+    }
+  );
+});
+function buildSegments(text, dialect) {
+  const tokens = tokenizeManuscriptSource(text, dialect);
+  const segments = [];
+  let cursor = 0;
+  for (const [i, token] of tokens.entries()) {
+    if (token.start > cursor) {
+      segments.push({ key: `t-${i}-pre`, text: text.slice(cursor, token.start) });
+    }
+    segments.push({
+      key: `t-${i}`,
+      text: text.slice(token.start, token.end),
+      kind: token.kind
+    });
+    cursor = token.end;
+  }
+  if (cursor < text.length) {
+    segments.push({ key: "tail", text: text.slice(cursor) });
+  }
+  if (segments.length === 0) {
+    segments.push({ key: "empty", text });
+  }
+  return segments;
+}
 
 // src/useManuscriptDraft.ts
-import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef11, useState as useState9 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef12, useState as useState10 } from "react";
 var DEFAULT_DELAY = 800;
-function defaultChapter(index) {
-  return { id: `chapter-${Date.now()}-${index}`, title: `\u7B2C${index + 1}\u8A71`, body: "" };
+function defaultChapter(index, titleFor = (i) => `\u7B2C${i + 1}\u8A71`, bodyFor = () => "") {
+  return { id: `chapter-${Date.now()}-${index}`, title: titleFor(index), body: bodyFor(index) };
 }
 function useManuscriptDraft(options = {}) {
-  const { onAutosave, autosaveDelay = DEFAULT_DELAY } = options;
-  const [chapters, setChaptersState] = useState9(
-    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter(0)]
+  const {
+    onAutosave,
+    autosaveDelay = DEFAULT_DELAY,
+    autosavePayload,
+    autosaveKey,
+    defaultChapterTitle,
+    defaultChapterBody
+  } = options;
+  const titleForRef = useRef12(defaultChapterTitle);
+  titleForRef.current = defaultChapterTitle;
+  const bodyForRef = useRef12(defaultChapterBody);
+  bodyForRef.current = defaultChapterBody;
+  const [chapters, setChaptersState] = useState10(
+    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter(0, defaultChapterTitle, defaultChapterBody)]
   );
-  const [selected, setSelectedState] = useState9(0);
-  const saveRef = useRef11(onAutosave);
+  const [selected, setSelectedState] = useState10(0);
+  const [autosaveError, setAutosaveError] = useState10(null);
+  const saveRef = useRef12(onAutosave);
   saveRef.current = onAutosave;
-  const didMountRef = useRef11(false);
+  const payloadRef = useRef12(autosavePayload);
+  payloadRef.current = autosavePayload;
+  const chaptersRef = useRef12(chapters);
+  chaptersRef.current = chapters;
+  const didMountRef = useRef12(false);
+  const dirtyRef = useRef12(false);
+  const mountedRef = useRef12(true);
+  const flushAutosave = useCallback8(() => {
+    const callback = saveRef.current;
+    if (!(callback && dirtyRef.current)) return;
+    dirtyRef.current = false;
+    const payload = payloadRef.current ? payloadRef.current(chaptersRef.current) : chaptersRef.current;
+    void Promise.resolve(callback(payload)).catch((err) => {
+      if (!mountedRef.current) return;
+      setAutosaveError(err instanceof Error ? err : new Error(String(err)));
+    });
+  }, []);
   useEffect8(() => {
     if (!didMountRef.current) {
       didMountRef.current = true;
       return void 0;
     }
-    const callback = saveRef.current;
-    if (!callback) return void 0;
+    if (!saveRef.current) return void 0;
+    dirtyRef.current = true;
+    setAutosaveError(null);
     const timer = setTimeout(() => {
-      void callback(chapters);
+      flushAutosave();
     }, autosaveDelay);
     return () => clearTimeout(timer);
-  }, [chapters, autosaveDelay]);
+  }, [chapters, autosaveKey, autosaveDelay, flushAutosave]);
+  useEffect8(() => {
+    mountedRef.current = true;
+    const handleBeforeUnload = () => flushAutosave();
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      flushAutosave();
+      mountedRef.current = false;
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [flushAutosave]);
   const setSelected = useCallback8(
     (index) => {
       setSelectedState(() => Math.max(0, Math.min(index, chapters.length - 1)));
@@ -2322,7 +2568,7 @@ function useManuscriptDraft(options = {}) {
   );
   const setChapters = useCallback8(
     (next) => {
-      const normalized = next.length ? next : [defaultChapter(0)];
+      const normalized = next.length ? next : [defaultChapter(0, titleForRef.current, bodyForRef.current)];
       setChaptersState(normalized);
       setSelectedState((current) => {
         const selectedId = chapters[current]?.id;
@@ -2339,7 +2585,7 @@ function useManuscriptDraft(options = {}) {
   }, []);
   const addChapter = useCallback8((chapter = {}) => {
     setChaptersState((current) => {
-      const generated = defaultChapter(current.length);
+      const generated = defaultChapter(current.length, titleForRef.current, bodyForRef.current);
       const next = [
         ...current,
         {
@@ -2388,12 +2634,14 @@ function useManuscriptDraft(options = {}) {
     patchChapter,
     addChapter,
     removeChapter,
-    reorderChapters
+    reorderChapters,
+    autosaveError,
+    flushAutosave
   };
 }
 
 // src/MejiroManuscriptEditor.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function downloadEpub(buffer, title) {
   const url = URL.createObjectURL(new Blob([buffer], { type: "application/epub+zip" }));
   const a = document.createElement("a");
@@ -2445,14 +2693,14 @@ function MejiroManuscriptEditor({
   onExport
 }) {
   const messages = useI18n();
-  const coverInputRef = useRef12(null);
-  const bodyTextareaRef = useRef12(null);
+  const coverInputRef = useRef13(null);
+  const bodyTextareaRef = useRef13(null);
   const titleControlled = onTitleChange !== void 0;
   const authorControlled = onAuthorChange !== void 0;
   const coverControlled = onCoverChange !== void 0;
-  const [titleState, setTitleState] = useState10(titleProp ?? messages.manuscriptDefaultTitle);
-  const [authorState, setAuthorState] = useState10(authorProp ?? "");
-  const [coverState, setCoverState] = useState10(coverProp ?? null);
+  const [titleState, setTitleState] = useState11(titleProp ?? messages.manuscriptDefaultTitle);
+  const [authorState, setAuthorState] = useState11(authorProp ?? "");
+  const [coverState, setCoverState] = useState11(coverProp ?? null);
   const title = titleControlled ? titleProp ?? "" : titleState;
   const author = authorControlled ? authorProp ?? "" : authorState;
   const cover = coverControlled ? coverProp ?? null : coverState;
@@ -2489,7 +2737,10 @@ function MejiroManuscriptEditor({
   const draft = useManuscriptDraft({
     initialChapters: initialChapters?.length ? initialChapters : [defaultChapter2(messages)],
     onAutosave,
-    autosaveDelay
+    autosavePayload: (savedChapters) => ({ title, author, cover, chapters: savedChapters }),
+    autosaveKey: `${title}\0${author}\0${cover?.name ?? ""}\0${cover?.size ?? 0}\0${cover?.lastModified ?? 0}`,
+    autosaveDelay,
+    defaultChapterTitle: (index) => format(messages.manuscriptDefaultChapterTitle, { n: index + 1 })
   });
   const {
     chapters,
@@ -2501,7 +2752,7 @@ function MejiroManuscriptEditor({
     reorderChapters
   } = draft;
   const current = chapters[selected] ?? chapters[0];
-  const [draggingIndex, setDraggingIndex] = useState10(null);
+  const [draggingIndex, setDraggingIndex] = useState11(null);
   function wrapSelection(open, close) {
     const el = bodyTextareaRef.current;
     if (!el) return;
@@ -2539,8 +2790,8 @@ function MejiroManuscriptEditor({
     onExport?.(buffer);
     downloadEpub(buffer, title);
   }, [assetResolver, author, chapters, cover, messages.untitled, onExport, title]);
-  return /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor mejiro-manuscript-editor", children: [
-    /* @__PURE__ */ jsx14("main", { className: "mejiro-editor-preview", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor mejiro-manuscript-editor", children: [
+    /* @__PURE__ */ jsx16("main", { className: "mejiro-editor-preview", children: /* @__PURE__ */ jsx16(
       MejiroReader,
       {
         subtitle: messages.manuscriptPreviewSubtitle,
@@ -2558,18 +2809,19 @@ function MejiroManuscriptEditor({
         enableImageOverlay: false
       }
     ) }),
-    /* @__PURE__ */ jsxs12("aside", { className: "mejiro-editor-panel", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-head", children: [
-        /* @__PURE__ */ jsx14("span", { children: messages.manuscriptTitle }),
-        /* @__PURE__ */ jsx14("strong", { children: title }),
-        /* @__PURE__ */ jsx14("small", { children: messages.manuscriptRubyHint })
+    /* @__PURE__ */ jsxs11("aside", { className: "mejiro-editor-panel", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-head", children: [
+        /* @__PURE__ */ jsx16("span", { children: messages.manuscriptTitle }),
+        /* @__PURE__ */ jsx16("strong", { children: title }),
+        /* @__PURE__ */ jsx16("small", { children: messages.manuscriptRubyHint })
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-section", children: [
-        /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.manuscriptMetadata }),
-        /* @__PURE__ */ jsx14("input", { value: title, onChange: (event) => setTitle(event.target.value) }),
-        /* @__PURE__ */ jsx14("input", { value: author, onChange: (event) => setAuthor(event.target.value) }),
-        /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => coverInputRef.current?.click(), children: cover ? cover.name : messages.manuscriptChooseCoverImage }),
-        /* @__PURE__ */ jsx14(
+      draft.autosaveError && /* @__PURE__ */ jsx16("div", { className: "mejiro-editor-error", children: draft.autosaveError.message }),
+      /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
+        /* @__PURE__ */ jsx16("span", { className: "mejiro-editor-label", children: messages.manuscriptMetadata }),
+        /* @__PURE__ */ jsx16("input", { value: title, onChange: (event) => setTitle(event.target.value) }),
+        /* @__PURE__ */ jsx16("input", { value: author, onChange: (event) => setAuthor(event.target.value) }),
+        /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => coverInputRef.current?.click(), children: cover ? cover.name : messages.manuscriptChooseCoverImage }),
+        /* @__PURE__ */ jsx16(
           "input",
           {
             ref: coverInputRef,
@@ -2580,9 +2832,9 @@ function MejiroManuscriptEditor({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-section", children: [
-        /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.manuscriptChapters }),
-        /* @__PURE__ */ jsx14("div", { className: "mejiro-editor-paragraphs", children: chapters.map((chapter, index) => /* @__PURE__ */ jsxs12(
+      /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
+        /* @__PURE__ */ jsx16("span", { className: "mejiro-editor-label", children: messages.manuscriptChapters }),
+        /* @__PURE__ */ jsx16("div", { className: "mejiro-editor-paragraphs", children: chapters.map((chapter, index) => /* @__PURE__ */ jsxs11(
           "button",
           {
             type: "button",
@@ -2611,14 +2863,14 @@ function MejiroManuscriptEditor({
             },
             "data-dragging": draggingIndex === index ? "" : void 0,
             children: [
-              /* @__PURE__ */ jsx14("span", { children: format(messages.chapterN, { n: index + 1 }) }),
-              /* @__PURE__ */ jsx14("strong", { children: chapter.title || messages.untitled })
+              /* @__PURE__ */ jsx16("span", { children: format(messages.chapterN, { n: index + 1 }) }),
+              /* @__PURE__ */ jsx16("strong", { children: chapter.title || messages.untitled })
             ]
           },
           chapter.id
         )) }),
-        /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-grid", children: [
-          /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-grid", children: [
+          /* @__PURE__ */ jsx16(
             "button",
             {
               type: "button",
@@ -2630,138 +2882,41 @@ function MejiroManuscriptEditor({
               children: messages.manuscriptAddChapter
             }
           ),
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => removeChapter(selected), children: messages.manuscriptRemove })
+          /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => removeChapter(selected), children: messages.manuscriptRemove })
         ] })
       ] }),
-      current && /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-section", children: [
-        /* @__PURE__ */ jsx14("span", { className: "mejiro-editor-label", children: messages.manuscriptDraft }),
-        /* @__PURE__ */ jsx14(
+      current && /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-section", children: [
+        /* @__PURE__ */ jsx16("span", { className: "mejiro-editor-label", children: messages.manuscriptDraft }),
+        /* @__PURE__ */ jsx16(
           "input",
           {
             value: current.title,
             onChange: (event) => patchChapter(selected, { title: event.target.value })
           }
         ),
-        /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-grid mejiro-editor-notation", children: [
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => wrapSelection("\u300A\u300A", "\u300B\u300B"), children: messages.manuscriptEmphasisDots }),
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => wrapSelection("\u3014", "\u3015"), children: messages.manuscriptTcy }),
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => wrapSelection("*", "*"), children: messages.manuscriptEm }),
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: () => wrapSelection("**", "**"), children: messages.manuscriptStrong })
+        /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor-grid mejiro-editor-notation", children: [
+          /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("\u300A\u300A", "\u300B\u300B"), children: messages.manuscriptEmphasisDots }),
+          /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("\u3014", "\u3015"), children: messages.manuscriptTcy }),
+          /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("*", "*"), children: messages.manuscriptEm }),
+          /* @__PURE__ */ jsx16("button", { type: "button", onClick: () => wrapSelection("**", "**"), children: messages.manuscriptStrong })
         ] }),
-        /* @__PURE__ */ jsx14(
-          "textarea",
+        /* @__PURE__ */ jsx16(
+          MejiroNotationHighlighter,
           {
             ref: bodyTextareaRef,
             className: "mejiro-editor-manuscript",
             value: current.body,
-            onChange: (event) => patchChapter(selected, { body: event.target.value })
+            onChange: (body) => patchChapter(selected, { body })
           }
         )
       ] }),
-      /* @__PURE__ */ jsx14("button", { type: "button", className: "mejiro-editor-export", onClick: () => void exportEpub(), children: messages.editorExportEpub })
+      /* @__PURE__ */ jsx16("button", { type: "button", className: "mejiro-editor-export", onClick: () => void exportEpub(), children: messages.editorExportEpub })
     ] })
   ] });
 }
 
-// src/MejiroNotationHighlighter.tsx
-import { tokenizeManuscriptSource } from "@libraz/mejiro";
-import {
-  forwardRef as forwardRef2,
-  useImperativeHandle as useImperativeHandle2,
-  useMemo as useMemo5,
-  useRef as useRef13
-} from "react";
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
-var MejiroNotationHighlighter = forwardRef2(function MejiroNotationHighlighter2({
-  value,
-  onChange,
-  dialect = "mejiro",
-  wrapperClassName,
-  wrapperStyle,
-  className,
-  style,
-  onScroll,
-  ...rest
-}, ref) {
-  const textareaRef = useRef13(null);
-  const overlayRef = useRef13(null);
-  useImperativeHandle2(ref, () => textareaRef.current, []);
-  const segments = useMemo5(() => buildSegments(value, dialect), [value, dialect]);
-  return /* @__PURE__ */ jsxs13(
-    "div",
-    {
-      className: `mejiro-notation-highlighter${wrapperClassName ? ` ${wrapperClassName}` : ""}`,
-      style: wrapperStyle,
-      children: [
-        /* @__PURE__ */ jsxs13(
-          "div",
-          {
-            ref: overlayRef,
-            className: "mejiro-notation-overlay",
-            "aria-hidden": "true",
-            children: [
-              segments.map((segment) => /* @__PURE__ */ jsx15(
-                "span",
-                {
-                  className: segment.kind ? `mejiro-notation-token mejiro-notation-${segment.kind}` : void 0,
-                  "data-token": segment.kind,
-                  children: segment.text
-                },
-                segment.key
-              )),
-              "\u200B"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          "textarea",
-          {
-            ...rest,
-            ref: textareaRef,
-            className: `mejiro-notation-textarea${className ? ` ${className}` : ""}`,
-            style,
-            value,
-            onChange: (event) => onChange(event.target.value),
-            onScroll: (event) => {
-              if (overlayRef.current) {
-                overlayRef.current.scrollTop = event.currentTarget.scrollTop;
-                overlayRef.current.scrollLeft = event.currentTarget.scrollLeft;
-              }
-              onScroll?.(event);
-            },
-            spellCheck: false
-          }
-        )
-      ]
-    }
-  );
-});
-function buildSegments(text, dialect) {
-  const tokens = tokenizeManuscriptSource(text, dialect);
-  const segments = [];
-  let cursor = 0;
-  for (const [i, token] of tokens.entries()) {
-    if (token.start > cursor) {
-      segments.push({ key: `t-${i}-pre`, text: text.slice(cursor, token.start) });
-    }
-    segments.push({
-      key: `t-${i}`,
-      text: text.slice(token.start, token.end),
-      kind: token.kind
-    });
-    cursor = token.end;
-  }
-  if (cursor < text.length) {
-    segments.push({ key: "tail", text: text.slice(cursor) });
-  }
-  if (segments.length === 0) {
-    segments.push({ key: "empty", text });
-  }
-  return segments;
-}
-
 // src/MejiroShelf.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function MejiroShelf({
   volumes,
   currentId,
@@ -2770,26 +2925,26 @@ function MejiroShelf({
 }) {
   const messages = useI18n();
   const resolvedTitle = title ?? messages.shelfTitle;
-  return /* @__PURE__ */ jsxs14("section", { className: "mejiro-shelf", "aria-label": resolvedTitle, children: [
-    /* @__PURE__ */ jsx16("header", { className: "mejiro-shelf-header", children: /* @__PURE__ */ jsx16("span", { className: "mejiro-shelf-title", children: resolvedTitle }) }),
-    /* @__PURE__ */ jsx16("ul", { className: "mejiro-shelf-grid", children: volumes.map((v) => /* @__PURE__ */ jsx16("li", { className: "mejiro-shelf-item", children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs12("section", { className: "mejiro-shelf", "aria-label": resolvedTitle, children: [
+    /* @__PURE__ */ jsx17("header", { className: "mejiro-shelf-header", children: /* @__PURE__ */ jsx17("span", { className: "mejiro-shelf-title", children: resolvedTitle }) }),
+    /* @__PURE__ */ jsx17("ul", { className: "mejiro-shelf-grid", children: volumes.map((v) => /* @__PURE__ */ jsx17("li", { className: "mejiro-shelf-item", children: /* @__PURE__ */ jsxs12(
       "button",
       {
         type: "button",
         className: `mejiro-shelf-card${v.id === currentId ? " is-active" : ""}`,
         onClick: () => onSelect?.(v),
         children: [
-          v.cover ? /* @__PURE__ */ jsx16(
+          v.cover ? /* @__PURE__ */ jsx17(
             "span",
             {
               className: "mejiro-shelf-cover",
               style: { backgroundImage: `url(${JSON.stringify(v.cover)})` },
               "aria-hidden": "true"
             }
-          ) : /* @__PURE__ */ jsx16("span", { className: "mejiro-shelf-cover mejiro-shelf-cover--blank", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs14("span", { className: "mejiro-shelf-meta", children: [
-            /* @__PURE__ */ jsx16("span", { className: "mejiro-shelf-label", children: v.label }),
-            v.author && /* @__PURE__ */ jsx16("span", { className: "mejiro-shelf-author", children: v.author })
+          ) : /* @__PURE__ */ jsx17("span", { className: "mejiro-shelf-cover mejiro-shelf-cover--blank", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs12("span", { className: "mejiro-shelf-meta", children: [
+            /* @__PURE__ */ jsx17("span", { className: "mejiro-shelf-label", children: v.label }),
+            v.author && /* @__PURE__ */ jsx17("span", { className: "mejiro-shelf-author", children: v.author })
           ] })
         ]
       }
@@ -2798,8 +2953,8 @@ function MejiroShelf({
 }
 
 // src/MejiroToc.tsx
-import { useMemo as useMemo6, useState as useState11 } from "react";
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useMemo as useMemo7, useState as useState12 } 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 });
@@ -2818,9 +2973,9 @@ function MejiroToc({
   const messages = useI18n();
   const resolvedTitle = title ?? messages.tocTitle;
   const resolvedSearchPlaceholder = searchPlaceholder ?? messages.tocSearchPlaceholder;
-  const [query, setQuery] = useState11("");
-  const entries = useMemo6(() => buildEntries(epub, messages), [epub, messages]);
-  const filtered = useMemo6(() => {
+  const [query, setQuery] = useState12("");
+  const entries = useMemo7(() => buildEntries(epub, messages), [epub, messages]);
+  const filtered = useMemo7(() => {
     if (!query) return entries;
     const needle = query.toLowerCase();
     return entries.filter(
@@ -2828,12 +2983,12 @@ function MejiroToc({
     );
   }, [entries, query]);
   const activeIndex = currentAnchor?.chapter ?? -1;
-  return /* @__PURE__ */ jsxs15("nav", { className: "mejiro-toc", "aria-label": resolvedTitle, children: [
-    /* @__PURE__ */ jsxs15("header", { className: "mejiro-toc-header", children: [
-      /* @__PURE__ */ jsx17("span", { className: "mejiro-toc-title", children: resolvedTitle }),
-      epub.author && /* @__PURE__ */ jsx17("span", { className: "mejiro-toc-subtitle", children: epub.author })
+  return /* @__PURE__ */ jsxs13("nav", { className: "mejiro-toc", "aria-label": resolvedTitle, children: [
+    /* @__PURE__ */ jsxs13("header", { className: "mejiro-toc-header", children: [
+      /* @__PURE__ */ jsx18("span", { className: "mejiro-toc-title", children: resolvedTitle }),
+      epub.author && /* @__PURE__ */ jsx18("span", { className: "mejiro-toc-subtitle", children: epub.author })
     ] }),
-    searchable && /* @__PURE__ */ jsx17("div", { className: "mejiro-toc-search", children: /* @__PURE__ */ jsx17(
+    searchable && /* @__PURE__ */ jsx18("div", { className: "mejiro-toc-search", children: /* @__PURE__ */ jsx18(
       "input",
       {
         type: "search",
@@ -2843,8 +2998,8 @@ function MejiroToc({
         "aria-label": resolvedSearchPlaceholder
       }
     ) }),
-    /* @__PURE__ */ jsx17("ol", { className: "mejiro-toc-list", children: filtered.map((entry) => /* @__PURE__ */ jsxs15("li", { className: "mejiro-toc-item", children: [
-      /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsx18("ol", { className: "mejiro-toc-list", children: filtered.map((entry) => /* @__PURE__ */ jsxs13("li", { className: "mejiro-toc-item", children: [
+      /* @__PURE__ */ jsxs13(
         "button",
         {
           type: "button",
@@ -2852,58 +3007,37 @@ function MejiroToc({
           "aria-current": entry.index === activeIndex ? "true" : void 0,
           onClick: () => onSelect?.(entry.index),
           children: [
-            /* @__PURE__ */ jsx17("span", { className: "mejiro-toc-num", children: String(entry.index + 1).padStart(2, "0") }),
-            /* @__PURE__ */ jsx17("span", { className: "mejiro-toc-label", children: entry.title })
+            /* @__PURE__ */ jsx18("span", { className: "mejiro-toc-num", children: String(entry.index + 1).padStart(2, "0") }),
+            /* @__PURE__ */ jsx18("span", { className: "mejiro-toc-label", children: entry.title })
           ]
         }
       ),
-      entry.headings.length > 0 && /* @__PURE__ */ jsx17("ul", { className: "mejiro-toc-subheads", children: entry.headings.slice(0, 5).map((h) => /* @__PURE__ */ jsx17("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 }, h)) })
     ] }, entry.index)) }),
-    filtered.length === 0 && /* @__PURE__ */ jsx17("div", { className: "mejiro-toc-empty", role: "status", children: format(messages.tocEmpty, { query }) })
+    filtered.length === 0 && /* @__PURE__ */ jsx18("div", { className: "mejiro-toc-empty", role: "status", children: format(messages.tocEmpty, { query }) })
   ] });
 }
 
 // src/useAnnotations.ts
-import { useCallback as useCallback10, useEffect as useEffect10, useRef as useRef14, useState as useState12 } from "react";
-var STORAGE_VERSION = 1;
+import {
+  createAnnotationId,
+  parseAnnotations,
+  serializeAnnotations,
+  sortAnnotations
+} from "@libraz/mejiro";
+import { useCallback as useCallback10, useEffect as useEffect10, useRef as useRef14, useState as useState13 } from "react";
 function resolveDefaultStorage() {
   if (typeof globalThis === "undefined") return null;
   const w = globalThis.localStorage;
   return w ?? null;
 }
-function parse(raw) {
-  if (!raw) return [];
-  try {
-    const parsed = JSON.parse(raw);
-    if (parsed && Array.isArray(parsed.annotations)) return parsed.annotations;
-  } catch {
-  }
-  return [];
-}
-function serialize(annotations) {
-  const payload = { version: STORAGE_VERSION, annotations: [...annotations] };
-  return JSON.stringify(payload);
-}
-function sort(annotations) {
-  return [...annotations].sort((a, b) => {
-    if (a.chapter !== b.chapter) return a.chapter - b.chapter;
-    if (a.start.paragraph !== b.start.paragraph) return a.start.paragraph - b.start.paragraph;
-    return a.start.charIndex - b.start.charIndex;
-  });
-}
-function makeId() {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID();
-  }
-  return `ann-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-}
 function useAnnotations(options) {
   const { key, throttleMs = 250 } = options;
   const storage = options.storage ?? resolveDefaultStorage();
-  const [annotations, setAnnotations] = useState12(() => {
+  const [annotations, setAnnotations] = useState13(() => {
     if (!storage) return [];
     try {
-      return sort(parse(storage.getItem(key)));
+      return sortAnnotations(parseAnnotations(storage.getItem(key)));
     } catch {
       return [];
     }
@@ -2914,7 +3048,7 @@ function useAnnotations(options) {
       return;
     }
     try {
-      setAnnotations(sort(parse(storage.getItem(key))));
+      setAnnotations(sortAnnotations(parseAnnotations(storage.getItem(key))));
     } catch {
       setAnnotations([]);
     }
@@ -2934,7 +3068,7 @@ function useAnnotations(options) {
         if (timerRef.current) clearTimeout(timerRef.current);
         timerRef.current = setTimeout(() => {
           try {
-            storage.setItem(key, serialize(next));
+            storage.setItem(key, serializeAnnotations(next));
           } catch {
           }
         }, throttleMs);
@@ -2947,11 +3081,11 @@ function useAnnotations(options) {
     (input) => {
       const annotation = {
         ...input,
-        id: input.id ?? makeId(),
+        id: input.id ?? createAnnotationId(),
         createdAt: input.createdAt ?? Date.now()
       };
       setAnnotations((current) => {
-        const next = sort([...current, annotation]);
+        const next = sortAnnotations([...current, annotation]);
         commit(next);
         return next;
       });
@@ -2979,7 +3113,7 @@ function useAnnotations(options) {
           return { ...annotation, ...patch, id };
         });
         if (!changed) return current;
-        const sorted = sort(next);
+        const sorted = sortAnnotations(next);
         commit(sorted);
         return sorted;
       });
@@ -3004,14 +3138,14 @@ function useAnnotations(options) {
 import {
   EditableEpub as EditableEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback11, useEffect as useEffect11, useRef as useRef15, useState as useState13 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef15, useState as useState14 } from "react";
 function useEditableEpub(options = {}) {
-  const [editor, setEditor] = useState13(null);
-  const [loading, setLoading] = useState13(false);
-  const [exporting, setExporting] = useState13(false);
-  const [error, setError] = useState13(null);
-  const [revision, setRevision] = useState13(0);
-  const [selection, setSelectionState] = useState13({
+  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({
     chapter: 0,
     paragraph: 0
   });
@@ -3099,7 +3233,10 @@ function useEditableEpub(options = {}) {
   }, [options.defaultUrl, loadUrl]);
   const book = editor?.book ?? null;
   const selectedParagraph = book?.chapters[selection.chapter]?.paragraphs[selection.paragraph] ?? null;
-  const previewBook = book ? cloneBook2(book) : null;
+  const previewBook = useMemo8(() => {
+    void revision;
+    return book ? cloneBook2(book) : null;
+  }, [book, revision]);
   const history = editor?.history ?? null;
   const setSelection = useCallback11(
     (nextSelection) => {
@@ -3222,20 +3359,22 @@ import {
   EpubProject as EpubProject2,
   parseEpub as parseEpub2
 } from "@libraz/mejiro/epub";
-import { useCallback as useCallback12, useEffect as useEffect12, useMemo as useMemo7, useRef as useRef16, useState as useState14 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect12, useMemo as useMemo9, useRef as useRef16, useState as useState15 } from "react";
 function useEpubProject(options = {}) {
-  const [metadata, setMetadataState] = useState14({
+  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] = useState14(
-    options.chapters?.length ? options.chapters : [defaultChapter3(0)]
+  const [chapters, setChaptersState] = useState15(
+    options.chapters?.length ? options.chapters : [defaultChapter3(0, defaultTitle, defaultBody)]
   );
-  const [selectedChapter, setSelectedChapterState] = useState14(0);
-  const [previewBook, setPreviewBook] = useState14(null);
-  const [previewError, setPreviewError] = useState14(null);
-  const [previewing, setPreviewing] = useState14(false);
+  const [selectedChapter, setSelectedChapterState] = useState15(0);
+  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);
@@ -3292,7 +3431,7 @@ function useEpubProject(options = {}) {
   }, []);
   const setChapters = useCallback12(
     (next) => {
-      const normalized = next.length ? next : [defaultChapter3(0)];
+      const normalized = next.length ? next : [defaultChapter3(0, defaultTitle, defaultBody)];
       setChaptersState(normalized);
       setSelectedChapterState((current) => {
         const selectedId = chapters[current]?.id;
@@ -3300,7 +3439,7 @@ function useEpubProject(options = {}) {
         return nextIndex >= 0 ? nextIndex : Math.max(0, Math.min(current, normalized.length - 1));
       });
     },
-    [chapters]
+    [chapters, defaultBody, defaultTitle]
   );
   const setSelectedChapter = useCallback12(
     (index) => {
@@ -3315,21 +3454,24 @@ function useEpubProject(options = {}) {
       )
     );
   }, []);
-  const addChapter = useCallback12((chapter = {}) => {
-    setChaptersState((current) => {
-      const generated = defaultChapter3(current.length);
-      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 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;
+      });
+    },
+    [defaultBody, defaultTitle]
+  );
   const removeChapter = useCallback12(
     (index = selectedChapter) => {
       setChaptersState((current) => {
@@ -3367,7 +3509,7 @@ function useEpubProject(options = {}) {
     onExportRef.current?.(buffer);
     return buffer;
   }, [buildProject]);
-  return useMemo7(
+  return useMemo9(
     () => ({
       metadata,
       chapters,
@@ -3406,11 +3548,11 @@ function useEpubProject(options = {}) {
     ]
   );
 }
-function defaultChapter3(index) {
+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: index === 0 ? "\u7B2C\u4E00\u8A71" : `\u7B2C${index + 1}\u8A71`,
-    body: index === 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" : ""
+    title: titleFor(index),
+    body: bodyFor(index)
   };
 }
 
@@ -3420,7 +3562,7 @@ import {
   useCallback as useCallback13,
   useEffect as useEffect13,
   useRef as useRef17,
-  useState as useState15
+  useState as useState16
 } from "react";
 function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defW = options?.defaultWidth ?? 120;
@@ -3428,7 +3570,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defX = options?.defaultX ?? 80;
   const defY = options?.defaultY ?? 100;
   const margin = options?.margin;
-  const [imageRect, setImageRect] = useState15(null);
+  const [imageRect, setImageRect] = useState16(null);
   const rectRef = useRef17(imageRect);
   rectRef.current = imageRect;
   const layoutRef = useRef17(layout);
@@ -3550,14 +3692,14 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
 }
 
 // src/useLibrary.ts
-import { useCallback as useCallback14, useEffect as useEffect14, useMemo as useMemo8, useState as useState16 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect14, useMemo as useMemo10, useState as useState17 } from "react";
 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] = useState16(
+  const [currentId, setCurrentId] = useState17(
     volumes.length > 0 ? volumes[initialIndex]?.id ?? volumes[0]?.id ?? null : null
   );
   useEffect14(() => {
@@ -3570,13 +3712,13 @@ function useLibrary(options) {
     setCurrentId(fallback?.id ?? null);
     if (fallback) onChange?.(fallback);
   }, [currentId, volumes, onChange]);
-  const index = useMemo8(() => {
+  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 = useMemo8(
+  const current = useMemo10(
     () => index >= 0 && index < volumes.length ? volumes[index] : null,
     [index, volumes]
   );
@@ -3618,19 +3760,17 @@ function useLibrary(options) {
 }
 
 // src/useManuscriptLayout.ts
-import { useCallback as useCallback15, useEffect as useEffect15, useLayoutEffect as useLayoutEffect4, useRef as useRef18, useState as useState17 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect15, useLayoutEffect as useLayoutEffect5, useRef as useRef18, useState as useState18 } from "react";
 function useManuscriptLayout(book, chapter, surface, options = {}) {
   const dialect = options.dialect ?? "mejiro";
   const enableResize = options.enableResize ?? true;
   const resizeDebounce = options.resizeDebounce ?? 120;
-  const [layout, setLayout] = useState17(null);
-  const [pageWidth, setPageWidth] = useState17(0);
-  const [pageHeight, setPageHeight] = useState17(0);
-  const [contentHeight, setContentHeight] = useState17(0);
-  const [elapsedMs, setElapsedMs] = useState17(0);
-  const layoutRef = useRef18(null);
+  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);
-  layoutRef.current = layout;
   const recompute = useCallback15(async () => {
     const requestId = ++requestIdRef.current;
     if (!(chapter && surface.current)) {
@@ -3653,7 +3793,7 @@ function useManuscriptLayout(book, chapter, surface, options = {}) {
     setLayout(next);
     setElapsedMs(performance.now() - t0);
   }, [book, chapter, dialect, surface]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     requestIdRef.current++;
     setLayout(null);
     setPageWidth(0);
@@ -3669,95 +3809,85 @@ function useManuscriptLayout(book, chapter, surface, options = {}) {
   }, [recompute]);
   useEffect15(() => {
     if (!enableResize) return;
+    const el = surface.current;
+    if (!el) return;
     let timer = null;
-    const onResize = () => {
-      if (!(surface.current && layoutRef.current)) return;
-      if (timer) clearTimeout(timer);
+    let observed = false;
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const scheduleReflow = (immediate) => {
+      clear();
+      if (immediate) {
+        void recompute();
+        return;
+      }
       timer = setTimeout(() => {
-        if (!(surface.current && layoutRef.current)) return;
-        const dims = book.computePageSize(surface.current);
-        setPageWidth(dims.pageWidth);
-        setPageHeight(dims.pageHeight);
-        setContentHeight(dims.contentHeight);
-        layoutRef.current.resize({
-          pageWidth: dims.pageWidth,
-          lineWidth: dims.contentHeight - book.getOptions().fontSize * 0.5
-        });
+        timer = null;
+        void recompute();
       }, resizeDebounce);
     };
-    window.addEventListener("resize", onResize);
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        const immediate = !observed;
+        observed = true;
+        scheduleReflow(immediate);
+      });
+      observer.observe(el);
+      return () => {
+        observer.disconnect();
+        clear();
+      };
+    }
+    const onWindowResize = () => scheduleReflow(false);
+    window.addEventListener("resize", onWindowResize);
     return () => {
-      window.removeEventListener("resize", onResize);
-      if (timer) clearTimeout(timer);
+      window.removeEventListener("resize", onWindowResize);
+      clear();
     };
-  }, [book, surface, enableResize, resizeDebounce]);
+  }, [surface, enableResize, resizeDebounce, recompute]);
   return { layout, pageWidth, pageHeight, contentHeight, elapsedMs, recompute };
 }
 
 // src/useReadingPosition.ts
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef19, useState as useState18 } from "react";
-var STORAGE_VERSION2 = 2;
+import {
+  parseReadingPosition,
+  serializeReadingPosition
+} from "@libraz/mejiro";
+import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef19, useState as useState19 } from "react";
 function resolveDefaultStorage2() {
   if (typeof globalThis === "undefined") return null;
   const w = globalThis.localStorage;
   return w ?? null;
 }
-function parsePosition(raw) {
-  if (!raw) return null;
-  let parsed;
-  try {
-    parsed = JSON.parse(raw);
-  } catch {
-    return null;
-  }
-  if (!parsed || typeof parsed !== "object") return null;
-  const p = parsed;
-  if (typeof p.chapter !== "number") return null;
-  if (p.version === STORAGE_VERSION2) {
-    if (typeof p.paragraph !== "number" || typeof p.charIndex !== "number") return null;
-    return { chapter: p.chapter, paragraph: p.paragraph, charIndex: p.charIndex };
-  }
-  if (typeof p.spreadIdx === "number") {
-    if (typeof console !== "undefined" && typeof console.warn === "function") {
-      console.warn(
-        "[mejiro] useReadingPosition: migrating legacy {chapter, spreadIdx} format. spreadIdx has been dropped because it does not survive reflow; the position now resumes at the start of the chapter. Persist new positions via save() to upgrade."
-      );
-    }
-    return { chapter: p.chapter, paragraph: 0, charIndex: 0 };
-  }
-  return null;
-}
-function serializePosition(value) {
-  const payload = {
-    version: STORAGE_VERSION2,
-    chapter: value.chapter,
-    paragraph: value.paragraph,
-    charIndex: value.charIndex
-  };
-  return JSON.stringify(payload);
-}
 function useReadingPosition(options) {
   const { key, throttleMs = 250 } = options;
   const storage = options.storage ?? resolveDefaultStorage2();
-  const [position, setPosition] = useState18(() => {
+  const [position, setPosition] = useState19(() => {
     if (!storage) return null;
     try {
-      return parsePosition(storage.getItem(key));
+      return parseReadingPosition(storage.getItem(key));
     } catch {
       return null;
     }
   });
+  const storageRef = useRef19(storage);
+  storageRef.current = storage;
   useEffect16(() => {
-    if (!storage) {
+    const currentStorage = storageRef.current;
+    if (!currentStorage) {
       setPosition(null);
       return;
     }
     try {
-      setPosition(parsePosition(storage.getItem(key)));
+      setPosition(parseReadingPosition(currentStorage.getItem(key)));
     } catch {
       setPosition(null);
     }
-  }, [storage, key]);
+  }, [key]);
   const timerRef = useRef19(null);
   useEffect16(
     () => () => {
@@ -3770,30 +3900,32 @@ function useReadingPosition(options) {
   const save = useCallback16(
     (next) => {
       setPosition(next);
-      if (storage) {
+      const currentStorage = storageRef.current;
+      if (currentStorage) {
         if (timerRef.current) clearTimeout(timerRef.current);
         timerRef.current = setTimeout(() => {
           try {
-            storage.setItem(key, serializePosition(next));
+            currentStorage.setItem(key, serializeReadingPosition(next));
           } catch {
           }
         }, throttleMs);
       }
       onChangeRef.current?.(next);
     },
-    [storage, key, throttleMs]
+    [key, throttleMs]
   );
   const clear = useCallback16(() => {
     setPosition(null);
     if (timerRef.current) clearTimeout(timerRef.current);
-    if (storage) {
+    const currentStorage = storageRef.current;
+    if (currentStorage) {
       try {
-        storage.removeItem(key);
+        currentStorage.removeItem(key);
       } catch {
       }
     }
     onChangeRef.current?.(null);
-  }, [storage, key]);
+  }, [key]);
   return { position, save, clear };
 }
 
@@ -3824,7 +3956,7 @@ export {
   MejiroSpread,
   MejiroStats,
   MejiroToc,
-  enMessages,
+  enMessages2 as enMessages,
   format,
   jaMessages,
   resolveMessages,