@libraz/mejiro-react 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,27 +1,358 @@
+// src/i18n.tsx
+import { createContext, useContext, useMemo } from "react";
+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,
+  messages,
+  children
+}) {
+  const fromContext = useContext(I18nContext);
+  const value = useMemo(() => {
+    const base = locale != null ? CATALOGS[locale] : fromContext;
+    return messages ? { ...base, ...messages } : base;
+  }, [locale, messages, fromContext]);
+  return /* @__PURE__ */ jsx(I18nContext.Provider, { value, children });
+}
+function useI18n(options = {}) {
+  const fromContext = useContext(I18nContext);
+  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;
+  }, [locale, messages, fromContext]);
+}
+function resolveMessages(locale, overrides) {
+  const base = locale != null ? CATALOGS[locale] : enMessages;
+  return overrides ? { ...base, ...overrides } : base;
+}
+function format(template, vars) {
+  return template.replace(
+    /\{(\w+)\}/g,
+    (_, k) => Object.hasOwn(vars, k) ? String(vars[k]) : `{${k}}`
+  );
+}
+
+// src/MejiroChapterNav.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function textPreview(text, max = 72) {
+  const compact = text.replace(/\s+/g, " ").trim();
+  if (compact.length <= max) return compact;
+  return `${compact.slice(0, max - 1)}...`;
+}
+function MejiroChapterNav({
+  epub,
+  chapter,
+  onChange,
+  variant = "select"
+}) {
+  const messages = useI18n();
+  if (variant === "panel") {
+    return /* @__PURE__ */ jsxs("nav", { className: "mejiro-reader-chapter-panel", "aria-label": messages.tocTitle, children: [
+      /* @__PURE__ */ jsxs("div", { className: "mejiro-reader-chapter-panel-head", children: [
+        /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-panel-kicker", children: messages.tocTitle }),
+        /* @__PURE__ */ jsx2("strong", { children: epub.title }),
+        epub.author && /* @__PURE__ */ jsx2("span", { children: epub.author })
+      ] }),
+      /* @__PURE__ */ jsx2("ol", { className: "mejiro-reader-chapter-list", children: epub.chapters.map((ch, i) => {
+        const title = ch.title ?? format(messages.chapterN, { n: i + 1 });
+        const preview = ch.paragraphs.find((p) => !p.headingLevel && p.text.trim())?.text;
+        const chapterKey = `${title}-${ch.paragraphs.map((p) => p.text).join("|").slice(0, 120)}`;
+        const headings = ch.paragraphs.filter((p) => p.headingLevel && p.text.trim() && p.text.trim() !== title).slice(0, 3);
+        return /* @__PURE__ */ jsx2("li", { className: "mejiro-reader-chapter-list-item", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `mejiro-reader-chapter-card${i === chapter ? " is-active" : ""}`,
+            "aria-current": i === chapter ? "true" : void 0,
+            onClick: () => onChange(i),
+            children: [
+              /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-number", children: String(i + 1).padStart(2, "0") }),
+              /* @__PURE__ */ jsxs("span", { className: "mejiro-reader-chapter-main", children: [
+                /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-title", children: title }),
+                preview && /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-preview", children: textPreview(preview) }),
+                headings.length > 0 && /* @__PURE__ */ jsx2("span", { className: "mejiro-reader-chapter-subheads", children: headings.map((heading) => /* @__PURE__ */ jsx2("span", { children: textPreview(heading.text, 30) }, heading.text)) })
+              ] })
+            ]
+          }
+        ) }, chapterKey);
+      }) })
+    ] });
+  }
+  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}`)) }) });
+}
+
+// src/MejiroDropZone.tsx
+import { useRef, useState } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MejiroDropZone({
+  accept = ".epub",
+  validateFile,
+  onFile,
+  children,
+  className,
+  style
+}) {
+  const messages = useI18n();
+  const inputRef = useRef(null);
+  const [dragover, setDragover] = useState(false);
+  const isValid = (file) => {
+    if (validateFile) return validateFile(file);
+    return file.name.endsWith(".epub");
+  };
+  const rootClass = ["mejiro-reader-drop-zone", dragover ? "is-dragover" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: rootClass,
+      style,
+      onClick: () => inputRef.current?.click(),
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragover(true);
+      },
+      onDragLeave: () => setDragover(false),
+      onDrop: (e) => {
+        e.preventDefault();
+        setDragover(false);
+        const file = e.dataTransfer?.files[0];
+        if (file && isValid(file)) onFile(file);
+      },
+      children: [
+        children ?? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx3("div", { className: "mejiro-reader-drop-zone-icon", children: "\u{1F4D6}" }),
+          /* @__PURE__ */ jsx3("div", { className: "mejiro-reader-drop-zone-text", children: /* @__PURE__ */ jsx3("strong", { children: messages.dropZoneTitle }) }),
+          /* @__PURE__ */ jsx3("div", { className: "mejiro-reader-drop-zone-hint", children: messages.dropZoneHint })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            hidden: true,
+            onChange: (e) => {
+              const file = e.target.files?.[0];
+              if (file && isValid(file)) onFile(file);
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/MejiroEditor.tsx
+import { EditableEpub } from "@libraz/mejiro/epub";
+import { useCallback as useCallback7, useEffect as useEffect7, useRef as useRef10, useState as useState8 } from "react";
+
+// src/MejiroReader.tsx
+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 {
+  forwardRef,
+  useCallback as useCallback6,
+  useEffect as useEffect6,
+  useImperativeHandle,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo4,
+  useRef as useRef9,
+  useState as useState7
+} from "react";
+
+// src/MejiroPageIndicator.tsx
+import { jsxs as jsxs3 } from "react/jsx-runtime";
+function MejiroPageIndicator({ current, total }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "mejiro-reader-page-indicator", children: [
+    current,
+    " / ",
+    total
+  ] });
+}
+
+// src/MejiroScrollView.tsx
+import { normalizeFontFamily as normalizeFontFamily2 } from "@libraz/mejiro/browser";
+import {
+  useEffect,
+  useLayoutEffect,
+  useMemo as useMemo2,
+  useRef as useRef2
+} from "react";
+
+// src/MejiroPageView.tsx
+import { normalizeFontFamily } from "@libraz/mejiro/browser";
+import { Fragment as Fragment3 } from "react";
+
 // src/MejiroPage.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function renderSegment(segment, key) {
-  if (segment.type === "text") {
-    return segment.text;
+  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 /* @__PURE__ */ jsxs("ruby", { children: [
-    segment.base,
-    /* @__PURE__ */ jsx("rt", { children: segment.rubyText })
-  ] }, key);
 }
 function renderLine(line, lineIndex) {
   const nodes = [];
   if (lineIndex > 0) {
-    nodes.push(/* @__PURE__ */ jsx("br", {}, `br-${lineIndex}`));
+    nodes.push(/* @__PURE__ */ jsx4("br", {}, `br-${lineIndex}`));
   }
   for (let i = 0; i < line.segments.length; i++) {
-    nodes.push(renderSegment(line.segments[i], i));
+    nodes.push(renderSegment(line.segments[i], `${lineIndex}-${i}`));
   }
   return nodes;
 }
 function MejiroPage({ page, className, style }) {
   const rootClass = className ? `mejiro-page ${className}` : "mejiro-page";
-  return /* @__PURE__ */ jsx("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
+  return /* @__PURE__ */ jsx4("div", { className: rootClass, style, children: page.paragraphs.map((paragraph, pi) => {
     let paraClass = "mejiro-paragraph";
     if (paragraph.headingLevel != null) {
       paraClass += ` mejiro-paragraph--h${paragraph.headingLevel}`;
@@ -30,19 +361,35 @@ function MejiroPage({ page, className, style }) {
     }
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: paragraphs have no stable ID
-      /* @__PURE__ */ jsx("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
+      /* @__PURE__ */ jsx4("div", { className: paraClass, children: paragraph.lines.flatMap((line, li) => renderLine(line, li)) }, pi)
     );
   }) });
 }
 
 // src/MejiroPageView.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function renderSlotSegment(segment, key) {
-  if (segment.type === "text") return segment.text;
-  return /* @__PURE__ */ jsxs2("ruby", { children: [
-    segment.base,
-    /* @__PURE__ */ jsx2("rt", { children: segment.rubyText })
-  ] }, 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);
+  }
 }
 function MejiroPageView({
   result,
@@ -54,7 +401,8 @@ function MejiroPageView({
 }) {
   if (result.hasImages || slotMode) {
     const rootClass = className ? `mejiro-page-slots ${className}` : "mejiro-page-slots";
-    return /* @__PURE__ */ jsx2("div", { className: rootClass, style: { position: "relative", ...style }, children: result.lines.map((line, i) => {
+    const fontFamilyCss = fontFamily != null ? normalizeFontFamily(fontFamily) : void 0;
+    return /* @__PURE__ */ jsx5("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 = {
@@ -66,38 +414,3207 @@ function MejiroPageView({
         top: slot.yStart,
         height: slot.height,
         fontSize: line.fontSize,
-        fontFamily,
+        fontFamily: fontFamilyCss,
         lineHeight: lineSpacing,
         fontWeight: line.headingLevel != null ? 700 : void 0
       };
       return (
         // biome-ignore lint/suspicious/noArrayIndexKey: lines have no stable ID
-        /* @__PURE__ */ jsx2("div", { style: colStyle, children: line.segments.map((seg, si) => renderSlotSegment(seg, si)) }, i)
+        /* @__PURE__ */ jsx5("div", { style: colStyle, children: line.segments.map((seg, si) => renderSlotSegment(seg, `${i}-${si}`)) }, i)
       );
     }) });
   }
-  return /* @__PURE__ */ jsx2(MejiroPage, { page: result.page, className, style });
+  return /* @__PURE__ */ jsx5(MejiroPage, { page: result.page, className, style });
 }
 
-// src/useImageOverlay.ts
+// src/MejiroScrollView.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function MejiroScrollView({
+  layout,
+  pageWidth,
+  pageHeight,
+  contentHeight,
+  fontFamily,
+  fontSize,
+  lineSpacing,
+  onVisiblePageChange,
+  scrollToPage,
+  pageGap = 24
+}) {
+  const containerRef = useRef2(null);
+  const pageRefs = useRef2([]);
+  const onVisiblePageChangeRef = useRef2(onVisiblePageChange);
+  onVisiblePageChangeRef.current = onVisiblePageChange;
+  const pages = useMemo2(() => {
+    const total = layout.totalPages;
+    return Array.from({ length: total }, (_, i) => layout.getPage(i));
+  }, [layout]);
+  const useSlot = true;
+  const contentStyle = { height: contentHeight };
+  if (fontFamily) contentStyle.fontFamily = normalizeFontFamily2(fontFamily);
+  if (fontSize != null) contentStyle.fontSize = fontSize;
+  if (lineSpacing != null) contentStyle.lineHeight = String(lineSpacing);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (typeof IntersectionObserver === "undefined") return;
+    let mostVisibleIdx = -1;
+    let mostVisibleRatio = 0;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const idx = Number(entry.target.dataset.pageIdx);
+          if (Number.isNaN(idx)) continue;
+          if (entry.intersectionRatio > mostVisibleRatio || idx === mostVisibleIdx) {
+            if (entry.isIntersecting) {
+              mostVisibleRatio = entry.intersectionRatio;
+              mostVisibleIdx = idx;
+            } else if (idx === mostVisibleIdx) {
+              mostVisibleIdx = -1;
+              mostVisibleRatio = 0;
+            }
+          }
+        }
+        if (mostVisibleIdx >= 0) onVisiblePageChangeRef.current?.(mostVisibleIdx);
+      },
+      { root: container, threshold: [0.25, 0.5, 0.75] }
+    );
+    for (const el of pageRefs.current) {
+      if (el) observer.observe(el);
+    }
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    if (scrollToPage == null) return;
+    const el = pageRefs.current[scrollToPage];
+    if (!(el && containerRef.current)) return;
+    containerRef.current.scrollTo({
+      top: el.offsetTop,
+      behavior: "auto"
+    });
+  }, [scrollToPage]);
+  return /* @__PURE__ */ jsx6("div", { ref: containerRef, className: "mejiro-reader-scroll", children: /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: "mejiro-reader-scroll-track",
+      style: { display: "flex", flexDirection: "column", gap: pageGap },
+      children: pages.map((result, i) => /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          ref: (el) => {
+            pageRefs.current[i] = el;
+          },
+          "data-page-idx": i,
+          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__ */ jsx6("div", { className: "mejiro-reader-page-viewport", children: /* @__PURE__ */ jsx6("div", { className: "mejiro-reader-page-clip", style: { height: contentHeight }, children: /* @__PURE__ */ jsx6(
+              MejiroPageView,
+              {
+                result,
+                slotMode: useSlot,
+                fontFamily,
+                lineSpacing,
+                className: "mejiro-reader-page-content",
+                style: contentStyle
+              }
+            ) }) })
+          ]
+        },
+        i
+      ))
+    }
+  ) });
+}
+
+// src/MejiroSettingsPanel.tsx
+import { normalizeFontFamily as normalizeFontFamily3 } from "@libraz/mejiro/browser";
+import { jsx as jsx7, jsxs as jsxs7 } 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 MejiroSettingsPanel({
+  open,
+  settings,
+  onChange,
+  fonts = DEFAULT_FONTS,
+  minFontSize = 10,
+  maxFontSize = 48
+}) {
+  const messages = useI18n();
+  const patch = (next) => onChange({ ...settings, ...next });
+  const currentFont = normalizeFontFamily3(settings.fontFamily);
+  const fontOptions = fonts.some((f) => f.value === currentFont) ? fonts : [{ value: currentFont, label: fontLabelFromCss(currentFont) }, ...fonts];
+  return /* @__PURE__ */ jsx7("div", { className: `mejiro-reader-settings-panel${open ? " is-open" : ""}`, children: /* @__PURE__ */ jsx7("div", { className: "mejiro-reader-settings-inner", children: /* @__PURE__ */ jsxs7("div", { className: "mejiro-reader-settings-content", 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: currentFont, onChange: (e) => patch({ fontFamily: e.target.value }), children: fontOptions.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(
+          "button",
+          {
+            type: "button",
+            className: "mejiro-reader-btn mejiro-reader-btn--icon",
+            "aria-label": messages.settingsSizeDown,
+            onClick: () => patch({ fontSize: Math.max(minFontSize, settings.fontSize - 1) }),
+            children: "A\u2212"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            id: "mejiro-reader-font-size",
+            type: "number",
+            value: settings.fontSize,
+            min: minFontSize,
+            max: maxFontSize,
+            onChange: (e) => patch({ fontSize: Number(e.target.value) })
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "mejiro-reader-btn mejiro-reader-btn--icon",
+            "aria-label": messages.settingsSizeUp,
+            onClick: () => patch({ fontSize: Math.min(maxFontSize, settings.fontSize + 1) }),
+            children: "A+"
+          }
+        )
+      ] })
+    ] }),
+    /* @__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(
+          "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__ */ jsxs7("div", { className: "mejiro-reader-control", children: [
+        /* @__PURE__ */ jsx7("label", { className: "mejiro-reader-control-label", htmlFor: "mejiro-reader-hanging", children: messages.settingsHanging }),
+        /* @__PURE__ */ jsxs7(
+          "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__ */ 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(
+          "input",
+          {
+            id: "mejiro-reader-line-spacing",
+            className: "mejiro-reader-control--wide",
+            type: "number",
+            value: settings.lineSpacing ?? 1.8,
+            min: 1,
+            max: 3,
+            step: 0.1,
+            onChange: (e) => patch({ lineSpacing: Number(e.target.value) })
+          }
+        )
+      ] })
+    ] })
+  ] }) }) });
+}
+
+// src/MejiroSpread.tsx
+import { normalizeFontFamily as normalizeFontFamily4 } from "@libraz/mejiro/browser";
+import {
+  useRef as useRef3
+} from "react";
+
+// src/MejiroImageOverlay.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+function MejiroImageOverlay({
+  rect,
+  label,
+  onOverlayPointerDown,
+  onResizePointerDown,
+  onClose
+}) {
+  const messages = useI18n();
+  const resolvedLabel = label ?? messages.imageButton;
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: "mejiro-reader-image-overlay",
+      style: {
+        left: rect.x,
+        top: rect.y,
+        width: rect.w,
+        height: rect.h
+      },
+      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__ */ jsx8("div", { className: "mejiro-reader-image-overlay-resize", onPointerDown: onResizePointerDown }),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            "aria-label": messages.imageRemoveButton,
+            title: messages.imageRemoveButton,
+            className: "mejiro-reader-image-overlay-close",
+            onPointerDown: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onClose?.();
+            },
+            onKeyDown: (e) => {
+              if (e.key !== "Enter" && e.key !== " ") return;
+              e.stopPropagation();
+              e.preventDefault();
+              onClose?.();
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/MejiroSelectionLayer.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function MejiroSelectionLayer({
+  rects,
+  side,
+  className,
+  style,
+  rectClassName,
+  rectStyle
+}) {
+  const wrapperClass = className ? `mejiro-selection-layer ${className}` : "mejiro-selection-layer";
+  const rectClass = rectClassName ?? "mejiro-selection-rect";
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: wrapperClass,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        ...style
+      },
+      children: rects.map((r, i) => {
+        if (r.side !== side) return null;
+        const posStyle = side === "right" ? { left: r.x, top: r.y } : { right: -(r.x + r.width), top: r.y };
+        return /* @__PURE__ */ jsx9(
+          "div",
+          {
+            className: rectClass,
+            style: {
+              position: "absolute",
+              width: r.width,
+              height: r.height,
+              ...posStyle,
+              ...rectStyle
+            }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/MejiroSpread.tsx
+import { jsx as jsx10, jsxs as jsxs9 } 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) : "" })
+  ] });
+}
+function MejiroSpread({
+  spread,
+  pageWidth,
+  pageHeight,
+  contentHeight,
+  fontFamily,
+  fontSize,
+  lineSpacing,
+  turning = false,
+  rightHeader = {},
+  leftHeader = {},
+  images = [],
+  renderPageHeader,
+  indicator,
+  onPrev,
+  onNext,
+  onImagePointerDown,
+  onImageResizePointerDown,
+  onImageClose,
+  anchorAtCoord,
+  selectionRects,
+  onSelectionChange,
+  singlePage = false,
+  onSwipe,
+  onSurfaceTap
+}) {
+  const messages = useI18n();
+  const hasImages = images.length > 0;
+  const useSlot = true;
+  const selectionStartRef = useRef3(null);
+  const selectionEnabled = anchorAtCoord != null && onSelectionChange != null;
+  const gestureRef = useRef3(null);
+  const gestureEnabled = onSwipe != null || onSurfaceTap != null;
+  const SWIPE_THRESHOLD = 40;
+  const TAP_MOVE_THRESHOLD = 8;
+  function handleGesturePointerDown(e) {
+    if (!gestureEnabled) return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    gestureRef.current = { x: e.clientX, y: e.clientY, t: Date.now() };
+  }
+  function handleGesturePointerUp(e) {
+    if (!gestureEnabled) return;
+    const start = gestureRef.current;
+    gestureRef.current = null;
+    if (!start) return;
+    const dx = e.clientX - start.x;
+    const dy = e.clientY - start.y;
+    const ax = Math.abs(dx);
+    const ay = Math.abs(dy);
+    if (ax >= SWIPE_THRESHOLD && ax >= ay * 1.4) {
+      onSwipe?.(dx < 0 ? "next" : "prev");
+      return;
+    }
+    if (ax < TAP_MOVE_THRESHOLD && ay < TAP_MOVE_THRESHOLD) {
+      const target = e.target;
+      if (target?.closest("button, a, .mejiro-reader-image-overlay")) return;
+      onSurfaceTap?.();
+    }
+  }
+  function resolvePointer(e) {
+    if (!anchorAtCoord) return null;
+    const target = e.target;
+    if (!target) return null;
+    const content = target.closest(".mejiro-reader-page-content");
+    if (!content) return null;
+    const pageEl = content.closest(".mejiro-reader-page");
+    const isRight = pageEl?.classList.contains("mejiro-reader-page--right") ?? true;
+    const rect = content.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+    const spreadX = isRight ? offsetX : offsetX - rect.width;
+    return anchorAtCoord(spreadX, offsetY);
+  }
+  function handlePointerDown(e) {
+    if (!selectionEnabled) return;
+    const anchor = resolvePointer(e);
+    if (!anchor) return;
+    e.preventDefault();
+    selectionStartRef.current = anchor;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    onSelectionChange?.(null);
+  }
+  function handlePointerMove(e) {
+    if (!selectionEnabled) return;
+    const start = selectionStartRef.current;
+    if (!start) return;
+    const end = resolvePointer(e);
+    if (!end) return;
+    if (end.paragraph === start.paragraph && end.charIndex === start.charIndex) return;
+    onSelectionChange?.({ start, end });
+  }
+  function handlePointerUp(e) {
+    if (!selectionEnabled) return;
+    selectionStartRef.current = null;
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  }
+  const contentStyle = { height: contentHeight };
+  if (fontFamily) contentStyle.fontFamily = normalizeFontFamily4(fontFamily);
+  if (fontSize != null) contentStyle.fontSize = fontSize;
+  if (lineSpacing != null) contentStyle.lineHeight = String(lineSpacing);
+  const renderPage = (side) => {
+    const isRight = side === "right";
+    const result = isRight ? spread.right : spread.left;
+    const header = isRight ? rightHeader : leftHeader;
+    const pageKey = `${side}-${header.pageNumber ?? "blank"}`;
+    const pageStyle = {
+      width: pageWidth,
+      height: pageHeight
+    };
+    if (isRight && hasImages) pageStyle.overflow = "visible";
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: `mejiro-reader-page mejiro-reader-page--${side}`,
+        style: pageStyle,
+        children: [
+          /* @__PURE__ */ jsx10("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(
+              MejiroPageView,
+              {
+                result,
+                slotMode: useSlot,
+                fontFamily,
+                lineSpacing,
+                className: "mejiro-reader-page-content",
+                style: contentStyle
+              },
+              pageKey
+            ),
+            selectionRects && selectionRects.length > 0 && /* @__PURE__ */ jsx10(MejiroSelectionLayer, { rects: selectionRects, side })
+          ] }) }),
+          isRight && images.map((item) => /* @__PURE__ */ jsx10(
+            MejiroImageOverlay,
+            {
+              rect: item.rect,
+              onOverlayPointerDown: (e) => onImagePointerDown?.(item.id, e),
+              onResizePointerDown: (e) => onImageResizePointerDown?.(item.id, e),
+              onClose: () => onImageClose?.(item.id)
+            },
+            item.id
+          ))
+        ]
+      },
+      pageKey
+    );
+  };
+  function combinedPointerDown(e) {
+    if (gestureEnabled) handleGesturePointerDown(e);
+    if (selectionEnabled) handlePointerDown(e);
+  }
+  function combinedPointerMove(e) {
+    if (selectionEnabled) handlePointerMove(e);
+  }
+  function combinedPointerUp(e) {
+    if (gestureEnabled) handleGesturePointerUp(e);
+    if (selectionEnabled) handlePointerUp(e);
+  }
+  const useCombined = selectionEnabled || gestureEnabled;
+  return /* @__PURE__ */ jsx10("div", { className: "mejiro-reader-book", children: /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: `mejiro-reader-spread${turning ? " is-turning" : ""}${singlePage ? " mejiro-reader-spread--single" : ""}`,
+      onPointerDown: useCombined ? combinedPointerDown : void 0,
+      onPointerMove: useCombined ? combinedPointerMove : void 0,
+      onPointerUp: useCombined ? combinedPointerUp : void 0,
+      onPointerCancel: useCombined ? combinedPointerUp : void 0,
+      children: [
+        renderPage("right"),
+        !singlePage && renderPage("left"),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            "aria-label": messages.prevSpread,
+            className: "mejiro-reader-nav-zone mejiro-reader-nav-zone--prev",
+            onClick: onPrev
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            type: "button",
+            "aria-label": messages.nextSpread,
+            className: "mejiro-reader-nav-zone mejiro-reader-nav-zone--next",
+            onClick: onNext
+          }
+        ),
+        indicator
+      ]
+    }
+  ) });
+}
+
+// src/MejiroStats.tsx
+import { estimateReadingTime, formatReadingTime } from "@libraz/mejiro/book";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function MejiroStats({
+  chapter,
+  totalPages,
+  elapsedMs,
+  fontLabel,
+  showReadingTime = false,
+  cpm = 600,
+  readingTimeLocale = "ja"
+}) {
+  if (!chapter) return /* @__PURE__ */ jsx11("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,
+    0
+  );
+  const readingTimeLabel = showReadingTime ? formatReadingTime(estimateReadingTime(chapter, { cpm }), readingTimeLocale) : null;
+  const parts = [
+    `${totalChars}ch`,
+    `${totalPages}pp`,
+    totalRuby > 0 ? `${totalRuby}ruby` : null,
+    readingTimeLabel,
+    fontLabel || null,
+    `${elapsedMs.toFixed(0)}ms`
+  ];
+  return /* @__PURE__ */ jsx11("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";
+function useChapterLayout(book, epub, chapterIndex, surface, options = {}) {
+  const enableResize = options.enableResize ?? true;
+  const resizeDebounce = options.resizeDebounce ?? 120;
+  const [layout, setLayout] = useState2(null);
+  const [pageWidth, setPageWidth] = useState2(0);
+  const [pageHeight, setPageHeight] = useState2(0);
+  const [contentHeight, setContentHeight] = useState2(0);
+  const [elapsedMs, setElapsedMs] = useState2(0);
+  const layoutRef = useRef4(null);
+  const requestIdRef = useRef4(0);
+  const pendingRestore = useRef4(null);
+  layoutRef.current = layout;
+  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);
+    setContentHeight(0);
+    setElapsedMs(0);
+  }, [recompute]);
+  useEffect2(() => {
+    void recompute();
+    return () => {
+      requestIdRef.current++;
+    };
+  }, [recompute]);
+  useEffect2(() => {
+    if (!enableResize) return;
+    const el = surface.current;
+    if (!el) return;
+    let timer = null;
+    let observed = false;
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const scheduleReflow = (immediate) => {
+      clear();
+      if (immediate) {
+        void recompute({ blank: false });
+        return;
+      }
+      timer = setTimeout(() => {
+        timer = null;
+        void recompute({ blank: false });
+      }, resizeDebounce);
+    };
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        const immediate = !observed;
+        observed = true;
+        scheduleReflow(immediate);
+      });
+      observer.observe(el);
+      return () => {
+        observer.disconnect();
+        clear();
+      };
+    }
+    const onWindowResize = () => scheduleReflow(false);
+    window.addEventListener("resize", onWindowResize);
+    return () => {
+      window.removeEventListener("resize", onWindowResize);
+      clear();
+    };
+  }, [surface, enableResize, resizeDebounce, recompute]);
+  return {
+    layout,
+    pageWidth,
+    pageHeight,
+    contentHeight,
+    elapsedMs,
+    recompute,
+    pendingRestore
+  };
+}
+
+// src/useEpub.ts
+import { parseEpub } from "@libraz/mejiro/epub";
+import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef5, useState as useState3 } from "react";
+function useEpub(options = {}) {
+  const [epub, setEpub] = useState3(null);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const requestIdRef = useRef5(0);
+  const onLoadRef = useRef5(options.onLoad);
+  onLoadRef.current = options.onLoad;
+  const onErrorRef = useRef5(options.onError);
+  onErrorRef.current = options.onError;
+  const fetchOptionsRef = useRef5(options.fetchOptions);
+  fetchOptionsRef.current = options.fetchOptions;
+  const fetchEpubRef = useRef5(options.fetchEpub);
+  fetchEpubRef.current = options.fetchEpub;
+  const loadBuffer = useCallback2(async (buffer) => {
+    const requestId = ++requestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const book = await parseEpub(buffer);
+      if (requestId !== requestIdRef.current) return null;
+      setEpub(book);
+      onLoadRef.current?.(book);
+      return book;
+    } catch (err) {
+      if (requestId === requestIdRef.current) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        setError(nextError);
+        onErrorRef.current?.(nextError);
+      }
+      return null;
+    } finally {
+      if (requestId === requestIdRef.current) setLoading(false);
+    }
+  }, []);
+  const loadFile = useCallback2(async (file) => {
+    const requestId = ++requestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      const book = await parseEpub(await file.arrayBuffer());
+      if (requestId !== requestIdRef.current) return null;
+      setEpub(book);
+      onLoadRef.current?.(book);
+      return book;
+    } catch (err) {
+      if (requestId === requestIdRef.current) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        setError(nextError);
+        onErrorRef.current?.(nextError);
+      }
+      return null;
+    } finally {
+      if (requestId === requestIdRef.current) setLoading(false);
+    }
+  }, []);
+  const loadUrl = useCallback2(async (url) => {
+    const requestId = ++requestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      let buffer;
+      if (fetchEpubRef.current) {
+        buffer = await fetchEpubRef.current(url);
+      } else {
+        const init = fetchOptionsRef.current;
+        const res = init ? await fetch(url, init) : await fetch(url);
+        if (!res.ok) return null;
+        buffer = await res.arrayBuffer();
+      }
+      const book = await parseEpub(buffer);
+      if (requestId !== requestIdRef.current) return null;
+      setEpub(book);
+      onLoadRef.current?.(book);
+      return book;
+    } catch (err) {
+      if (requestId === requestIdRef.current) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        setError(nextError);
+        onErrorRef.current?.(nextError);
+      }
+      return null;
+    } finally {
+      if (requestId === requestIdRef.current) setLoading(false);
+    }
+  }, []);
+  const defaultUrl = options.defaultUrl;
+  useEffect3(() => {
+    if (defaultUrl) void loadUrl(defaultUrl);
+  }, [defaultUrl, loadUrl]);
+  const replaceEpub = useCallback2((book) => {
+    requestIdRef.current++;
+    setLoading(false);
+    setError(null);
+    setEpub(book);
+  }, []);
+  return { epub, loading, error, loadBuffer, loadFile, loadUrl, setEpub: replaceEpub };
+}
+
+// src/useMejiroBook.ts
+import { MejiroBook } from "@libraz/mejiro/book";
+import { useCallback as useCallback3, useRef as useRef6, useState as useState4 } from "react";
+function useMejiroBook(initial) {
+  const bookRef = useRef6(null);
+  if (!bookRef.current) bookRef.current = new MejiroBook(initial);
+  const [options, setLocal] = useState4(initial);
+  const setOptions = useCallback3(async (next) => {
+    setLocal((prev) => ({ ...prev, ...next }));
+    await bookRef.current?.setOptions(next);
+  }, []);
+  return { book: bookRef.current, options, setOptions };
+}
+
+// src/useMultiImageOverlay.ts
 import { moveImageOverlayRect, resizeImageOverlayRect } from "@libraz/mejiro";
-import { useCallback, useRef, useState } from "react";
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useMemo as useMemo3,
+  useRef as useRef7,
+  useState as useState5
+} from "react";
+var nextId = 0;
+function useMultiImageOverlay(layout, spreadIdx, options = {}) {
+  const defW = options.defaultWidth ?? 120;
+  const defH = options.defaultHeight ?? 160;
+  const defX = options.defaultX ?? 80;
+  const defY = options.defaultY ?? 100;
+  const margin = options.margin;
+  const [images, setImages] = useState5(() => /* @__PURE__ */ new Map());
+  const imagesRef = useRef7(images);
+  imagesRef.current = images;
+  const layoutRef = useRef7(null);
+  layoutRef.current = layout;
+  const spreadIdxRef = useRef7(spreadIdx);
+  spreadIdxRef.current = spreadIdx;
+  const onUpdateRef = useRef7(options.onUpdate);
+  onUpdateRef.current = options.onUpdate;
+  const activeDragCleanupsRef = useRef7(/* @__PURE__ */ new Set());
+  useEffect4(
+    () => () => {
+      for (const cleanup of activeDragCleanupsRef.current) cleanup();
+      activeDragCleanupsRef.current.clear();
+    },
+    []
+  );
+  const syncSpread = useCallback4(
+    (si) => {
+      const lo = layoutRef.current;
+      if (!lo) return;
+      const items = imagesRef.current.get(si) ?? [];
+      const bookImages = items.map((it) => ({
+        x: it.rect.x,
+        y: it.rect.y,
+        w: it.rect.w,
+        h: it.rect.h,
+        margin
+      }));
+      lo.setImages(si, bookImages);
+      onUpdateRef.current?.(lo.getSpread(si));
+    },
+    [margin]
+  );
+  const commit = useCallback4(
+    (next, affectedSpread) => {
+      imagesRef.current = next;
+      setImages(next);
+      syncSpread(affectedSpread);
+    },
+    [syncSpread]
+  );
+  const findById = useCallback4(
+    (id) => {
+      for (const [s, list] of imagesRef.current) {
+        const i = list.findIndex((it) => it.id === id);
+        if (i >= 0) return { spread: s, index: i, item: list[i] };
+      }
+      return null;
+    },
+    []
+  );
+  const addImage = useCallback4(
+    (overrides) => {
+      const si = spreadIdxRef.current;
+      const list = imagesRef.current.get(si) ?? [];
+      const last = list[list.length - 1];
+      const baseX = last ? last.rect.x - 100 : defX;
+      const baseY = last ? last.rect.y + 40 : defY;
+      nextId += 1;
+      const item = {
+        id: `mejiro-img-${nextId}`,
+        rect: {
+          x: overrides?.x ?? baseX,
+          y: overrides?.y ?? baseY,
+          w: overrides?.w ?? defW,
+          h: overrides?.h ?? defH
+        }
+      };
+      const next = new Map(imagesRef.current);
+      next.set(si, [...list, item]);
+      commit(next, si);
+      return item;
+    },
+    [defX, defY, defW, defH, commit]
+  );
+  const removeImage = useCallback4(
+    (id) => {
+      const found = findById(id);
+      if (!found) return;
+      const next = new Map(imagesRef.current);
+      const list = (next.get(found.spread) ?? []).filter((it) => it.id !== id);
+      if (list.length === 0) next.delete(found.spread);
+      else next.set(found.spread, list);
+      commit(next, found.spread);
+    },
+    [findById, commit]
+  );
+  const updateImage = useCallback4(
+    (id, rect) => {
+      const found = findById(id);
+      if (!found) return;
+      const next = new Map(imagesRef.current);
+      const list = (next.get(found.spread) ?? []).map(
+        (it) => it.id === id ? { ...it, rect: { ...it.rect, ...rect } } : it
+      );
+      next.set(found.spread, list);
+      commit(next, found.spread);
+    },
+    [findById, commit]
+  );
+  const clearImages = useCallback4(
+    (target) => {
+      if (target == null) {
+        const old = imagesRef.current;
+        imagesRef.current = /* @__PURE__ */ new Map();
+        setImages(/* @__PURE__ */ new Map());
+        layoutRef.current?.clearImages();
+        if (layoutRef.current) {
+          for (const si of old.keys()) onUpdateRef.current?.(layoutRef.current.getSpread(si));
+        }
+      } else {
+        const next = new Map(imagesRef.current);
+        next.delete(target);
+        commit(next, target);
+      }
+    },
+    [commit]
+  );
+  const onOverlayPointerDown = useCallback4(
+    (id, e) => {
+      e.preventDefault();
+      const found = findById(id);
+      if (!found) return;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const start = { ...found.item.rect };
+      const target = e.currentTarget;
+      target.setPointerCapture(e.nativeEvent.pointerId);
+      target.classList.add("is-dragging");
+      let rafId = 0;
+      const onMove = (me) => {
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        const r = moveImageOverlayRect(start, dx, dy);
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => updateImage(id, r));
+      };
+      let cleanup;
+      const onUp = () => cleanup();
+      cleanup = () => {
+        cancelAnimationFrame(rafId);
+        target.classList.remove("is-dragging");
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        activeDragCleanupsRef.current.delete(cleanup);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+      activeDragCleanupsRef.current.add(cleanup);
+    },
+    [findById, updateImage]
+  );
+  const onResizePointerDown = useCallback4(
+    (id, e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const found = findById(id);
+      if (!found) return;
+      const startX = e.clientX;
+      const startY = e.clientY;
+      const start = { ...found.item.rect };
+      const target = e.currentTarget;
+      target.setPointerCapture(e.nativeEvent.pointerId);
+      target.parentElement?.classList.add("is-dragging");
+      let rafId = 0;
+      const onMove = (me) => {
+        const dx = me.clientX - startX;
+        const dy = me.clientY - startY;
+        const r = resizeImageOverlayRect(start, dx, dy);
+        cancelAnimationFrame(rafId);
+        rafId = requestAnimationFrame(() => updateImage(id, r));
+      };
+      let cleanup;
+      const onUp = () => cleanup();
+      cleanup = () => {
+        cancelAnimationFrame(rafId);
+        target.parentElement?.classList.remove("is-dragging");
+        document.removeEventListener("pointermove", onMove);
+        document.removeEventListener("pointerup", onUp);
+        activeDragCleanupsRef.current.delete(cleanup);
+      };
+      document.addEventListener("pointermove", onMove);
+      document.addEventListener("pointerup", onUp);
+      activeDragCleanupsRef.current.add(cleanup);
+    },
+    [findById, updateImage]
+  );
+  useEffect4(() => {
+    if (!layout) return;
+    for (const si of imagesRef.current.keys()) syncSpread(si);
+  }, [layout, syncSpread]);
+  const currentImages = useMemo3(() => images.get(spreadIdx) ?? [], [images, spreadIdx]);
+  const hasImages = useMemo3(() => [...images.values()].some((list) => list.length > 0), [images]);
+  return {
+    imagesBySpread: images,
+    currentImages,
+    hasImages,
+    addImage,
+    removeImage,
+    updateImage,
+    clearImages,
+    onOverlayPointerDown,
+    onResizePointerDown
+  };
+}
+
+// src/useSpread.ts
+import { useCallback as useCallback5, useEffect as useEffect5, useLayoutEffect as useLayoutEffect3, useRef as useRef8, useState as useState6 } from "react";
+function useSpread(layout, options = {}) {
+  const enableKeyboard = options.enableKeyboard ?? true;
+  const turnDuration = options.turnDuration ?? 180;
+  const onChangeRef = useRef8(options.onChange);
+  onChangeRef.current = options.onChange;
+  const [spreadIdx, setSpreadIdx] = useState6(0);
+  const [spread, setSpread] = useState6(null);
+  const [turning, setTurning] = useState6(false);
+  const layoutRef = useRef8(null);
+  layoutRef.current = layout;
+  const spreadIdxRef = useRef8(0);
+  spreadIdxRef.current = spreadIdx;
+  const turnTimerRef = useRef8(null);
+  const layoutGenerationRef = useRef8(0);
+  const totalPages = layout?.totalPages ?? 0;
+  const totalSpreads = Math.max(1, Math.ceil(totalPages / 2));
+  const refresh = useCallback5(() => {
+    if (!layoutRef.current) {
+      setSpread(null);
+      return;
+    }
+    setSpread(layoutRef.current.getSpread(spreadIdxRef.current));
+  }, []);
+  useLayoutEffect3(() => {
+    layoutGenerationRef.current++;
+    if (turnTimerRef.current) {
+      clearTimeout(turnTimerRef.current);
+      turnTimerRef.current = null;
+    }
+    setTurning(false);
+    setSpreadIdx(0);
+    if (!layout) {
+      setSpread(null);
+      return;
+    }
+    setSpread(layout.getSpread(0));
+  }, [layout]);
+  useEffect5(() => {
+    if (!layout) return;
+    setSpread(layout.getSpread(spreadIdx));
+    onChangeRef.current?.(spreadIdx);
+  }, [layout, spreadIdx]);
+  const goTo = useCallback5(
+    (index) => {
+      if (!layoutRef.current) return;
+      const max = Math.max(1, Math.ceil(layoutRef.current.totalPages / 2)) - 1;
+      const target = Math.max(0, Math.min(max, index));
+      if (target === spreadIdxRef.current) return;
+      if (turnDuration > 0) {
+        const generation = layoutGenerationRef.current;
+        if (turnTimerRef.current) clearTimeout(turnTimerRef.current);
+        setTurning(true);
+        turnTimerRef.current = setTimeout(() => {
+          if (generation !== layoutGenerationRef.current) return;
+          setSpreadIdx(target);
+          setTurning(false);
+          turnTimerRef.current = null;
+        }, turnDuration);
+      } else {
+        setSpreadIdx(target);
+      }
+    },
+    [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(() => {
+    if (!enableKeyboard) return;
+    const onKey = (e) => {
+      if (!layoutRef.current) return;
+      if (e.key === "ArrowLeft") next();
+      else if (e.key === "ArrowRight") prev();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [enableKeyboard, next, prev]);
+  useEffect5(
+    () => () => {
+      if (turnTimerRef.current) clearTimeout(turnTimerRef.current);
+    },
+    []
+  );
+  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";
+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,
+    pageGeometry: pageGeometryProp,
+    fonts,
+    epub: epubProp,
+    epubUrl,
+    chapter: chapterProp,
+    spreadIdx: spreadIdxProp,
+    theme = "light",
+    mode = "paginated",
+    spreadMode = "double",
+    fit = "fill",
+    enableSurfaceTap = true,
+    fallback,
+    fetchOptions,
+    fetchEpub: fetchEpubFn,
+    locale,
+    messages,
+    title = "mejiro",
+    subtitle,
+    logo,
+    bare = false,
+    enableHeader = !bare,
+    enableDropZone = false,
+    enableChapterNav = !bare,
+    chapterNavMode = "select",
+    enableSettings = !bare,
+    renderSettings,
+    enableImageOverlay = false,
+    enableStats = !bare,
+    enableKeyboard = true,
+    enablePageIndicator = !bare,
+    pageNumbers = "both",
+    annotations,
+    onLoad,
+    onError,
+    onChapterChange,
+    onSpreadChange,
+    onSpreadIdxChange,
+    onPageRead,
+    onChapterCompleted
+  } = props;
+  const surfaceRef = useRef9(null);
+  const fileRef = useRef9(null);
+  const [settingsOpen, setSettingsOpen] = useState7(false);
+  const [chapterState, setChapterState] = useState7(chapterProp ?? 0);
+  const chapter = chapterProp ?? chapterState;
+  const [chromeHidden, setChromeHidden] = useState7(false);
+  const [autoSingle, setAutoSingle] = useState7(false);
+  useEffect6(() => {
+    if (!settingsOpen) return;
+    const onKey = (e2) => {
+      if (e2.key === "Escape") setSettingsOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [settingsOpen]);
+  useEffect6(() => {
+    if (spreadMode !== "auto") return;
+    const surface = surfaceRef.current;
+    if (!surface) return;
+    const update = () => {
+      const rect = surface.getBoundingClientRect();
+      setAutoSingle(rect.width < rect.height);
+    };
+    update();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(update);
+    observer.observe(surface);
+    return () => observer.disconnect();
+  }, [spreadMode]);
+  const effectiveSingle = spreadMode === "single" || spreadMode === "auto" && autoSingle;
+  const resolvedGeometry = useMemo4(() => {
+    const columns = effectiveSingle ? 1 : 2;
+    if (fit !== "width") return { columns, ...pageGeometryProp };
+    return {
+      columns,
+      gutterOffset: 0,
+      headerOffset: 0,
+      maxHeight: Number.POSITIVE_INFINITY,
+      minWidth: 0,
+      minHeight: 0,
+      ...pageGeometryProp
+    };
+  }, [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 { book, options: bookOptions, setOptions } = useMejiroBook(options);
+  const synthesizedEpub = useMemo4(() => {
+    if (manuscriptProp === void 0) return null;
+    return manuscriptToEpubBook(manuscriptProp, { dialect: dialectProp });
+  }, [manuscriptProp, dialectProp]);
+  const epubCtx = useEpub({
+    // `epub` / `manuscript` take precedence: skip the URL fetch when a parsed
+    // book (or a synthesized manuscript book) is supplied.
+    defaultUrl: epubProp !== void 0 || manuscriptProp !== void 0 ? void 0 : epubUrl,
+    fetchOptions,
+    fetchEpub: fetchEpubFn,
+    onLoad: (b) => {
+      if (chapterProp == null) setChapterState(0);
+      onLoad?.(b);
+    }
+  });
+  const controlled = epubProp !== void 0 || manuscriptProp !== void 0;
+  const isManuscriptSource = manuscriptProp !== void 0;
+  const e = isManuscriptSource ? synthesizedEpub : controlled ? epubProp ?? null : epubCtx.epub;
+  const onErrorRef = useRef9(onError);
+  onErrorRef.current = onError;
+  useEffect6(() => {
+    if (epubCtx.error) onErrorRef.current?.(epubCtx.error);
+  }, [epubCtx.error]);
+  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);
+    onSpreadIdxChange?.(i);
+  };
+  const spreadCtx = useSpread(layoutCtx.layout, {
+    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()
+  });
+  const annotationRects = useMemo4(() => {
+    if (!(annotations && layoutCtx.layout)) return [];
+    const result = [];
+    for (const annotation of annotations) {
+      if (annotation.chapter !== chapter) continue;
+      const rects = layoutCtx.layout.selectionRects({
+        start: annotation.start,
+        end: annotation.end
+      });
+      for (const rect of rects) result.push(rect);
+    }
+    return result;
+  }, [annotations, layoutCtx.layout, chapter]);
+  const clearImagesRef = useRef9(imageCtx.clearImages);
+  clearImagesRef.current = imageCtx.clearImages;
+  const onLoadRef = useRef9(onLoad);
+  onLoadRef.current = onLoad;
+  useEffect6(() => {
+    if (!controlled) return;
+    if (chapterProp == null) setChapterState(0);
+    clearImagesRef.current();
+    book.clearCache();
+    if (epubProp) onLoadRef.current?.(epubProp);
+  }, [controlled, epubProp, book, chapterProp]);
+  const spreadGoToRef = useRef9(spreadCtx.goTo);
+  spreadGoToRef.current = spreadCtx.goTo;
+  useEffect6(() => {
+    if (spreadIdxProp == null) return;
+    spreadGoToRef.current(spreadIdxProp);
+  }, [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;
+      if (chapterProp == null) setChapterState(i);
+      onChapterChange?.(i);
+    },
+    [chapter, chapterProp, onChapterChange]
+  );
+  const listenersRef = useRef9(/* @__PURE__ */ new Map());
+  const emit = useCallback6(
+    (event, payload) => {
+      const set = listenersRef.current.get(event);
+      if (!set) return;
+      for (const cb of set) cb(payload);
+    },
+    []
+  );
+  const pendingAnchorRef = useRef9(null);
+  const layout = layoutCtx.layout;
+  const tryApplyPendingAnchor = useCallback6(() => {
+    const pending = pendingAnchorRef.current;
+    if (!pending) return;
+    if (pending.anchor.chapter !== chapter) return;
+    if (!layout) return;
+    const loc = layout.locateAnchor({
+      paragraph: pending.anchor.paragraph,
+      charIndex: pending.anchor.charIndex
+    });
+    if (!loc) return;
+    pendingAnchorRef.current = null;
+    spreadGoToRef.current(loc.spreadIdx);
+    pending.resolve();
+  }, [chapter, layout]);
+  useEffect6(() => {
+    tryApplyPendingAnchor();
+  }, [tryApplyPendingAnchor]);
+  useEffect6(
+    () => () => {
+      pendingAnchorRef.current?.resolve();
+      pendingAnchorRef.current = null;
+    },
+    []
+  );
+  const didMountRef = useRef9(false);
+  const dwellRef = useRef9(null);
+  const onPageReadRef = useRef9(onPageRead);
+  onPageReadRef.current = onPageRead;
+  const onChapterCompletedRef = useRef9(onChapterCompleted);
+  onChapterCompletedRef.current = onChapterCompleted;
+  useEffect6(() => {
+    const now = typeof performance !== "undefined" ? performance.now() : Date.now();
+    if (didMountRef.current && dwellRef.current) {
+      onPageReadRef.current?.(dwellRef.current.anchor, now - dwellRef.current.ts);
+    }
+    if (layout) {
+      const inCh = layout.anchorAt(spreadCtx.spreadIdx, "right");
+      dwellRef.current = inCh ? { anchor: { chapter, ...inCh }, ts: now } : null;
+    } else {
+      dwellRef.current = null;
+    }
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    emit("spreadChanged", { chapter, spreadIdx: spreadCtx.spreadIdx });
+    if (spreadCtx.totalSpreads > 0 && spreadCtx.spreadIdx === spreadCtx.totalSpreads - 1) {
+      emit("chapterFinished", { chapter });
+      onChapterCompletedRef.current?.(chapter);
+    }
+  }, [chapter, spreadCtx.spreadIdx, spreadCtx.totalSpreads, layout, emit]);
+  const prevTurningRef = useRef9(false);
+  useEffect6(() => {
+    if (spreadCtx.turning && !prevTurningRef.current) {
+      emit("turnStart", { from: spreadCtx.spreadIdx });
+    } else if (!spreadCtx.turning && prevTurningRef.current) {
+      emit("turnEnd", { to: spreadCtx.spreadIdx });
+    }
+    prevTurningRef.current = spreadCtx.turning;
+  }, [spreadCtx.turning, spreadCtx.spreadIdx, emit]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      goToSpread: (i) => spreadGoToRef.current(i),
+      next: () => spreadCtx.next(),
+      prev: () => spreadCtx.prev(),
+      goToChapter: (i) => onChapter(i),
+      getReadingPosition: () => ({
+        chapter,
+        spreadIdx: spreadCtx.spreadIdx,
+        totalPages: spreadCtx.totalPages,
+        totalSpreads: spreadCtx.totalSpreads
+      }),
+      goToAnchor: (anchor) => new Promise((resolve) => {
+        pendingAnchorRef.current?.resolve();
+        pendingAnchorRef.current = { anchor, resolve };
+        if (anchor.chapter !== chapter) onChapter(anchor.chapter);
+        tryApplyPendingAnchor();
+      }),
+      getAnchor: () => {
+        if (!layout) return null;
+        const inCh = layout.anchorAt(spreadCtx.spreadIdx, "right");
+        return inCh ? { chapter, ...inCh } : null;
+      },
+      getVisibleRange: () => {
+        if (!layout) return null;
+        const start = layout.anchorAt(spreadCtx.spreadIdx, "right");
+        if (!start) return null;
+        const next = layout.anchorAt(spreadCtx.spreadIdx + 1, "right");
+        let end;
+        if (next) {
+          end = next;
+        } else {
+          const ch = e?.chapters[chapter];
+          const lastP = (ch?.paragraphs.length ?? 1) - 1;
+          const lastText = ch?.paragraphs[lastP]?.text ?? "";
+          end = { paragraph: Math.max(0, lastP), charIndex: [...lastText].length };
+        }
+        return {
+          start: { chapter, ...start },
+          end: { chapter, ...end }
+        };
+      },
+      setOptions: (partial) => setOptions(partial),
+      subscribe: (event, listener) => {
+        let set = listenersRef.current.get(event);
+        if (!set) {
+          set = /* @__PURE__ */ new Set();
+          listenersRef.current.set(event, set);
+        }
+        set.add(listener);
+        return () => {
+          listenersRef.current.get(event)?.delete(listener);
+        };
+      }
+    }),
+    [
+      spreadCtx.next,
+      spreadCtx.prev,
+      spreadCtx.spreadIdx,
+      spreadCtx.totalPages,
+      spreadCtx.totalSpreads,
+      onChapter,
+      chapter,
+      layout,
+      e,
+      setOptions,
+      tryApplyPendingAnchor
+    ]
+  );
+  const editable = {
+    fontFamily: bookOptions.fontFamily,
+    fontSize: bookOptions.fontSize,
+    lineSpacing: bookOptions.lineSpacing ?? 1.8,
+    mode: bookOptions.mode ?? "strict",
+    enableHanging: bookOptions.enableHanging ?? true
+  };
+  const fontLabel = (() => {
+    const css = normalizeFontFamily5(bookOptions.fontFamily);
+    const f = fonts?.find((x) => x.value === css);
+    const name = f?.label ?? css;
+    return `${name} ${bookOptions.fontSize}px`;
+  })();
+  const showChapterSelect = e && enableChapterNav && (chapterNavMode === "select" || chapterNavMode === "both");
+  const showChapterPanel = e && enableChapterNav && (chapterNavMode === "panel" || chapterNavMode === "both");
+  const runningTitleRight = e ? e.author ? `${e.author}  ${e.title}` : e.title : "";
+  const runningTitleLeft = e?.chapters[chapter]?.title ?? "";
+  const layoutReady = e && spreadCtx.spread && layoutCtx.layout && layoutCtx.pageWidth > 0;
+  const themeName = typeof theme === "string" ? theme : theme.name;
+  const themeOverride = typeof theme === "string" ? void 0 : theme.override;
+  const themeStyle = useMemo4(() => {
+    const 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 header = enableHeader ? /* @__PURE__ */ jsxs10("header", { className: "mejiro-reader-header", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "mejiro-reader-header-left", children: [
+      logo === void 0 ? defaultLogo : logo,
+      showChapterSelect && /* @__PURE__ */ jsx12(MejiroChapterNav, { epub: e, chapter, onChange: onChapter })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "mejiro-reader-header-actions", children: [
+      enableStats && /* @__PURE__ */ jsx12(
+        MejiroStats,
+        {
+          chapter: e?.chapters[chapter] ?? null,
+          totalPages: layoutCtx.layout?.totalPages ?? 0,
+          elapsedMs: layoutCtx.elapsedMs,
+          fontLabel
+        }
+      ),
+      enableDropZone && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: "mejiro-reader-btn",
+          onClick: () => fileRef.current?.click(),
+          children: resolvedMessages.openButton
+        }
+      ),
+      enableImageOverlay && e && /* @__PURE__ */ jsx12(
+        "button",
+        {
+          type: "button",
+          className: `mejiro-reader-btn${imageCtx.hasImages ? " is-active" : ""}`,
+          onClick: () => imageCtx.addImage(),
+          children: resolvedMessages.imageButton
+        }
+      ),
+      enableSettings && /* @__PURE__ */ jsxs10(
+        "button",
+        {
+          type: "button",
+          className: `mejiro-reader-btn${settingsOpen ? " is-active" : ""}`,
+          onClick: () => setSettingsOpen((v) => !v),
+          children: [
+            resolvedMessages.settingsButton,
+            /* @__PURE__ */ jsx12("span", { className: "mejiro-reader-btn-arrow", children: "\u25BE" })
+          ]
+        }
+      )
+    ] })
+  ] }) : null;
+  const currentSpread = spreadCtx.spreadIdx;
+  const rightPage = currentSpread * 2 + 1;
+  const leftPage = currentSpread * 2 + 2;
+  const showLeft = spreadCtx.spread != null && leftPage <= spreadCtx.spread.totalPages;
+  const showRightNum = pageNumbers === "both" || pageNumbers === "right";
+  const showLeftNum = pageNumbers === "both" || pageNumbers === "left";
+  return /* @__PURE__ */ jsx12(MejiroI18nProvider, { messages: resolvedMessages, children: /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      className: `mejiro-reader${chromeHidden ? " mejiro-reader--chrome-hidden" : ""}${fit === "width" ? " mejiro-reader--fit-width" : ""}`,
+      "data-mejiro-theme": themeName,
+      style: themeStyle,
+      children: [
+        header,
+        enableSettings && (renderSettings ? /* @__PURE__ */ jsx12("div", { className: `mejiro-reader-settings-panel${settingsOpen ? " is-open" : ""}`, children: /* @__PURE__ */ jsx12("div", { className: "mejiro-reader-settings-inner", children: /* @__PURE__ */ jsx12("div", { className: "mejiro-reader-settings-content", children: renderSettings({
+          settings: editable,
+          update: setOptions,
+          open: settingsOpen,
+          toggle: () => setSettingsOpen((v) => !v)
+        }) }) }) }) : /* @__PURE__ */ jsx12(
+          MejiroSettingsPanel,
+          {
+            open: settingsOpen,
+            settings: editable,
+            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(
+              MejiroScrollView,
+              {
+                layout: layoutCtx.layout,
+                pageWidth: layoutCtx.pageWidth,
+                pageHeight: layoutCtx.pageHeight,
+                contentHeight: layoutCtx.contentHeight,
+                fontFamily: bookOptions.fontFamily,
+                fontSize: bookOptions.fontSize,
+                lineSpacing: bookOptions.lineSpacing,
+                scrollToPage: spreadCtx.spreadIdx * 2,
+                onVisiblePageChange: (pageIdx) => {
+                  const target = Math.floor(pageIdx / 2);
+                  if (target !== spreadCtx.spreadIdx) spreadGoToRef.current(target);
+                }
+              }
+            ),
+            layoutReady && mode === "paginated" && spreadCtx.spread && /* @__PURE__ */ jsx12(
+              MejiroSpread,
+              {
+                singlePage: effectiveSingle,
+                onSwipe: (dir) => dir === "next" ? spreadCtx.next() : spreadCtx.prev(),
+                onSurfaceTap: enableSurfaceTap ? () => setChromeHidden((v) => !v) : void 0,
+                spread: spreadCtx.spread,
+                pageWidth: layoutCtx.pageWidth,
+                pageHeight: layoutCtx.pageHeight,
+                contentHeight: layoutCtx.contentHeight,
+                fontFamily: bookOptions.fontFamily,
+                fontSize: bookOptions.fontSize,
+                lineSpacing: bookOptions.lineSpacing,
+                turning: spreadCtx.turning,
+                rightHeader: {
+                  title: runningTitleRight,
+                  pageNumber: showRightNum ? rightPage : null
+                },
+                leftHeader: {
+                  title: runningTitleLeft,
+                  pageNumber: showLeft && showLeftNum ? leftPage : null
+                },
+                images: imageCtx.currentImages,
+                indicator: enablePageIndicator ? /* @__PURE__ */ jsx12(
+                  MejiroPageIndicator,
+                  {
+                    current: spreadCtx.spreadIdx + 1,
+                    total: spreadCtx.totalSpreads
+                  }
+                ) : null,
+                onPrev: spreadCtx.prev,
+                onNext: spreadCtx.next,
+                onImagePointerDown: imageCtx.onOverlayPointerDown,
+                onImageResizePointerDown: imageCtx.onResizePointerDown,
+                onImageClose: imageCtx.removeImage,
+                selectionRects: annotationRects.length ? annotationRects : void 0
+              },
+              `${chapter}-${spreadCtx.spreadIdx}-${layoutCtx.pageWidth}x${layoutCtx.pageHeight}`
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref: fileRef,
+            type: "file",
+            accept: ".epub",
+            hidden: true,
+            onChange: (ev) => {
+              const file = ev.target.files?.[0];
+              if (file) void epubCtx.loadFile(file);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx12("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
+        }) : "" })
+      ]
+    }
+  ) });
+}
+var MejiroReader = forwardRef(MejiroReaderInner);
+MejiroReader.displayName = "MejiroReader";
+
+// src/MejiroEditor.tsx
+import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+function cloneBook(book) {
+  return {
+    ...book,
+    chapters: book.chapters.map((chapter) => ({
+      ...chapter,
+      blocks: chapter.blocks.map(
+        (block) => block.kind === "paragraph" ? { ...block, inlineAnnotations: [...block.inlineAnnotations] } : { ...block }
+      ),
+      imageAssets: new Map(chapter.imageAssets),
+      originalImageHrefs: chapter.originalImageHrefs ? [...chapter.originalImageHrefs] : void 0,
+      paragraphs: chapter.paragraphs.map((paragraph) => ({
+        ...paragraph,
+        inlineAnnotations: [...paragraph.inlineAnnotations]
+      })),
+      paragraphRefs: chapter.paragraphRefs ? [...chapter.paragraphRefs] : void 0
+    })),
+    packageData: {
+      ...book.packageData,
+      files: new Map(book.packageData.files)
+    }
+  };
+}
+function utf16ToCodepoint(text, utf16Offset) {
+  let cp = 0;
+  let i = 0;
+  while (i < utf16Offset && i < text.length) {
+    const ch = text.codePointAt(i);
+    if (ch === void 0) break;
+    i += ch > 65535 ? 2 : 1;
+    cp++;
+  }
+  return cp;
+}
+function applyWatermark(editor, watermark) {
+  editor.transaction(() => {
+    for (let i = 0; i < editor.chapters.length; i++) {
+      editor.insertParagraph(i, 0, {
+        text: `[mejiro-watermark] ${watermark.text}`,
+        inlineAnnotations: []
+      });
+    }
+  });
+}
+function MejiroEditor({
+  epubUrl,
+  fonts,
+  enableProofread = true,
+  enableRuby = true,
+  enableImages = true,
+  enableExport = true,
+  onBeforeExport,
+  exportPolicy,
+  assetResolver,
+  onLoad,
+  onExport,
+  onError
+}) {
+  const messages = useI18n();
+  const imageInputRef = useRef10(null);
+  const textareaRef = useRef10(null);
+  const [editor, setEditor] = useState8(null);
+  const [loading, setLoading] = useState8(false);
+  const [error, setError] = useState8(null);
+  const [revision, setRevision] = useState8(0);
+  const [selection, setSelection] = useState8({ chapter: 0, paragraph: 0 });
+  const [text, setText] = useState8("");
+  const [rubyStart, setRubyStart] = useState8(0);
+  const [rubyEnd, setRubyEnd] = useState8(1);
+  const [rubyText, setRubyText] = useState8("");
+  const loadRequestIdRef = useRef10(0);
+  const onLoadRef = useRef10(onLoad);
+  const onErrorRef = useRef10(onError);
+  const 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;
+  useEffect7(() => {
+    onLoadRef.current = onLoad;
+  }, [onLoad]);
+  useEffect7(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+  const loadBufferForRequest = useCallback7(async (buffer, requestId) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await EditableEpub.load(buffer);
+      if (requestId !== loadRequestIdRef.current) return;
+      setEditor(next);
+      setSelection({ chapter: 0, paragraph: 0 });
+      setRevision((value) => value + 1);
+      onLoadRef.current?.(next);
+    } catch (err) {
+      if (requestId === loadRequestIdRef.current) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        setError(nextError);
+        onErrorRef.current?.(nextError);
+      }
+    } finally {
+      if (requestId === loadRequestIdRef.current) setLoading(false);
+    }
+  }, []);
+  async function loadFile(file) {
+    const requestId = ++loadRequestIdRef.current;
+    setLoading(true);
+    setError(null);
+    try {
+      await loadBufferForRequest(await file.arrayBuffer(), requestId);
+    } catch (err) {
+      if (requestId === loadRequestIdRef.current) {
+        const nextError = err instanceof Error ? err : new Error(String(err));
+        setError(nextError);
+        onErrorRef.current?.(nextError);
+        setLoading(false);
+      }
+    }
+  }
+  useEffect7(() => {
+    if (!epubUrl) return;
+    let cancelled = false;
+    const requestId = ++loadRequestIdRef.current;
+    void (async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(epubUrl);
+        if (!res.ok) throw new Error(`Failed to load EPUB: ${res.status}`);
+        const buffer = await res.arrayBuffer();
+        if (cancelled || requestId !== loadRequestIdRef.current) return;
+        await loadBufferForRequest(buffer, requestId);
+      } catch (err) {
+        if (!cancelled && requestId === loadRequestIdRef.current) {
+          const nextError = err instanceof Error ? err : new Error(String(err));
+          setError(nextError);
+          onErrorRef.current?.(nextError);
+        }
+      } finally {
+        if (!cancelled && requestId === loadRequestIdRef.current) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [epubUrl, loadBufferForRequest]);
+  useEffect7(() => {
+    setText(paragraph?.text ?? "");
+    setRubyStart(0);
+    setRubyEnd(Math.min(1, [...paragraph?.text ?? ""].length));
+    setRubyText("");
+  }, [paragraph]);
+  function selectParagraph(chapterIndex, paragraphIndex) {
+    setSelection({ chapter: chapterIndex, paragraph: paragraphIndex });
+  }
+  function captureRubyRange() {
+    const el = textareaRef.current;
+    if (!el) return;
+    const utf16Start = el.selectionStart ?? 0;
+    const utf16End = el.selectionEnd ?? utf16Start;
+    const start = utf16ToCodepoint(text, utf16Start);
+    const end = utf16ToCodepoint(text, Math.max(utf16End, utf16Start + 1));
+    setRubyStart(start);
+    setRubyEnd(Math.max(start + 1, end));
+  }
+  function applyText() {
+    if (!editor) return;
+    editor.updateParagraph(selection.chapter, selection.paragraph, { text });
+    setRevision((value) => value + 1);
+  }
+  function applyRuby() {
+    if (!(editor && paragraph && rubyText.trim())) return;
+    const len = [...text].length;
+    const start = Math.max(0, Math.min(rubyStart, len));
+    const end = Math.max(start + 1, Math.min(rubyEnd, len));
+    const newRuby = {
+      kind: "ruby",
+      startIndex: start,
+      endIndex: end,
+      rubyText: rubyText.trim(),
+      type: end - start === 1 ? "mono" : "group"
+    };
+    const nextInline = [
+      ...paragraph.inlineAnnotations.filter(
+        (ann) => ann.endIndex <= start || ann.startIndex >= end
+      ),
+      newRuby
+    ].sort((a, b) => a.startIndex - b.startIndex);
+    editor.updateParagraph(selection.chapter, selection.paragraph, {
+      text,
+      inlineAnnotations: nextInline
+    });
+    setRubyText("");
+    setRevision((value) => value + 1);
+  }
+  async function addImage(file) {
+    if (!(editor && chapter)) return;
+    editor.addImage(selection.chapter, {
+      filename: file.name,
+      mediaType: file.type || "application/octet-stream",
+      data: await file.arrayBuffer(),
+      alt: file.name,
+      afterBlockId: paragraphBlockId(chapter, selection.paragraph)
+    });
+    setRevision((value) => value + 1);
+  }
+  async function exportEpub() {
+    if (!editor) return;
+    if (exportPolicy?.watermark) applyWatermark(editor, exportPolicy.watermark);
+    let buffer = await editor.export(assetResolver ? { assetResolver } : void 0);
+    if (exportPolicy?.encrypt) buffer = await exportPolicy.encrypt(buffer);
+    const decision = await onBeforeExport?.(buffer);
+    onExport?.(buffer);
+    if (decision === false) return;
+    if (exportPolicy?.allowDownload === false) return;
+    const url = URL.createObjectURL(new Blob([buffer], { type: "application/epub+zip" }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${editor.title || "edited"}.epub`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "mejiro-editor", children: [
+    /* @__PURE__ */ jsxs11("main", { className: "mejiro-editor-preview", children: [
+      previewBook ? /* @__PURE__ */ jsx13(
+        MejiroReader,
+        {
+          epub: previewBook,
+          fonts,
+          subtitle: messages.editorPreviewSubtitle,
+          chapterNavMode: "panel",
+          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__ */ 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 })
+      ] }),
+      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(
+              "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) })
+                ]
+              },
+              `${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(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: text,
+              onChange: (event) => setText(event.target.value),
+              onSelect: captureRubyRange
+            }
+          ),
+          /* @__PURE__ */ jsx13("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, {
+            start: rubyStart,
+            end: rubyEnd,
+            count: Math.max(0, rubyEnd - rubyStart)
+          }) }),
+          /* @__PURE__ */ jsx13(
+            "input",
+            {
+              value: rubyText,
+              placeholder: messages.editorRubyPlaceholder,
+              onChange: (event) => setRubyText(event.target.value)
+            }
+          ),
+          /* @__PURE__ */ jsx13("button", { type: "button", className: "mejiro-editor-primary", 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(
+            "input",
+            {
+              ref: imageInputRef,
+              type: "file",
+              accept: "image/*",
+              hidden: true,
+              onChange: (event) => {
+                const file = event.target.files?.[0];
+                if (file) void addImage(file);
+              }
+            }
+          )
+        ] }),
+        enableExport && /* @__PURE__ */ jsx13(
+          "button",
+          {
+            type: "button",
+            className: "mejiro-editor-export",
+            onClick: () => void exportEpub(),
+            children: messages.editorExportEpub
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function paragraphBlockId(chapter, paragraphIndex) {
+  let current = 0;
+  for (const block of chapter.blocks) {
+    if (block.kind !== "paragraph") continue;
+    if (current === paragraphIndex) return block.id;
+    current++;
+  }
+  return void 0;
+}
+
+// src/MejiroManuscriptEditor.tsx
+import { EpubProject } from "@libraz/mejiro/epub";
+import { useCallback as useCallback9, useEffect as useEffect9, useRef as useRef12, useState as useState10 } from "react";
+
+// src/useManuscriptDraft.ts
+import { useCallback as useCallback8, useEffect as useEffect8, useRef as useRef11, useState as useState9 } from "react";
+var DEFAULT_DELAY = 800;
+function defaultChapter(index) {
+  return { id: `chapter-${Date.now()}-${index}`, title: `\u7B2C${index + 1}\u8A71`, body: "" };
+}
+function useManuscriptDraft(options = {}) {
+  const { onAutosave, autosaveDelay = DEFAULT_DELAY } = options;
+  const [chapters, setChaptersState] = useState9(
+    () => options.initialChapters?.length ? options.initialChapters : [defaultChapter(0)]
+  );
+  const [selected, setSelectedState] = useState9(0);
+  const saveRef = useRef11(onAutosave);
+  saveRef.current = onAutosave;
+  const didMountRef = useRef11(false);
+  useEffect8(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return void 0;
+    }
+    const callback = saveRef.current;
+    if (!callback) return void 0;
+    const timer = setTimeout(() => {
+      void callback(chapters);
+    }, autosaveDelay);
+    return () => clearTimeout(timer);
+  }, [chapters, autosaveDelay]);
+  const setSelected = useCallback8(
+    (index) => {
+      setSelectedState(() => Math.max(0, Math.min(index, chapters.length - 1)));
+    },
+    [chapters.length]
+  );
+  const setChapters = useCallback8(
+    (next) => {
+      const normalized = next.length ? next : [defaultChapter(0)];
+      setChaptersState(normalized);
+      setSelectedState((current) => {
+        const selectedId = chapters[current]?.id;
+        const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
+        return nextIndex >= 0 ? nextIndex : Math.max(0, Math.min(current, normalized.length - 1));
+      });
+    },
+    [chapters]
+  );
+  const patchChapter = useCallback8((index, patch) => {
+    setChaptersState(
+      (current) => current.map((chapter, i) => i === index ? { ...chapter, ...patch } : chapter)
+    );
+  }, []);
+  const addChapter = useCallback8((chapter = {}) => {
+    setChaptersState((current) => {
+      const generated = defaultChapter(current.length);
+      const next = [
+        ...current,
+        {
+          id: chapter.id ?? generated.id,
+          title: chapter.title ?? generated.title,
+          body: chapter.body ?? generated.body
+        }
+      ];
+      setSelectedState(next.length - 1);
+      return next;
+    });
+  }, []);
+  const removeChapter = useCallback8((index) => {
+    setChaptersState((current) => {
+      if (current.length <= 1) return current;
+      const next = current.filter((_, i) => i !== index);
+      setSelectedState((prev) => {
+        if (prev === index) return Math.max(0, Math.min(index, next.length - 1));
+        if (index < prev) return prev - 1;
+        return Math.max(0, Math.min(prev, next.length - 1));
+      });
+      return next;
+    });
+  }, []);
+  const reorderChapters = useCallback8((from, to) => {
+    setChaptersState((current) => {
+      if (from < 0 || from >= current.length) return current;
+      const next = [...current];
+      const [moved] = next.splice(from, 1);
+      const target = Math.max(0, Math.min(next.length, to));
+      next.splice(target, 0, moved);
+      setSelectedState((prev) => {
+        if (prev === from) return target;
+        if (from < prev && target >= prev) return prev - 1;
+        if (from > prev && target <= prev) return prev + 1;
+        return prev;
+      });
+      return next;
+    });
+  }, []);
+  return {
+    chapters,
+    selected,
+    setSelected,
+    setChapters,
+    patchChapter,
+    addChapter,
+    removeChapter,
+    reorderChapters
+  };
+}
+
+// src/MejiroManuscriptEditor.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function downloadEpub(buffer, title) {
+  const url = URL.createObjectURL(new Blob([buffer], { type: "application/epub+zip" }));
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${title || "book"}.epub`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function coverExtension(mediaType) {
+  switch (mediaType) {
+    case "image/gif":
+      return ".gif";
+    case "image/jpeg":
+      return ".jpg";
+    case "image/png":
+      return ".png";
+    case "image/svg+xml":
+      return ".svg";
+    case "image/webp":
+      return ".webp";
+    default:
+      return ".bin";
+  }
+}
+function coverAssetHref(file) {
+  const filename = file.name.replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+  return `OPS/Images/${filename && !/^\.+$/u.test(filename) ? filename : `cover${coverExtension(file.type)}`}`;
+}
+function defaultChapter2(messages) {
+  return {
+    id: `chapter-${Date.now()}-0`,
+    title: format(messages.manuscriptDefaultChapterTitle, { n: 1 }),
+    body: messages.manuscriptDefaultBody
+  };
+}
+function MejiroManuscriptEditor({
+  fonts,
+  title: titleProp,
+  onTitleChange,
+  author: authorProp,
+  onAuthorChange,
+  cover: coverProp,
+  onCoverChange,
+  chapters: initialChapters,
+  onAutosave,
+  autosaveDelay,
+  previewProps,
+  assetResolver,
+  onExport
+}) {
+  const messages = useI18n();
+  const coverInputRef = useRef12(null);
+  const bodyTextareaRef = useRef12(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 title = titleControlled ? titleProp ?? "" : titleState;
+  const author = authorControlled ? authorProp ?? "" : authorState;
+  const cover = coverControlled ? coverProp ?? null : coverState;
+  useEffect9(() => {
+    if (!titleControlled && titleProp !== void 0) setTitleState(titleProp);
+  }, [titleControlled, titleProp]);
+  useEffect9(() => {
+    if (!authorControlled && authorProp !== void 0) setAuthorState(authorProp);
+  }, [authorControlled, authorProp]);
+  useEffect9(() => {
+    if (!coverControlled && coverProp !== void 0) setCoverState(coverProp);
+  }, [coverControlled, coverProp]);
+  const setTitle = useCallback9(
+    (next) => {
+      if (!titleControlled) setTitleState(next);
+      onTitleChange?.(next);
+    },
+    [titleControlled, onTitleChange]
+  );
+  const setAuthor = useCallback9(
+    (next) => {
+      if (!authorControlled) setAuthorState(next);
+      onAuthorChange?.(next);
+    },
+    [authorControlled, onAuthorChange]
+  );
+  const setCover = useCallback9(
+    (next) => {
+      if (!coverControlled) setCoverState(next);
+      onCoverChange?.(next);
+    },
+    [coverControlled, onCoverChange]
+  );
+  const draft = useManuscriptDraft({
+    initialChapters: initialChapters?.length ? initialChapters : [defaultChapter2(messages)],
+    onAutosave,
+    autosaveDelay
+  });
+  const {
+    chapters,
+    selected,
+    setSelected,
+    patchChapter,
+    addChapter,
+    removeChapter,
+    reorderChapters
+  } = draft;
+  const current = chapters[selected] ?? chapters[0];
+  const [draggingIndex, setDraggingIndex] = useState10(null);
+  function wrapSelection(open, close) {
+    const el = bodyTextareaRef.current;
+    if (!el) return;
+    const start = el.selectionStart ?? el.value.length;
+    const end = el.selectionEnd ?? start;
+    const before = el.value.slice(0, start);
+    const middle = el.value.slice(start, end);
+    const after = el.value.slice(end);
+    const next = `${before}${open}${middle}${close}${after}`;
+    patchChapter(selected, { body: next });
+    requestAnimationFrame(() => {
+      if (!bodyTextareaRef.current) return;
+      const caret = start + open.length + middle.length;
+      bodyTextareaRef.current.focus();
+      bodyTextareaRef.current.setSelectionRange(start + open.length, caret);
+    });
+  }
+  const exportEpub = useCallback9(async () => {
+    const project = EpubProject.fromManuscript({
+      metadata: { title, author: author || void 0 },
+      chapters: chapters.map((chapter) => ({
+        id: chapter.id,
+        title: chapter.title || messages.untitled,
+        body: chapter.body
+      }))
+    });
+    if (cover) {
+      project.setCover({
+        href: coverAssetHref(cover),
+        mediaType: cover.type || void 0,
+        data: await cover.arrayBuffer()
+      });
+    }
+    const buffer = await project.export(assetResolver ? { assetResolver } : void 0);
+    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(
+      MejiroReader,
+      {
+        subtitle: messages.manuscriptPreviewSubtitle,
+        chapterNavMode: "panel",
+        enableSurfaceTap: false,
+        ...previewProps,
+        manuscript: chapters.map((chapter) => ({
+          id: chapter.id,
+          title: chapter.title || messages.untitled,
+          body: chapter.body
+        })),
+        fonts,
+        chapter: selected,
+        onChapterChange: setSelected,
+        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__ */ 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(
+          "input",
+          {
+            ref: coverInputRef,
+            type: "file",
+            accept: "image/*",
+            hidden: true,
+            onChange: (event) => setCover(event.target.files?.[0] ?? null)
+          }
+        )
+      ] }),
+      /* @__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(
+          "button",
+          {
+            type: "button",
+            className: selected === index ? "is-active" : "",
+            draggable: true,
+            "aria-label": format(messages.manuscriptReorderHandle, {
+              title: chapter.title || messages.untitled
+            }),
+            onClick: () => setSelected(index),
+            onDragStart: (event) => {
+              setDraggingIndex(index);
+              event.dataTransfer.effectAllowed = "move";
+            },
+            onDragEnd: () => setDraggingIndex(null),
+            onDragOver: (event) => {
+              if (draggingIndex === null || draggingIndex === index) return;
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+            },
+            onDrop: (event) => {
+              event.preventDefault();
+              if (draggingIndex !== null && draggingIndex !== index) {
+                reorderChapters(draggingIndex, index);
+              }
+              setDraggingIndex(null);
+            },
+            "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 })
+            ]
+          },
+          chapter.id
+        )) }),
+        /* @__PURE__ */ jsxs12("div", { className: "mejiro-editor-grid", children: [
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              type: "button",
+              onClick: () => addChapter({
+                title: format(messages.manuscriptDefaultChapterTitle, {
+                  n: chapters.length + 1
+                })
+              }),
+              children: messages.manuscriptAddChapter
+            }
+          ),
+          /* @__PURE__ */ jsx14("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(
+          "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__ */ jsx14(
+          "textarea",
+          {
+            ref: bodyTextareaRef,
+            className: "mejiro-editor-manuscript",
+            value: current.body,
+            onChange: (event) => patchChapter(selected, { body: event.target.value })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx14("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";
+function MejiroShelf({
+  volumes,
+  currentId,
+  onSelect,
+  title
+}) {
+  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(
+      "button",
+      {
+        type: "button",
+        className: `mejiro-shelf-card${v.id === currentId ? " is-active" : ""}`,
+        onClick: () => onSelect?.(v),
+        children: [
+          v.cover ? /* @__PURE__ */ jsx16(
+            "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 })
+          ] })
+        ]
+      }
+    ) }, v.id)) })
+  ] });
+}
+
+// src/MejiroToc.tsx
+import { useMemo as useMemo6, useState as useState11 } from "react";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+function buildEntries(epub, messages) {
+  return epub.chapters.map((ch, i) => {
+    const title = ch.title ?? format(messages.chapterN, { n: i + 1 });
+    const headings = ch.paragraphs.filter((p) => p.headingLevel && p.text.trim() && p.text.trim() !== title).map((p) => p.text.trim());
+    return { index: i, title, headings };
+  });
+}
+function MejiroToc({
+  epub,
+  currentAnchor,
+  searchable = false,
+  title,
+  searchPlaceholder,
+  onSelect
+}) {
+  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(() => {
+    if (!query) return entries;
+    const needle = query.toLowerCase();
+    return entries.filter(
+      (e) => e.title.toLowerCase().includes(needle) || e.headings.some((h) => h.toLowerCase().includes(needle))
+    );
+  }, [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 })
+    ] }),
+    searchable && /* @__PURE__ */ jsx17("div", { className: "mejiro-toc-search", children: /* @__PURE__ */ jsx17(
+      "input",
+      {
+        type: "search",
+        value: query,
+        placeholder: resolvedSearchPlaceholder,
+        onChange: (e) => setQuery(e.target.value),
+        "aria-label": resolvedSearchPlaceholder
+      }
+    ) }),
+    /* @__PURE__ */ jsx17("ol", { className: "mejiro-toc-list", children: filtered.map((entry) => /* @__PURE__ */ jsxs15("li", { className: "mejiro-toc-item", children: [
+      /* @__PURE__ */ jsxs15(
+        "button",
+        {
+          type: "button",
+          className: `mejiro-toc-link${entry.index === activeIndex ? " is-active" : ""}`,
+          "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 })
+          ]
+        }
+      ),
+      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.index)) }),
+    filtered.length === 0 && /* @__PURE__ */ jsx17("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;
+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(() => {
+    if (!storage) return [];
+    try {
+      return sort(parse(storage.getItem(key)));
+    } catch {
+      return [];
+    }
+  });
+  useEffect10(() => {
+    if (!storage) {
+      setAnnotations([]);
+      return;
+    }
+    try {
+      setAnnotations(sort(parse(storage.getItem(key))));
+    } catch {
+      setAnnotations([]);
+    }
+  }, [storage, key]);
+  const timerRef = useRef14(null);
+  useEffect10(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const onChangeRef = useRef14(options.onChange);
+  onChangeRef.current = options.onChange;
+  const commit = useCallback10(
+    (next) => {
+      if (storage) {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          try {
+            storage.setItem(key, serialize(next));
+          } catch {
+          }
+        }, throttleMs);
+      }
+      onChangeRef.current?.(next);
+    },
+    [storage, key, throttleMs]
+  );
+  const add = useCallback10(
+    (input) => {
+      const annotation = {
+        ...input,
+        id: input.id ?? makeId(),
+        createdAt: input.createdAt ?? Date.now()
+      };
+      setAnnotations((current) => {
+        const next = sort([...current, annotation]);
+        commit(next);
+        return next;
+      });
+      return annotation;
+    },
+    [commit]
+  );
+  const remove = useCallback10(
+    (id) => {
+      setAnnotations((current) => {
+        const next = current.filter((annotation) => annotation.id !== id);
+        if (next.length !== current.length) commit(next);
+        return next;
+      });
+    },
+    [commit]
+  );
+  const update = useCallback10(
+    (id, patch) => {
+      setAnnotations((current) => {
+        let changed = false;
+        const next = current.map((annotation) => {
+          if (annotation.id !== id) return annotation;
+          changed = true;
+          return { ...annotation, ...patch, id };
+        });
+        if (!changed) return current;
+        const sorted = sort(next);
+        commit(sorted);
+        return sorted;
+      });
+    },
+    [commit]
+  );
+  const clear = useCallback10(() => {
+    setAnnotations([]);
+    if (storage) {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      try {
+        storage.removeItem(key);
+      } catch {
+      }
+    }
+    onChangeRef.current?.([]);
+  }, [storage, key]);
+  return { annotations, add, remove, update, clear };
+}
+
+// src/useEditableEpub.ts
+import {
+  EditableEpub as EditableEpub2
+} from "@libraz/mejiro/epub";
+import { useCallback as useCallback11, useEffect as useEffect11, useRef as useRef15, useState as useState13 } 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({
+    chapter: 0,
+    paragraph: 0
+  });
+  const requestIdRef = useRef15(0);
+  const onLoadRef = useRef15(options.onLoad);
+  const onErrorRef = useRef15(options.onError);
+  const onExportRef = useRef15(options.onExport);
+  onLoadRef.current = options.onLoad;
+  onErrorRef.current = options.onError;
+  onExportRef.current = options.onExport;
+  const loadBufferWithRequest = useCallback11(
+    async (buffer, requestId) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const next = await EditableEpub2.load(buffer);
+        if (requestId !== requestIdRef.current) return null;
+        setEditor(next);
+        setSelectionState({ chapter: 0, paragraph: 0 });
+        setRevision((value) => value + 1);
+        onLoadRef.current?.(next);
+        return next;
+      } catch (err) {
+        if (requestId === requestIdRef.current) {
+          const nextError = err instanceof Error ? err : new Error(String(err));
+          setError(nextError);
+          onErrorRef.current?.(nextError);
+        }
+        return null;
+      } finally {
+        if (requestId === requestIdRef.current) setLoading(false);
+      }
+    },
+    []
+  );
+  const loadBuffer = useCallback11(
+    async (buffer) => {
+      const requestId = ++requestIdRef.current;
+      return loadBufferWithRequest(buffer, requestId);
+    },
+    [loadBufferWithRequest]
+  );
+  const loadFile = useCallback11(
+    async (file) => {
+      const requestId = ++requestIdRef.current;
+      setLoading(true);
+      setError(null);
+      try {
+        return await loadBufferWithRequest(await file.arrayBuffer(), requestId);
+      } catch (err) {
+        if (requestId === requestIdRef.current) {
+          const nextError = err instanceof Error ? err : new Error(String(err));
+          setError(nextError);
+          onErrorRef.current?.(nextError);
+          setLoading(false);
+        }
+        return null;
+      }
+    },
+    [loadBufferWithRequest]
+  );
+  const loadUrl = useCallback11(
+    async (url) => {
+      const requestId = ++requestIdRef.current;
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`Failed to load EPUB: ${res.status}`);
+        return await loadBufferWithRequest(await res.arrayBuffer(), requestId);
+      } catch (err) {
+        if (requestId === requestIdRef.current) {
+          const nextError = err instanceof Error ? err : new Error(String(err));
+          setError(nextError);
+          onErrorRef.current?.(nextError);
+          setLoading(false);
+        }
+        return null;
+      }
+    },
+    [loadBufferWithRequest]
+  );
+  useEffect11(() => {
+    if (options.defaultUrl) void loadUrl(options.defaultUrl);
+  }, [options.defaultUrl, loadUrl]);
+  const book = editor?.book ?? null;
+  const selectedParagraph = book?.chapters[selection.chapter]?.paragraphs[selection.paragraph] ?? null;
+  const previewBook = book ? cloneBook2(book) : null;
+  const history = editor?.history ?? null;
+  const setSelection = useCallback11(
+    (nextSelection) => {
+      setSelectionState(clampSelection(book, nextSelection));
+    },
+    [book]
+  );
+  const updateParagraph = useCallback11(
+    (text, inlineAnnotations) => {
+      if (!editor) return;
+      editor.updateParagraph(selection.chapter, selection.paragraph, {
+        text,
+        inlineAnnotations
+      });
+      setRevision((value) => value + 1);
+    },
+    [editor, selection.chapter, selection.paragraph]
+  );
+  const setInlineAnnotations = useCallback11(
+    (inlineAnnotations) => {
+      if (!editor) return;
+      editor.setInlineAnnotations(selection.chapter, selection.paragraph, inlineAnnotations);
+      setRevision((value) => value + 1);
+    },
+    [editor, selection.chapter, selection.paragraph]
+  );
+  const addImage = useCallback11(
+    (image) => {
+      if (!editor) return;
+      editor.addImage(selection.chapter, image);
+      setRevision((value) => value + 1);
+    },
+    [editor, selection.chapter]
+  );
+  const undo = useCallback11(() => {
+    if (!editor) return false;
+    const changed = editor.undo();
+    if (changed) setRevision((value) => value + 1);
+    return changed;
+  }, [editor]);
+  const redo = useCallback11(() => {
+    if (!editor) return false;
+    const changed = editor.redo();
+    if (changed) setRevision((value) => value + 1);
+    return changed;
+  }, [editor]);
+  const exportEpub = useCallback11(
+    async (options2) => {
+      if (!editor) return null;
+      setExporting(true);
+      try {
+        const buffer = await editor.export(options2);
+        onExportRef.current?.(buffer);
+        return buffer;
+      } finally {
+        setExporting(false);
+      }
+    },
+    [editor]
+  );
+  return {
+    editor,
+    book,
+    previewBook,
+    loading,
+    exporting,
+    error,
+    revision,
+    history,
+    selection,
+    selectedParagraph,
+    setSelection,
+    loadBuffer,
+    loadFile,
+    loadUrl,
+    updateParagraph,
+    setInlineAnnotations,
+    addImage,
+    undo,
+    redo,
+    exportEpub
+  };
+}
+function cloneBook2(book) {
+  return {
+    ...book,
+    chapters: book.chapters.map((chapter) => ({
+      ...chapter,
+      blocks: chapter.blocks.map(
+        (block) => block.kind === "paragraph" ? { ...block, inlineAnnotations: [...block.inlineAnnotations] } : { ...block }
+      ),
+      imageAssets: new Map(chapter.imageAssets),
+      originalImageHrefs: chapter.originalImageHrefs ? [...chapter.originalImageHrefs] : void 0,
+      paragraphs: chapter.paragraphs.map((paragraph) => ({
+        ...paragraph,
+        inlineAnnotations: [...paragraph.inlineAnnotations]
+      })),
+      paragraphRefs: chapter.paragraphRefs ? [...chapter.paragraphRefs] : void 0
+    })),
+    packageData: {
+      ...book.packageData,
+      files: new Map(book.packageData.files)
+    }
+  };
+}
+function clampSelection(book, selection) {
+  if (!book?.chapters.length) return { chapter: 0, paragraph: 0 };
+  const chapter = clampInteger(selection.chapter, 0, book.chapters.length - 1);
+  const paragraphCount = book.chapters[chapter]?.paragraphs.length ?? 0;
+  const paragraph = paragraphCount ? clampInteger(selection.paragraph, 0, paragraphCount - 1) : 0;
+  return { chapter, paragraph };
+}
+function clampInteger(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, Math.trunc(value)));
+}
+
+// src/useEpubProject.ts
+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";
+function useEpubProject(options = {}) {
+  const [metadata, setMetadataState] = useState14({
+    title: "\u65B0\u3057\u3044\u4F5C\u54C1",
+    language: "ja",
+    ...options.metadata
+  });
+  const [chapters, setChaptersState] = useState14(
+    options.chapters?.length ? options.chapters : [defaultChapter3(0)]
+  );
+  const [selectedChapter, setSelectedChapterState] = useState14(0);
+  const [previewBook, setPreviewBook] = useState14(null);
+  const [previewError, setPreviewError] = useState14(null);
+  const [previewing, setPreviewing] = useState14(false);
+  const previewRequestIdRef = useRef16(0);
+  const onPreviewRef = useRef16(options.onPreview);
+  const onExportRef = useRef16(options.onExport);
+  onPreviewRef.current = options.onPreview;
+  onExportRef.current = options.onExport;
+  const buildProject = useCallback12(
+    () => EpubProject2.fromManuscript({
+      metadata,
+      includeTitlePage: false,
+      includeTitleInFirstChapter: true,
+      chapters: chapters.map((chapter) => ({
+        id: chapter.id,
+        title: chapter.title || "Untitled",
+        body: chapter.body
+      }))
+    }),
+    [chapters, metadata]
+  );
+  const assetResolverRef = useRef16(options.assetResolver);
+  assetResolverRef.current = options.assetResolver;
+  useEffect12(() => {
+    const requestId = ++previewRequestIdRef.current;
+    let cancelled = false;
+    setPreviewing(true);
+    const timer = setTimeout(() => {
+      void (async () => {
+        try {
+          const resolver = assetResolverRef.current;
+          const book = await parseEpub2(
+            await buildProject().export(resolver ? { assetResolver: resolver } : void 0)
+          );
+          if (cancelled || requestId !== previewRequestIdRef.current) return;
+          setPreviewBook(book);
+          setPreviewError(null);
+          onPreviewRef.current?.(book);
+        } catch (err) {
+          if (!cancelled && requestId === previewRequestIdRef.current) {
+            setPreviewError(err instanceof Error ? err : new Error(String(err)));
+          }
+        } finally {
+          if (!cancelled && requestId === previewRequestIdRef.current) setPreviewing(false);
+        }
+      })();
+    }, options.debounceMs ?? 250);
+    return () => {
+      cancelled = true;
+      previewRequestIdRef.current++;
+      clearTimeout(timer);
+    };
+  }, [buildProject, options.debounceMs]);
+  const currentChapter = chapters[selectedChapter] ?? chapters[0] ?? null;
+  const setMetadata = useCallback12((patch) => {
+    setMetadataState((current) => ({ ...current, ...patch }));
+  }, []);
+  const setChapters = useCallback12(
+    (next) => {
+      const normalized = next.length ? next : [defaultChapter3(0)];
+      setChaptersState(normalized);
+      setSelectedChapterState((current) => {
+        const selectedId = chapters[current]?.id;
+        const nextIndex = selectedId ? normalized.findIndex((chapter) => chapter.id === selectedId) : -1;
+        return nextIndex >= 0 ? nextIndex : Math.max(0, Math.min(current, normalized.length - 1));
+      });
+    },
+    [chapters]
+  );
+  const setSelectedChapter = useCallback12(
+    (index) => {
+      setSelectedChapterState(Math.max(0, Math.min(index, chapters.length - 1)));
+    },
+    [chapters.length]
+  );
+  const patchChapter = useCallback12((index, patch) => {
+    setChaptersState(
+      (current) => current.map(
+        (chapter, chapterIndex) => chapterIndex === index ? { ...chapter, ...patch } : chapter
+      )
+    );
+  }, []);
+  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 removeChapter = useCallback12(
+    (index = selectedChapter) => {
+      setChaptersState((current) => {
+        if (current.length <= 1) return current;
+        const next = current.filter((_, chapterIndex) => chapterIndex !== index);
+        setSelectedChapterState((currentSelected) => {
+          if (currentSelected === index) return Math.max(0, Math.min(index, next.length - 1));
+          if (index < currentSelected) return currentSelected - 1;
+          return Math.max(0, Math.min(currentSelected, next.length - 1));
+        });
+        return next;
+      });
+    },
+    [selectedChapter]
+  );
+  const reorderChapters = useCallback12((from, to) => {
+    setChaptersState((current) => {
+      if (from < 0 || from >= current.length) return current;
+      const next = [...current];
+      const [moved] = next.splice(from, 1);
+      const target = Math.max(0, Math.min(next.length, to));
+      next.splice(target, 0, moved);
+      setSelectedChapterState((currentSelected) => {
+        if (currentSelected === from) return target;
+        if (from < currentSelected && target >= currentSelected) return currentSelected - 1;
+        if (from > currentSelected && target <= currentSelected) return currentSelected + 1;
+        return currentSelected;
+      });
+      return next;
+    });
+  }, []);
+  const exportEpub = useCallback12(async () => {
+    const resolver = assetResolverRef.current;
+    const buffer = await buildProject().export(resolver ? { assetResolver: resolver } : void 0);
+    onExportRef.current?.(buffer);
+    return buffer;
+  }, [buildProject]);
+  return useMemo7(
+    () => ({
+      metadata,
+      chapters,
+      selectedChapter,
+      currentChapter,
+      previewBook,
+      previewError,
+      previewing,
+      setMetadata,
+      setChapters,
+      setSelectedChapter,
+      patchChapter,
+      addChapter,
+      removeChapter,
+      reorderChapters,
+      buildProject,
+      exportEpub
+    }),
+    [
+      addChapter,
+      buildProject,
+      chapters,
+      currentChapter,
+      exportEpub,
+      metadata,
+      patchChapter,
+      previewBook,
+      previewError,
+      previewing,
+      reorderChapters,
+      removeChapter,
+      selectedChapter,
+      setChapters,
+      setMetadata,
+      setSelectedChapter
+    ]
+  );
+}
+function defaultChapter3(index) {
+  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" : ""
+  };
+}
+
+// src/useImageOverlay.ts
+import { moveImageOverlayRect as moveImageOverlayRect2, resizeImageOverlayRect as resizeImageOverlayRect2 } from "@libraz/mejiro";
+import {
+  useCallback as useCallback13,
+  useEffect as useEffect13,
+  useRef as useRef17,
+  useState as useState15
+} from "react";
 function useImageOverlay(layout, spreadIdx, onUpdate, options) {
   const defW = options?.defaultWidth ?? 120;
   const defH = options?.defaultHeight ?? 160;
   const defX = options?.defaultX ?? 80;
   const defY = options?.defaultY ?? 100;
   const margin = options?.margin;
-  const [imageRect, setImageRect] = useState(null);
-  const rectRef = useRef(imageRect);
+  const [imageRect, setImageRect] = useState15(null);
+  const rectRef = useRef17(imageRect);
   rectRef.current = imageRect;
-  const layoutRef = useRef(layout);
+  const layoutRef = useRef17(layout);
   layoutRef.current = layout;
-  const spreadRef = useRef(spreadIdx);
+  const spreadRef = useRef17(spreadIdx);
   spreadRef.current = spreadIdx;
-  const onUpdateRef = useRef(onUpdate);
+  const onUpdateRef = useRef17(onUpdate);
   onUpdateRef.current = onUpdate;
-  const syncToLayout = useCallback(
+  const activeDragCleanupsRef = useRef17(/* @__PURE__ */ new Set());
+  useEffect13(
+    () => () => {
+      for (const cleanup of activeDragCleanupsRef.current) cleanup();
+      activeDragCleanupsRef.current.clear();
+    },
+    []
+  );
+  const syncToLayout = useCallback13(
     (rect) => {
       const lo = layoutRef.current;
       if (!lo) return;
@@ -107,7 +3624,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     },
     [margin]
   );
-  const toggleImage = useCallback(() => {
+  const toggleImage = useCallback13(() => {
     if (rectRef.current) {
       setImageRect(null);
       syncToLayout(null);
@@ -117,7 +3634,7 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
       syncToLayout(r);
     }
   }, [defX, defY, defW, defH, syncToLayout]);
-  const onOverlayPointerDown = useCallback(
+  const onOverlayPointerDown = useCallback13(
     (e) => {
       e.preventDefault();
       const current = rectRef.current;
@@ -132,24 +3649,29 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
       const onMove = (me) => {
         const dx = me.clientX - startX;
         const dy = me.clientY - startY;
-        const r = moveImageOverlayRect(start, dx, dy);
+        const r = moveImageOverlayRect2(start, dx, dy);
         cancelAnimationFrame(rafId);
         rafId = requestAnimationFrame(() => {
           setImageRect(r);
           syncToLayout(r);
         });
       };
-      const onUp = () => {
+      let cleanup;
+      const onUp = () => cleanup();
+      cleanup = () => {
+        cancelAnimationFrame(rafId);
         target.classList.remove("dragging");
         document.removeEventListener("pointermove", onMove);
         document.removeEventListener("pointerup", onUp);
+        activeDragCleanupsRef.current.delete(cleanup);
       };
       document.addEventListener("pointermove", onMove);
       document.addEventListener("pointerup", onUp);
+      activeDragCleanupsRef.current.add(cleanup);
     },
     [syncToLayout]
   );
-  const onResizePointerDown = useCallback(
+  const onResizePointerDown = useCallback13(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -165,20 +3687,25 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
       const onMove = (me) => {
         const dx = me.clientX - startX;
         const dy = me.clientY - startY;
-        const r = resizeImageOverlayRect(start, dx, dy);
+        const r = resizeImageOverlayRect2(start, dx, dy);
         cancelAnimationFrame(rafId);
         rafId = requestAnimationFrame(() => {
           setImageRect(r);
           syncToLayout(r);
         });
       };
-      const onUp = () => {
+      let cleanup;
+      const onUp = () => cleanup();
+      cleanup = () => {
+        cancelAnimationFrame(rafId);
         target.parentElement?.classList.remove("dragging");
         document.removeEventListener("pointermove", onMove);
         document.removeEventListener("pointerup", onUp);
+        activeDragCleanupsRef.current.delete(cleanup);
       };
       document.addEventListener("pointermove", onMove);
       document.addEventListener("pointerup", onUp);
+      activeDragCleanupsRef.current.add(cleanup);
     },
     [syncToLayout]
   );
@@ -190,8 +3717,298 @@ function useImageOverlay(layout, spreadIdx, onUpdate, options) {
     onResizePointerDown
   };
 }
+
+// src/useLibrary.ts
+import { useCallback as useCallback14, useEffect as useEffect14, useMemo as useMemo8, useState as useState16 } 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(
+    volumes.length > 0 ? volumes[initialIndex]?.id ?? volumes[0]?.id ?? null : null
+  );
+  useEffect14(() => {
+    if (volumes.length === 0) {
+      if (currentId !== null) setCurrentId(null);
+      return;
+    }
+    if (currentId != null && volumes.some((v) => v.id === currentId)) return;
+    const fallback = volumes[0] ?? null;
+    setCurrentId(fallback?.id ?? null);
+    if (fallback) onChange?.(fallback);
+  }, [currentId, volumes, onChange]);
+  const index = useMemo8(() => {
+    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(
+    () => index >= 0 && index < volumes.length ? volumes[index] : null,
+    [index, volumes]
+  );
+  const fire = useCallback14(
+    (i) => {
+      const v = volumes[i];
+      if (v) onChange?.(v);
+    },
+    [volumes, onChange]
+  );
+  const next = useCallback14(() => {
+    if (index < 0) return;
+    const ni = Math.min(volumes.length - 1, index + 1);
+    if (ni !== index) {
+      setCurrentId(volumes[ni]?.id ?? null);
+      fire(ni);
+    }
+  }, [index, volumes, fire]);
+  const prev = useCallback14(() => {
+    if (index < 0) return;
+    const ni = Math.max(0, index - 1);
+    if (ni !== index) {
+      setCurrentId(volumes[ni]?.id ?? null);
+      fire(ni);
+    }
+  }, [index, volumes, fire]);
+  const goTo = useCallback14(
+    (id) => {
+      const ni = volumes.findIndex((v) => v.id === id);
+      if (ni < 0) return;
+      if (ni !== index) {
+        setCurrentId(id);
+        fire(ni);
+      }
+    },
+    [index, volumes, fire]
+  );
+  return { list: volumes, current, currentIndex: index, next, prev, goTo };
+}
+
+// src/useManuscriptLayout.ts
+import { useCallback as useCallback15, useEffect as useEffect15, useLayoutEffect as useLayoutEffect5, useRef as useRef18, useState as useState17 } 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 requestIdRef = useRef18(0);
+  layoutRef.current = layout;
+  const recompute = useCallback15(async () => {
+    const requestId = ++requestIdRef.current;
+    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 layouts = await book.layoutManuscript({ chapters: [chapter], dialect });
+    if (requestId !== requestIdRef.current) return;
+    const next = layouts.values().next().value ?? null;
+    setLayout(next);
+    setElapsedMs(performance.now() - t0);
+  }, [book, chapter, dialect, surface]);
+  useLayoutEffect5(() => {
+    requestIdRef.current++;
+    setLayout(null);
+    setPageWidth(0);
+    setPageHeight(0);
+    setContentHeight(0);
+    setElapsedMs(0);
+  }, [recompute]);
+  useEffect15(() => {
+    void recompute();
+    return () => {
+      requestIdRef.current++;
+    };
+  }, [recompute]);
+  useEffect15(() => {
+    if (!enableResize) return;
+    let timer = null;
+    const onResize = () => {
+      if (!(surface.current && layoutRef.current)) return;
+      if (timer) clearTimeout(timer);
+      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
+        });
+      }, resizeDebounce);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+      if (timer) clearTimeout(timer);
+    };
+  }, [book, surface, enableResize, resizeDebounce]);
+  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;
+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(() => {
+    if (!storage) return null;
+    try {
+      return parsePosition(storage.getItem(key));
+    } catch {
+      return null;
+    }
+  });
+  useEffect16(() => {
+    if (!storage) {
+      setPosition(null);
+      return;
+    }
+    try {
+      setPosition(parsePosition(storage.getItem(key)));
+    } catch {
+      setPosition(null);
+    }
+  }, [storage, key]);
+  const timerRef = useRef19(null);
+  useEffect16(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const onChangeRef = useRef19(options.onChange);
+  onChangeRef.current = options.onChange;
+  const save = useCallback16(
+    (next) => {
+      setPosition(next);
+      if (storage) {
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          try {
+            storage.setItem(key, serializePosition(next));
+          } catch {
+          }
+        }, throttleMs);
+      }
+      onChangeRef.current?.(next);
+    },
+    [storage, key, throttleMs]
+  );
+  const clear = useCallback16(() => {
+    setPosition(null);
+    if (timerRef.current) clearTimeout(timerRef.current);
+    if (storage) {
+      try {
+        storage.removeItem(key);
+      } catch {
+      }
+    }
+    onChangeRef.current?.(null);
+  }, [storage, key]);
+  return { position, save, clear };
+}
+
+// src/index.ts
+function loadMejiroStyles() {
+  if (typeof document === "undefined") return;
+  void import("@libraz/mejiro/render/mejiro.css");
+  void import("@libraz/mejiro/render/mejiro-reader.css");
+  void import("@libraz/mejiro/render/mejiro-editor.css");
+}
+loadMejiroStyles();
 export {
+  MejiroChapterNav,
+  MejiroDropZone,
+  MejiroEditor,
+  MejiroI18nProvider,
+  MejiroImageOverlay,
+  MejiroManuscriptEditor,
+  MejiroNotationHighlighter,
   MejiroPage,
+  MejiroPageIndicator,
   MejiroPageView,
-  useImageOverlay
+  MejiroReader,
+  MejiroScrollView,
+  MejiroSelectionLayer,
+  MejiroSettingsPanel,
+  MejiroShelf,
+  MejiroSpread,
+  MejiroStats,
+  MejiroToc,
+  enMessages,
+  format,
+  jaMessages,
+  resolveMessages,
+  useAnnotations,
+  useChapterLayout,
+  useEditableEpub,
+  useEpub,
+  useEpubProject,
+  useI18n,
+  useImageOverlay,
+  useLibrary,
+  useManuscriptDraft,
+  useManuscriptLayout,
+  useMejiroBook,
+  useMultiImageOverlay,
+  useReadingPosition,
+  useSpread
 };