chore: project foundation — reader UI, modal, PDF parsing, bookmarking, voice samples

.gitattributes

@@ -0,0 +1,2 @@
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,10 @@
+.venv/
+venv/
+myenv/
+__pycache__/
+*.py[cod]
+.pytest_cache/
+.mypy_cache/
+data/reader.sqlite3
+data/novels/
+*.log

app.py

@@ -0,0 +1,27 @@
+import gradio as gr
+import uvicorn
+from fastapi import FastAPI
+from fastapi.responses import RedirectResponse
+
+from novel_reader.ui import CSS, READER_CSS, READER_JS, THEME_JS, build_dashboard_app, build_reader_app
+
+
+app = FastAPI()
+
+
+@app.get("/")
+def root():
+    return RedirectResponse("/dashboard/")
+
+
+@app.head("/")
+def root_head():
+    return RedirectResponse("/dashboard/")
+
+
+gr.mount_gradio_app(app, build_dashboard_app().queue(default_concurrency_limit=4), path="/dashboard", css=CSS, js=THEME_JS, theme=gr.themes.Base())
+gr.mount_gradio_app(app, build_reader_app().queue(default_concurrency_limit=4), path="/reader", css=READER_CSS, js=READER_JS, theme=gr.themes.Base())
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="127.0.0.1", port=8060)

novel_reader/__init__.py

@@ -0,0 +1,5 @@
+"""Novel Reader app package."""
+
+__all__ = ["__version__"]
+
+__version__ = "0.1.0"

novel_reader/config.py

@@ -0,0 +1,16 @@
+from __future__ import annotations
+
+from pathlib import Path
+
+
+BASE_DIR = Path(__file__).resolve().parent.parent
+DATA_DIR = BASE_DIR / "data"
+NOVELS_DIR = DATA_DIR / "novels"
+DATABASE_PATH = DATA_DIR / "reader.sqlite3"
+
+SUPPORTED_FORMATS = {".txt", ".epub", ".pdf"}
+
+
+def ensure_app_dirs() -> None:
+    DATA_DIR.mkdir(exist_ok=True)
+    NOVELS_DIR.mkdir(exist_ok=True)

novel_reader/ingestion.py

@@ -0,0 +1,52 @@
+from __future__ import annotations
+
+import threading
+from pathlib import Path
+
+from .config import SUPPORTED_FORMATS
+from .parsers import extract_cover_info, parse_book
+from .storage import LibraryStore
+
+
+class IngestionPipeline:
+    """Base ingestion pipeline; AI/RAG stages will slot in after parsing."""
+
+    def __init__(self, store: LibraryStore) -> None:
+        self.store = store
+
+    def ingest(self, upload_path: str) -> int:
+        path = Path(upload_path)
+        if path.suffix.lower() not in SUPPORTED_FORMATS:
+            raise ValueError(f"Unsupported format. Use: {', '.join(sorted(SUPPORTED_FORMATS))}")
+        novel_id = self.store.create_novel_record(path)
+        thread = threading.Thread(target=self._run_job, args=(novel_id,), daemon=True)
+        thread.start()
+        return novel_id
+
+    def _run_job(self, novel_id: int) -> None:
+        novel = self.store.get_novel(novel_id)
+        if not novel:
+            return
+        try:
+            self.store.set_status(novel_id, "running", "Parsing book text")
+            source_path = Path(novel["stored_path"])
+            parsed = parse_book(source_path)
+            self.store.save_parsed_book(novel_id, parsed)
+
+            # Extract cover image and extra metadata
+            file_size = source_path.stat().st_size if source_path.exists() else 0
+            try:
+                cover_info = extract_cover_info(source_path)
+                if cover_info.cover_b64:
+                    self.store.save_cover_image(novel_id, cover_info.cover_b64)
+                self.store.save_extra_metadata(
+                    novel_id,
+                    series=cover_info.series,
+                    genres=cover_info.genres,
+                    file_size=file_size,
+                )
+            except Exception:
+                # Non-fatal: cover extraction failures should not break ingestion
+                self.store.save_extra_metadata(novel_id, file_size=file_size)
+        except Exception as exc:
+            self.store.set_status(novel_id, "error", str(exc))

novel_reader/models.py

@@ -0,0 +1,28 @@
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+
+
+@dataclass(frozen=True)
+class ParsedSection:
+    index: int
+    title: str
+    text: str
+    source_locator: str
+    html: str = ""
+
+
+@dataclass(frozen=True)
+class ParsedBook:
+    title: str
+    author: str
+    file_format: str
+    sections: list[ParsedSection]
+
+
+@dataclass
+class BookCoverInfo:
+    """Holds the extracted cover image and extra book metadata."""
+    cover_b64: str = ""   # data-URI or empty string
+    series: str = ""
+    genres: str = ""

novel_reader/parsers.py

@@ -0,0 +1,433 @@
+from __future__ import annotations
+
+import base64
+import posixpath
+import re
+from html import unescape, escape as _escape
+from pathlib import Path
+from urllib.parse import unquote, urlsplit
+
+from bs4 import BeautifulSoup
+
+from .models import ParsedBook, ParsedSection, BookCoverInfo
+
+
+CHAPTER_RE = re.compile(
+    r"^\s*((chapter|book|part)\s+([ivxlcdm]+|\d+|one|two|three|four|five|six|seven|eight|nine|ten)\b.*|prologue\b.*|epilogue\b.*)\s*$",
+    re.IGNORECASE,
+)
+
+
+def extract_cover_info(path: Path) -> BookCoverInfo:
+    """Extract cover image (base64 data-URI) and extra metadata for a book file."""
+    suffix = path.suffix.lower()
+    if suffix == ".epub":
+        return _epub_cover_info(path)
+    if suffix == ".pdf":
+        return _pdf_cover_info(path)
+    return _txt_cover_info(path)
+
+
+def _epub_cover_info(path: Path) -> BookCoverInfo:
+    """Extract cover image + series/genres from an EPUB."""
+    try:
+        from ebooklib import ITEM_IMAGE, epub
+        book = epub.read_epub(str(path))
+
+        # --- cover image ---
+        cover_b64 = ""
+        # Try common cover identifiers
+        for item in book.get_items():
+            if item.get_type() == ITEM_IMAGE:
+                name_lower = (item.get_name() or "").lower()
+                item_id_lower = (item.id or "").lower()
+                if any(k in name_lower or k in item_id_lower for k in ("cover", "title")):
+                    mt = item.media_type or "image/jpeg"
+                    cover_b64 = f"data:{mt};base64,{base64.b64encode(item.get_content()).decode()}"
+                    break
+        # Fallback: first image item
+        if not cover_b64:
+            for item in book.get_items_of_type(ITEM_IMAGE):
+                mt = item.media_type or "image/jpeg"
+                cover_b64 = f"data:{mt};base64,{base64.b64encode(item.get_content()).decode()}"
+                break
+
+        # --- series metadata ---
+        series = ""
+        try:
+            belongs = book.get_metadata("OPF", "belongs-to-collection")
+            if belongs:
+                series = str(belongs[0][0]).strip()
+        except Exception:
+            pass
+        if not series:
+            try:
+                series_meta = book.get_metadata("DC", "relation")
+                if series_meta:
+                    series = str(series_meta[0][0]).strip()
+            except Exception:
+                pass
+
+        # --- genres/subjects ---
+        genres = ""
+        try:
+            subjects = book.get_metadata("DC", "subject")
+            if subjects:
+                genres = ", ".join(str(s[0]).strip() for s in subjects[:5])
+        except Exception:
+            pass
+
+        return BookCoverInfo(cover_b64=cover_b64, series=series, genres=genres)
+    except Exception:
+        return BookCoverInfo()
+
+
+def _pdf_cover_info(path: Path) -> BookCoverInfo:
+    """Render first PDF page as a JPEG cover thumbnail."""
+    try:
+        import fitz
+        doc = fitz.open(str(path))
+        page = doc.load_page(0)
+        # Render at 2x scale for a decent thumbnail
+        mat = fitz.Matrix(1.5, 1.5)
+        pix = page.get_pixmap(matrix=mat)
+        img_bytes = pix.tobytes("jpeg")
+        doc.close()
+        cover_b64 = f"data:image/jpeg;base64,{base64.b64encode(img_bytes).decode()}"
+        return BookCoverInfo(cover_b64=cover_b64)
+    except Exception:
+        return BookCoverInfo()
+
+
+def _txt_cover_info(path: Path) -> BookCoverInfo:
+    """Generate a styled SVG placeholder cover for text files."""
+    # We return an empty string so the UI generates a CSS-based cover
+    return BookCoverInfo()
+
+
+def parse_book(path: Path) -> ParsedBook:
+    suffix = path.suffix.lower()
+    if suffix == ".txt":
+        return parse_txt(path)
+    if suffix == ".epub":
+        return parse_epub(path)
+    if suffix == ".pdf":
+        return parse_pdf(path)
+    raise ValueError(f"Unsupported book format: {suffix}")
+
+
+def parse_txt(path: Path) -> ParsedBook:
+    raw = path.read_text(encoding="utf-8", errors="replace")
+    text = _normalize_text(raw)
+    lines = text.splitlines()
+    chapter_starts = [i for i, line in enumerate(lines) if CHAPTER_RE.match(line)]
+
+    sections: list[ParsedSection] = []
+    if chapter_starts:
+        starts = chapter_starts + [len(lines)]
+        preface = "\n".join(lines[: chapter_starts[0]]).strip()
+        if preface:
+            sections.append(ParsedSection(0, "Opening", preface, "txt:opening"))
+        for pos, start in enumerate(chapter_starts):
+            end = starts[pos + 1]
+            title = lines[start].strip() or f"Chapter {pos + 1}"
+            body = "\n".join(lines[start + 1 : end]).strip()
+            if body:
+                sections.append(ParsedSection(len(sections), title, body, f"txt:{start + 1}"))
+    else:
+        chunks = _chunk_text(text, max_chars=6500)
+        sections = [
+            ParsedSection(index=i, title=f"Section {i + 1}", text=chunk, source_locator=f"txt:section:{i + 1}")
+            for i, chunk in enumerate(chunks)
+        ]
+
+    return ParsedBook(_clean_title(path.stem), "Unknown author", "txt", sections or [_empty_section()])
+
+
+def _build_toc_map(toc_items, toc_map=None) -> dict[str, str]:
+    if toc_map is None:
+        toc_map = {}
+    for item in toc_items:
+        if isinstance(item, (list, tuple)):
+            _build_toc_map(item, toc_map)
+        else:
+            href = getattr(item, "href", "")
+            title = getattr(item, "title", "")
+            if href and title:
+                path_only = href.split("#")[0]
+                path_only = path_only.replace("\\", "/")
+                # Store full paths and basenames
+                if path_only not in toc_map:
+                    toc_map[path_only] = title.strip()
+                base = posixpath.basename(path_only)
+                if base not in toc_map:
+                    toc_map[base] = title.strip()
+    return toc_map
+
+
+def parse_epub(path: Path) -> ParsedBook:
+    from ebooklib import ITEM_DOCUMENT, ITEM_IMAGE
+    from ebooklib import epub
+
+    book = epub.read_epub(str(path))
+    title = _metadata_value(book, "title") or _clean_title(path.stem)
+    author = _metadata_value(book, "creator") or "Unknown author"
+    images = _epub_images(book, ITEM_IMAGE)
+
+    toc_map = {}
+    if book.toc:
+        _build_toc_map(book.toc, toc_map)
+
+    # Let's perform a dual-pass load. Pass 1 attempts high-precision TOC-only document inclusion.
+    # If that yields 0 sections (or very few), Pass 2 loads all spine documents to avoid content loss.
+    sections: list[ParsedSection] = []
+    
+    for pass_num in (1, 2):
+        if sections:
+            break
+        use_toc_filtering = (pass_num == 1) and (len(toc_map) > 0)
+        
+        for item in _epub_documents(book, ITEM_DOCUMENT):
+            raw_name = item.get_name() or ""
+            clean_name = raw_name.replace("\\", "/")
+            base_name = posixpath.basename(clean_name)
+            
+            # Match against TOC
+            toc_title = ""
+            if clean_name in toc_map:
+                toc_title = toc_map[clean_name]
+            elif base_name in toc_map:
+                toc_title = toc_map[base_name]
+
+            # If TOC filtering is active and this spine document isn't in TOC, skip it
+            if use_toc_filtering and not toc_title:
+                continue
+
+            soup = BeautifulSoup(item.get_content(), "html.parser")
+            for tag in soup(["script", "style", "nav"]):
+                tag.decompose()
+            body = soup.body or soup
+            html = _clean_epub_html(body, item.get_name(), images)
+
+            # Determine title: Use TOC title first if found, otherwise extract/clean
+            if toc_title:
+                section_title = toc_title
+            else:
+                # Fallback to headers
+                title_tag = soup.find(["h1", "h2", "h3", "h4", "h5", "h6"])
+                section_title = title_tag.get_text(" ", strip=True) if title_tag else ""
+                if not section_title:
+                    head_title = soup.find("title")
+                    if head_title:
+                        section_title = head_title.get_text(" ", strip=True)
+
+                if not section_title or "/" in section_title or section_title.endswith((".html", ".xhtml", ".xml", ".htm")):
+                    basename = posixpath.basename((section_title or raw_name).replace("\\", "/"))
+                    num_match = re.search(r"split_(\d+)", basename)
+                    if num_match:
+                        section_title = f"Chapter {int(num_match.group(1)) + 1}"
+                    else:
+                        num_match_generic = re.search(r"(\d+)", basename)
+                        if num_match_generic:
+                            section_title = f"Chapter {int(num_match_generic.group(1))}"
+                        else:
+                            stem = posixpath.splitext(basename)[0]
+                            stem = stem.replace("_", " ").replace("-", " ").title()
+                            section_title = stem or f"Chapter {len(sections) + 1}"
+
+            if section_title.lower() == title.lower():
+                section_title = f"Chapter {len(sections) + 1}"
+
+            text = _normalize_text(body.get_text("\n"))
+            if text or "<img" in html or "<hr" in html:
+                sections.append(
+                    ParsedSection(
+                        index=len(sections),
+                        title=section_title.strip() or f"Chapter {len(sections) + 1}",
+                        text=text or section_title or "Illustration",
+                        source_locator=f"epub:{raw_name}",
+                        html=html,
+                    )
+                )
+
+    if not sections:
+        sections = [_empty_section()]
+    return ParsedBook(unescape(title), unescape(author), "epub", sections)
+
+
+def _epub_documents(book, item_document) -> list:
+    documents = []
+    seen = set()
+    for spine_item in book.spine:
+        item_id = spine_item[0] if isinstance(spine_item, tuple) else spine_item
+        item = book.get_item_with_id(item_id)
+        if item and item.get_type() == item_document:
+            documents.append(item)
+            seen.add(item.get_name())
+    for item in book.get_items_of_type(item_document):
+        if item.get_name() not in seen:
+            documents.append(item)
+    return documents
+
+
+def _epub_images(book, item_image) -> dict[str, str]:
+    images = {}
+    for item in book.get_items_of_type(item_image):
+        media_type = item.media_type or "image/png"
+        data = base64.b64encode(item.get_content()).decode("ascii")
+        images[item.get_name()] = f"data:{media_type};base64,{data}"
+        images[posixpath.basename(item.get_name())] = images[item.get_name()]
+    return images
+
+
+def _clean_epub_html(body, document_name: str, images: dict[str, str]) -> str:
+    allowed = {
+        "a", "b", "blockquote", "br", "code", "div", "em", "h1", "h2", "h3", "h4",
+        "hr", "i", "img", "li", "ol", "p", "pre", "section", "span", "strong", "u", "ul",
+    }
+    for tag in body.find_all(True):
+        if tag.name not in allowed:
+            tag.unwrap()
+            continue
+        if tag.name == "img":
+            src = _resolve_epub_src(document_name, tag.get("src") or "", images)
+            if not src:
+                tag.decompose()
+                continue
+            tag.attrs = {"src": src, "alt": tag.get("alt", "")}
+        elif tag.name == "a":
+            tag.attrs = {}
+        else:
+            tag.attrs = {}
+    return "".join(str(child) for child in body.contents).strip()
+
+
+def _resolve_epub_src(document_name: str, src: str, images: dict[str, str]) -> str:
+    clean = unquote(urlsplit(src).path)
+    if not clean:
+        return ""
+    candidates = [
+        clean,
+        clean.lstrip("/"),
+        posixpath.normpath(posixpath.join(posixpath.dirname(document_name), clean)),
+        posixpath.basename(clean),
+    ]
+    for candidate in candidates:
+        if candidate in images:
+            return images[candidate]
+    return ""
+
+
+def parse_pdf(path: Path) -> ParsedBook:
+    import fitz
+    import base64
+
+    document = fitz.open(path)
+    sections: list[ParsedSection] = []
+    page_count = document.page_count
+    
+    for page_index in range(page_count):
+        try:
+            page = document.load_page(page_index)
+            rect = page.rect
+            w, h = rect.width, rect.height
+
+            # Render page at 150 DPI for high visual fidelity
+            pix = page.get_pixmap(dpi=150)
+            img_bytes = pix.tobytes("jpeg")
+            b64_str = base64.b64encode(img_bytes).decode("utf-8")
+            
+            # Extract plain text of the page for search/TTS
+            plain_text = page.get_text("text")
+            
+            # Extract text blocks with coordinates for interactive selection overlay
+            blocks = page.get_text("blocks")
+            text_layers = []
+            for b in blocks:
+                x0, y0, x1, y1, text, block_no, block_type = b
+                if block_type == 0:  # Text block
+                    escaped_text = _escape(text).replace("\n", "<br>")
+                    bw = x1 - x0
+                    bh = y1 - y0
+                    # Standard responsive font sizing relative to block height
+                    fs = max(7, min(36, bh * 0.85))
+                    text_layers.append(f"""
+                    <div class="pdf-text-layer" style="position:absolute; left:{x0}px; top:{y0}px; width:{bw}px; height:{bh}px; font-size:{fs}px;">
+                      {escaped_text}
+                    </div>
+                    """)
+            
+            text_overlay_html = "".join(text_layers)
+            
+            # Embed native high-fidelity rendering with a transparent interactive text selection overlay
+            html_content = f"""
+            <div class="pdf-page-container" style="position:relative; width:{w}px; height:{h}px; margin:0 auto; user-select:text;">
+              <img src="data:image/jpeg;base64,{b64_str}" class="pdf-page-img" alt="Page {page_index + 1}" style="width:100%; height:100%; display:block; pointer-events:none;" />
+              <div class="pdf-text-overlay" style="position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:auto; overflow:hidden;">
+                {text_overlay_html}
+              </div>
+            </div>
+            """
+            
+            sections.append(
+                ParsedSection(
+                    index=page_index,
+                    title=f"Page {page_index + 1}",
+                    text=plain_text,
+                    html=html_content,
+                    source_locator=f"pdf:page:{page_index + 1}",
+                )
+            )
+        except Exception as e:
+            # Fallback for errors
+            sections.append(
+                ParsedSection(
+                    index=page_index,
+                    title=f"Page {page_index + 1}",
+                    text=f"[Error rendering page {page_index + 1}: {e}]",
+                    html=f"<div class='pdf-page-error'><p>Error rendering page {page_index + 1}</p></div>",
+                    source_locator=f"pdf:page:{page_index + 1}",
+                )
+            )
+            
+    document.close()
+    return ParsedBook(_clean_title(path.stem), "Unknown author", "pdf", sections or [_empty_section()])
+
+
+def _metadata_value(book, key: str) -> str:
+    values = book.get_metadata("DC", key)
+    if not values:
+        return ""
+    return str(values[0][0]).strip()
+
+
+def _normalize_text(text: str) -> str:
+    text = text.replace("\r\n", "\n").replace("\r", "\n")
+    text = re.sub(r"[ \t]+", " ", text)
+    text = re.sub(r"\n{3,}", "\n\n", text)
+    return text.strip()
+
+
+def _chunk_text(text: str, max_chars: int) -> list[str]:
+    paragraphs = [p.strip() for p in text.split("\n\n") if p.strip()]
+    chunks: list[str] = []
+    current: list[str] = []
+    current_size = 0
+    for paragraph in paragraphs:
+        if current and current_size + len(paragraph) > max_chars:
+            chunks.append("\n\n".join(current))
+            current = []
+            current_size = 0
+        current.append(paragraph)
+        current_size += len(paragraph)
+    if current:
+        chunks.append("\n\n".join(current))
+    return chunks or [text[:max_chars]]
+
+
+def _clean_title(value: str) -> str:
+    return value.replace("_", " ").replace("-", " ").strip().title() or "Untitled"
+
+
+def _empty_section() -> ParsedSection:
+    return ParsedSection(0, "Empty Book", "No readable text was found in this file.", "empty")

novel_reader/storage.py

@@ -0,0 +1,387 @@
+from __future__ import annotations
+
+import shutil
+import sqlite3
+import uuid
+from contextlib import contextmanager
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any, Iterator
+
+from .config import DATABASE_PATH, NOVELS_DIR, ensure_app_dirs
+from .models import ParsedBook
+
+
+def utc_now() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+class LibraryStore:
+    def __init__(self, db_path: Path = DATABASE_PATH) -> None:
+        ensure_app_dirs()
+        self.db_path = db_path
+        self.init_db()
+
+    @contextmanager
+    def connect(self) -> Iterator[sqlite3.Connection]:
+        conn = sqlite3.connect(self.db_path)
+        conn.row_factory = sqlite3.Row
+        try:
+            yield conn
+            conn.commit()
+        finally:
+            conn.close()
+
+    def init_db(self) -> None:
+        with self.connect() as conn:
+            conn.executescript(
+                """
+                CREATE TABLE IF NOT EXISTS novels (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    uuid TEXT NOT NULL UNIQUE,
+                    title TEXT NOT NULL,
+                    author TEXT NOT NULL DEFAULT 'Unknown author',
+                    file_format TEXT NOT NULL,
+                    original_filename TEXT NOT NULL,
+                    stored_path TEXT NOT NULL,
+                    rag_path TEXT NOT NULL,
+                    status TEXT NOT NULL DEFAULT 'queued',
+                    status_message TEXT NOT NULL DEFAULT '',
+                    archived INTEGER NOT NULL DEFAULT 0,
+                    completed_at TEXT,
+                    created_at TEXT NOT NULL,
+                    updated_at TEXT NOT NULL
+                );
+
+                CREATE TABLE IF NOT EXISTS sections (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    novel_id INTEGER NOT NULL REFERENCES novels(id) ON DELETE CASCADE,
+                    section_index INTEGER NOT NULL,
+                    title TEXT NOT NULL,
+                    text TEXT NOT NULL,
+                    html TEXT NOT NULL DEFAULT '',
+                    source_locator TEXT NOT NULL,
+                    UNIQUE(novel_id, section_index)
+                );
+
+                CREATE TABLE IF NOT EXISTS progress (
+                    novel_id INTEGER PRIMARY KEY REFERENCES novels(id) ON DELETE CASCADE,
+                    section_index INTEGER NOT NULL DEFAULT 0,
+                    scroll_hint REAL NOT NULL DEFAULT 0,
+                    updated_at TEXT NOT NULL
+                );
+
+                CREATE TABLE IF NOT EXISTS bookmarks (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    novel_id INTEGER NOT NULL REFERENCES novels(id) ON DELETE CASCADE,
+                    section_index INTEGER NOT NULL,
+                    label TEXT NOT NULL,
+                    note TEXT NOT NULL DEFAULT '',
+                    created_at TEXT NOT NULL
+                );
+
+                CREATE TABLE IF NOT EXISTS highlights (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    novel_id INTEGER NOT NULL REFERENCES novels(id) ON DELETE CASCADE,
+                    section_index INTEGER NOT NULL,
+                    quote TEXT NOT NULL,
+                    note TEXT NOT NULL DEFAULT '',
+                    color TEXT NOT NULL DEFAULT 'gold',
+                    created_at TEXT NOT NULL
+                );
+
+                CREATE TABLE IF NOT EXISTS dictionary_lookups (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    novel_id INTEGER REFERENCES novels(id) ON DELETE SET NULL,
+                    section_index INTEGER NOT NULL DEFAULT 0,
+                    query TEXT NOT NULL,
+                    search_url TEXT NOT NULL,
+                    created_at TEXT NOT NULL
+                );
+
+                """
+            )
+            columns = {row["name"] for row in conn.execute("PRAGMA table_info(sections)")}
+            if "html" not in columns:
+                conn.execute("ALTER TABLE sections ADD COLUMN html TEXT NOT NULL DEFAULT ''")
+            novel_columns = {row["name"] for row in conn.execute("PRAGMA table_info(novels)")}
+            if "archived" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN archived INTEGER NOT NULL DEFAULT 0")
+            if "completed_at" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN completed_at TEXT")
+            if "cover_image" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN cover_image TEXT NOT NULL DEFAULT ''")
+            if "series" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN series TEXT NOT NULL DEFAULT ''")
+            if "genres" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN genres TEXT NOT NULL DEFAULT ''")
+            if "file_size" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN file_size INTEGER NOT NULL DEFAULT 0")
+            if "starred" not in novel_columns:
+                conn.execute("ALTER TABLE novels ADD COLUMN starred INTEGER NOT NULL DEFAULT 0")
+
+    def create_novel_record(self, source_path: Path) -> int:
+        book_uuid = uuid.uuid4().hex
+        novel_dir = NOVELS_DIR / book_uuid
+        uploads_dir = novel_dir / "source"
+        rag_dir = novel_dir / "rag"
+        uploads_dir.mkdir(parents=True, exist_ok=True)
+        rag_dir.mkdir(parents=True, exist_ok=True)
+        stored_path = uploads_dir / source_path.name
+        shutil.copy2(source_path, stored_path)
+        now = utc_now()
+        with self.connect() as conn:
+            cursor = conn.execute(
+                """
+                INSERT INTO novels
+                    (uuid, title, author, file_format, original_filename, stored_path, rag_path, status, status_message, created_at, updated_at)
+                VALUES (?, ?, ?, ?, ?, ?, ?, 'queued', 'Waiting to parse book', ?, ?)
+                """,
+                (
+                    book_uuid,
+                    source_path.stem,
+                    "Unknown author",
+                    source_path.suffix.lower().lstrip("."),
+                    source_path.name,
+                    str(stored_path),
+                    str(rag_dir),
+                    now,
+                    now,
+                ),
+            )
+            return int(cursor.lastrowid)
+
+    def set_status(self, novel_id: int, status: str, message: str = "") -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "UPDATE novels SET status = ?, status_message = ?, updated_at = ? WHERE id = ?",
+                (status, message, utc_now(), novel_id),
+            )
+
+    def save_parsed_book(self, novel_id: int, parsed: ParsedBook) -> None:
+        now = utc_now()
+        with self.connect() as conn:
+            conn.execute("DELETE FROM sections WHERE novel_id = ?", (novel_id,))
+            conn.executemany(
+                """
+                INSERT INTO sections (novel_id, section_index, title, text, html, source_locator)
+                VALUES (?, ?, ?, ?, ?, ?)
+                """,
+                [
+                    (novel_id, section.index, section.title, section.text, section.html, section.source_locator)
+                    for section in parsed.sections
+                ],
+            )
+            conn.execute(
+                """
+                UPDATE novels
+                SET title = ?, author = ?, file_format = ?, status = 'complete',
+                    status_message = ?, updated_at = ?
+                WHERE id = ?
+                """,
+                (parsed.title, parsed.author, parsed.file_format, f"Ready: {len(parsed.sections)} sections", now, novel_id),
+            )
+            conn.execute(
+                """
+                INSERT INTO progress (novel_id, section_index, updated_at)
+                VALUES (?, 0, ?)
+                ON CONFLICT(novel_id) DO NOTHING
+                """,
+                (novel_id, now),
+            )
+
+    def list_novels(self, include_archived: bool = False) -> list[dict[str, Any]]:
+        where = "" if include_archived else "WHERE n.archived = 0"
+        with self.connect() as conn:
+            rows = conn.execute(
+                f"""
+                SELECT n.*, COALESCE(p.section_index, 0) AS progress_section,
+                       (SELECT COUNT(*) FROM sections s WHERE s.novel_id = n.id) AS section_count,
+                       (SELECT s.text FROM sections s WHERE s.novel_id = n.id ORDER BY s.section_index LIMIT 1) AS first_section_text
+                FROM novels n
+                LEFT JOIN progress p ON p.novel_id = n.id
+                {where}
+                ORDER BY n.updated_at DESC
+                """
+            ).fetchall()
+            return [dict(row) for row in rows]
+
+    def get_novel(self, novel_id: int) -> dict[str, Any] | None:
+        with self.connect() as conn:
+            row = conn.execute(
+                """
+                SELECT n.*, COALESCE(p.section_index, 0) AS progress_section,
+                       (SELECT COUNT(*) FROM sections s WHERE s.novel_id = n.id) AS section_count,
+                       (SELECT s.text FROM sections s WHERE s.novel_id = n.id ORDER BY s.section_index LIMIT 1) AS first_section_text
+                FROM novels n
+                LEFT JOIN progress p ON p.novel_id = n.id
+                WHERE n.id = ?
+                """,
+                (novel_id,),
+            ).fetchone()
+            return dict(row) if row else None
+
+
+    def get_section(self, novel_id: int, section_index: int) -> dict[str, Any] | None:
+        with self.connect() as conn:
+            row = conn.execute(
+                """
+                SELECT s.*, n.title AS novel_title, n.author, n.status
+                FROM sections s
+                JOIN novels n ON n.id = s.novel_id
+                WHERE s.novel_id = ? AND s.section_index = ?
+                """,
+                (novel_id, section_index),
+            ).fetchone()
+            return dict(row) if row else None
+
+    def list_sections(self, novel_id: int) -> list[dict[str, Any]]:
+        with self.connect() as conn:
+            rows = conn.execute(
+                """
+                SELECT section_index, title
+                FROM sections
+                WHERE novel_id = ?
+                ORDER BY section_index
+                """,
+                (novel_id,),
+            ).fetchall()
+            return [dict(row) for row in rows]
+
+    def section_count(self, novel_id: int) -> int:
+        with self.connect() as conn:
+            return int(conn.execute("SELECT COUNT(*) FROM sections WHERE novel_id = ?", (novel_id,)).fetchone()[0])
+
+    def first_section_text(self, novel_id: int) -> str:
+        with self.connect() as conn:
+            row = conn.execute(
+                "SELECT text FROM sections WHERE novel_id = ? ORDER BY section_index LIMIT 1",
+                (novel_id,),
+            ).fetchone()
+            return str(row["text"]) if row else ""
+
+    def save_cover_image(self, novel_id: int, cover_b64: str) -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "UPDATE novels SET cover_image = ?, updated_at = ? WHERE id = ?",
+                (cover_b64, utc_now(), novel_id),
+            )
+
+    def save_extra_metadata(self, novel_id: int, series: str = "", genres: str = "", file_size: int = 0) -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "UPDATE novels SET series = ?, genres = ?, file_size = ?, updated_at = ? WHERE id = ?",
+                (series, genres, file_size, utc_now(), novel_id),
+            )
+
+    def archive_novel(self, novel_id: int) -> None:
+        now = utc_now()
+        with self.connect() as conn:
+            conn.execute(
+                "UPDATE novels SET archived = 1, completed_at = ?, updated_at = ? WHERE id = ?",
+                (now, now, novel_id),
+            )
+
+    def toggle_starred(self, novel_id: int) -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "UPDATE novels SET starred = 1 - starred, updated_at = ? WHERE id = ?",
+                (utc_now(), novel_id),
+            )
+
+    def toggle_archived(self, novel_id: int) -> None:
+        now = utc_now()
+        with self.connect() as conn:
+            row = conn.execute("SELECT archived FROM novels WHERE id = ?", (novel_id,)).fetchone()
+            if row:
+                new_val = 1 - row["archived"]
+                completed_at = now if new_val == 1 else None
+                conn.execute(
+                    "UPDATE novels SET archived = ?, completed_at = ?, updated_at = ? WHERE id = ?",
+                    (new_val, completed_at, now, novel_id),
+                )
+
+
+    def delete_novel(self, novel_id: int) -> None:
+        novel = self.get_novel(novel_id)
+        with self.connect() as conn:
+            conn.execute("DELETE FROM dictionary_lookups WHERE novel_id = ?", (novel_id,))
+            conn.execute("DELETE FROM highlights WHERE novel_id = ?", (novel_id,))
+            conn.execute("DELETE FROM bookmarks WHERE novel_id = ?", (novel_id,))
+            conn.execute("DELETE FROM progress WHERE novel_id = ?", (novel_id,))
+            conn.execute("DELETE FROM sections WHERE novel_id = ?", (novel_id,))
+            conn.execute("DELETE FROM novels WHERE id = ?", (novel_id,))
+        if novel:
+            novel_dir = Path(str(novel["stored_path"])).parent.parent
+            if novel_dir.exists() and novel_dir.parent == NOVELS_DIR:
+                shutil.rmtree(novel_dir)
+
+    def update_progress(self, novel_id: int, section_index: int) -> None:
+        now = utc_now()
+        with self.connect() as conn:
+            conn.execute(
+                """
+                INSERT INTO progress (novel_id, section_index, updated_at)
+                VALUES (?, ?, ?)
+                ON CONFLICT(novel_id) DO UPDATE SET section_index = excluded.section_index, updated_at = excluded.updated_at
+                """,
+                (novel_id, section_index, now),
+            )
+
+    def add_bookmark(self, novel_id: int, section_index: int, label: str, note: str = "") -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "INSERT INTO bookmarks (novel_id, section_index, label, note, created_at) VALUES (?, ?, ?, ?, ?)",
+                (novel_id, section_index, label, note, utc_now()),
+            )
+
+    def add_highlight(self, novel_id: int, section_index: int, quote: str, note: str = "", color: str = "gold") -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "INSERT INTO highlights (novel_id, section_index, quote, note, color, created_at) VALUES (?, ?, ?, ?, ?, ?)",
+                (novel_id, section_index, quote, note, color, utc_now()),
+            )
+
+    def add_dictionary_lookup(self, novel_id: int | None, section_index: int, query: str, search_url: str) -> None:
+        with self.connect() as conn:
+            conn.execute(
+                "INSERT INTO dictionary_lookups (novel_id, section_index, query, search_url, created_at) VALUES (?, ?, ?, ?, ?)",
+                (novel_id, section_index, query, search_url, utc_now()),
+            )
+
+    def sidebar_items(self, novel_id: int | None) -> tuple[list[dict[str, Any]], list[dict[str, Any]], list[dict[str, Any]]]:
+        if not novel_id:
+            return [], [], []
+        with self.connect() as conn:
+            bookmarks = [dict(row) for row in conn.execute(
+                "SELECT * FROM bookmarks WHERE novel_id = ? ORDER BY created_at DESC LIMIT 20", (novel_id,)
+            )]
+            highlights = [dict(row) for row in conn.execute(
+                "SELECT * FROM highlights WHERE novel_id = ? ORDER BY created_at DESC LIMIT 20", (novel_id,)
+            )]
+            lookups = [dict(row) for row in conn.execute(
+                "SELECT * FROM dictionary_lookups WHERE novel_id = ? ORDER BY created_at DESC LIMIT 20", (novel_id,)
+            )]
+            return bookmarks, highlights, lookups
+
+    def list_all_bookmarks(self, novel_id: int) -> list[dict[str, Any]]:
+        with self.connect() as conn:
+            return [dict(row) for row in conn.execute(
+                "SELECT * FROM bookmarks WHERE novel_id = ? ORDER BY section_index ASC, created_at ASC", (novel_id,)
+            )]
+
+    def get_section_bookmarks(self, novel_id: int | None, section_index: int) -> list[str]:
+        if not novel_id:
+            return []
+        with self.connect() as conn:
+            return [row["label"] for row in conn.execute(
+                "SELECT label FROM bookmarks WHERE novel_id = ? AND section_index = ?", (novel_id, section_index)
+            )]
+
+    def get_section_lookups(self, novel_id: int | None, section_index: int) -> list[str]:
+        if not novel_id:
+            return []
+        with self.connect() as conn:
+            return [row["query"] for row in conn.execute(
+                "SELECT query FROM dictionary_lookups WHERE novel_id = ? AND section_index = ?", (novel_id, section_index)
+            )]

novel_reader/ui.py

@@ -0,0 +1,1474 @@
+from __future__ import annotations
+
+import posixpath
+import re
+from urllib.parse import quote_plus
+
+import gradio as gr
+
+from .ingestion import IngestionPipeline
+from .storage import LibraryStore
+
+
+store = LibraryStore()
+pipeline = IngestionPipeline(store)
+
+
+def build_dashboard_app() -> gr.Blocks:
+    with gr.Blocks(title="Dashboard") as demo:
+        selected_id = gr.State(None)
+        library = gr.HTML()
+        detail = gr.HTML()
+        with gr.Row(elem_classes=["hidden"]):
+            select = gr.Button("Select", elem_id="action-select-novel")
+            clear = gr.Button("Clear", elem_id="action-clear-select")
+            star = gr.Button("Star", elem_id="action-star")
+            archive = gr.Button("Archive", elem_id="action-archive")
+            delete = gr.Button("Delete", elem_id="action-delete")
+        upload = gr.File(label="Add TXT, EPUB, or PDF", file_types=[".txt", ".epub", ".pdf"])
+        refresh = gr.Button("Refresh")
+        msg = gr.HTML()
+
+        demo.load(_dashboard_load, outputs=[library, detail, selected_id, msg])
+        refresh.click(_dashboard_refresh, outputs=[library, detail, selected_id, msg])
+        upload.upload(_upload, upload, [library, detail, selected_id, msg])
+        select.click(_dashboard_select, outputs=[library, detail, selected_id, msg])
+        clear.click(_dashboard_clear, outputs=[library, detail, selected_id, msg])
+        star.click(_toggle_star, selected_id, [library, detail, selected_id, msg])
+        archive.click(_toggle_archive, selected_id, [library, detail, selected_id, msg])
+        delete.click(_delete, selected_id, [library, detail, selected_id, msg])
+    return demo
+
+
+def build_reader_app() -> gr.Blocks:
+    with gr.Blocks(title="Reader") as demo:
+        state = gr.State(_state())
+        with gr.Row(elem_classes=["reader-grid"]):
+            with gr.Column(scale=1, min_width=230, elem_classes=["chapter-rail"]):
+                gr.HTML("<a class='rail-link' href='/dashboard/'>Dashboard</a>")
+                chapters = gr.Radio(label="Chapters", choices=[], interactive=True, elem_classes=["chapters"])
+            with gr.Column(scale=5, min_width=560, elem_classes=["reader-body"]):
+                top = gr.HTML()
+                page = gr.HTML(_empty_page())
+                settings_panel = gr.HTML(elem_id="settings-popup-panel")
+                msg = gr.HTML()
+                with gr.Row(elem_classes=["hidden"]):
+                    prev = gr.Button("prev", elem_id="nr-prev")
+                    next_ = gr.Button("next", elem_id="nr-next")
+                    back = gr.Button("back", elem_id="nr-back")
+                    forward = gr.Button("forward", elem_id="nr-forward")
+                    font_up = gr.Button("font up", elem_id="nr-font-up")
+                    font_down = gr.Button("font down", elem_id="nr-font-down")
+                    sepia = gr.Button("sepia", elem_id="nr-sepia")
+                    light = gr.Button("light", elem_id="nr-light")
+                    dark = gr.Button("dark", elem_id="nr-dark")
+                    speak = gr.Button("speak", elem_id="nr-speak")
+                    selected = gr.Textbox(elem_id="nr-selected-text", container=False, show_label=False)
+                    bookmark = gr.Button("bookmark", elem_id="nr-bookmark")
+                    define = gr.Button("define", elem_id="nr-define")
+                    speak_selected = gr.Button("speak selected", elem_id="nr-speak-selected")
+                    target_jump = gr.Textbox(elem_id="nr-target-jump", container=False, show_label=False)
+                    do_jump = gr.Button("jump", elem_id="nr-do-jump")
+
+        demo.load(_reader_load, outputs=[page, top, chapters, settings_panel, msg, state])
+        chapters.change(_jump, [chapters, state], [page, top, chapters, settings_panel, msg, state])
+        prev.click(_move, [state, gr.State(-1)], [page, top, chapters, settings_panel, msg, state])
+        next_.click(_move, [state, gr.State(1)], [page, top, chapters, settings_panel, msg, state])
+        back.click(_history, [state, gr.State("back")], [page, top, chapters, settings_panel, msg, state])
+        forward.click(_history, [state, gr.State("forward")], [page, top, chapters, settings_panel, msg, state])
+        font_up.click(_font, [state, gr.State(1)], [page, top, chapters, settings_panel, msg, state])
+        font_down.click(_font, [state, gr.State(-1)], [page, top, chapters, settings_panel, msg, state])
+        sepia.click(_theme, [state, gr.State("sepia")], [page, top, chapters, settings_panel, msg, state])
+        light.click(_theme, [state, gr.State("light")], [page, top, chapters, settings_panel, msg, state])
+        dark.click(_theme, [state, gr.State("dark")], [page, top, chapters, settings_panel, msg, state])
+        speak.click(_speak, [state, gr.State("")], msg)
+        speak_selected.click(_speak, [state, selected], msg)
+        bookmark.click(_bookmark, [state, selected], [page, top, chapters, settings_panel, msg, state])
+        define.click(_define, [state, selected], [page, top, chapters, settings_panel, msg, state])
+        do_jump.click(_jump, [target_jump, state], [page, top, chapters, settings_panel, msg, state])
+    return demo
+
+
+def _dashboard_load(request: gr.Request):
+    novel_id = _request_id(request)
+    return _dashboard_outputs(novel_id)
+
+
+def _dashboard_refresh():
+    return _dashboard_outputs(None, "Dashboard refreshed.")
+
+
+def _upload(file):
+    if not file:
+        return _dashboard_outputs(None, "Choose a file first.", "warn")
+    try:
+        pipeline.ingest(file.name)
+        return _dashboard_outputs(None, "Added. Parsing continues in the background.")
+    except Exception as exc:
+        return _dashboard_outputs(None, f"Upload failed: {exc}", "warn")
+
+
+def _toggle_star(novel_id):
+    novel_id = _int(novel_id)
+    if novel_id:
+        store.toggle_starred(novel_id)
+        return _dashboard_outputs(novel_id, "Star status updated.")
+    return _dashboard_outputs(None, "Choose a book first.", "warn")
+
+
+def _toggle_archive(novel_id):
+    novel_id = _int(novel_id)
+    if novel_id:
+        store.toggle_archived(novel_id)
+        return _dashboard_outputs(novel_id, "Read status updated.")
+    return _dashboard_outputs(None, "Choose a book first.", "warn")
+
+
+def _delete(novel_id):
+    novel_id = _int(novel_id)
+    if novel_id:
+        store.delete_novel(novel_id)
+        return _dashboard_outputs(None, "Book deleted.")
+    return _dashboard_outputs(None, "Choose a book first.", "warn")
+
+
+def _dashboard_select(request: gr.Request):
+    novel_id = _request_id(request)
+    return _dashboard_outputs(novel_id)
+
+
+def _dashboard_clear():
+    return _dashboard_outputs(None)
+
+
+
+def _dashboard_outputs(novel_id: int | None, message: str = "", tone: str = "ok"):
+    novel = store.get_novel(novel_id) if novel_id else None
+    return (
+        _dashboard(novel_id),
+        _detail(novel),
+        novel["id"] if novel else None,
+        _notice(message, tone),
+    )
+
+
+def _dashboard(selected_id: int | None = None) -> str:
+    active = [n for n in store.list_novels(include_archived=True) if not n.get("archived")]
+    archived = [n for n in store.list_novels(include_archived=True) if n.get("archived")]
+    return f"""
+    <main class="dashboard">
+      <header>
+        <div>
+          <p>Novel Reader</p>
+          <h1>Dashboard</h1>
+          <small>{len(active)} active · {len(archived)} archived</small>
+        </div>
+        <div class="dashboard-theme-selector">
+          <button data-theme-set="sepia" class="theme-btn sepia-btn">Sepia</button>
+          <button data-theme-set="light" class="theme-btn light-btn">Light</button>
+          <button data-theme-set="dark" class="theme-btn dark-btn">Dark</button>
+        </div>
+      </header>
+      <h2>Library</h2>
+      <section class="cards">{''.join(_card(n, selected_id) for n in active) or "<div class='empty'>No books yet. Add a novel to begin.</div>"}</section>
+      <h2>Archive</h2>
+      <section class="cards archive">{''.join(_card(n, selected_id) for n in archived) or "<div class='empty'>Completed books will appear here.</div>"}</section>
+    </main>
+    """
+
+
+def _get_cover_html(novel: dict) -> str:
+    cover_image = novel.get("cover_image")
+    if cover_image:
+        return f'<img class="book-cover-img" src="{cover_image}" alt="Cover" />'
+        
+    # Beautiful text fallback cover
+    first_text = novel.get("first_section_text") or ""
+    # Strip HTML tags just in case
+    first_text = re.sub(r'<[^>]*>', '', first_text)
+    preview = first_text.strip()[:140]
+    if len(first_text) > 140:
+        preview += "..."
+    if not preview:
+        preview = "No text content available."
+        
+    return f"""
+    <div class="book-cover-fallback">
+      <div class="fallback-header">{_escape(novel['file_format'].upper())}</div>
+      <div class="fallback-title">{_escape(novel['title'])}</div>
+      <div class="fallback-divider"></div>
+      <div class="fallback-body">{_escape(preview)}</div>
+      <div class="fallback-footer">{_escape(novel['author'])}</div>
+    </div>
+    """
+
+
+def _card(novel: dict, selected_id: int | None) -> str:
+    count = int(novel.get("section_count") or 0)
+    done = int(novel.get("progress_section") or 0)
+    progress = int(((done + 1) / count) * 100) if count else 0
+    selected = " selected" if novel["id"] == selected_id else ""
+    
+    cover_html = _get_cover_html(novel)
+    
+    star_badge = ""
+    if novel.get("starred"):
+        star_badge = '<div class="star-badge" title="Starred">★</div>'
+        
+    return f"""
+    <a class="book-card{selected}" href="/dashboard?novel_id={novel['id']}">
+      <div class="card-cover-container">
+        {cover_html}
+        {star_badge}
+      </div>
+      <div class="card-info">
+        <span class="card-format">{_escape(novel['file_format'].upper())}</span>
+        <strong class="card-title">{_escape(novel['title'])}</strong>
+        <small class="card-author">{_escape(novel['author'])}</small>
+        <div class="card-progress"><b style="width:{progress}%"></b></div>
+        <span class="card-progress-text">{progress}% read</span>
+      </div>
+    </a>
+    """
+
+
+def _detail(novel: dict | None) -> str:
+    if not novel:
+        return ""
+        
+    novel_id = novel["id"]
+    starred = bool(novel.get("starred"))
+    archived = bool(novel.get("archived"))
+    
+    # SVG icons for logo buttons
+    star_icon = """<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>"""
+    if starred:
+        star_icon = """<svg class="icon-svg filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>"""
+        
+    archive_icon = """<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>"""
+    if archived:
+        archive_icon = """<svg class="icon-svg filled" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>"""
+        
+    delete_icon = """<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>"""
+    
+    continue_icon = """<svg class="icon-svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>"""
+    
+    meta_items = []
+    
+    author = novel.get("author")
+    if author and author != "Unknown author":
+        meta_items.append(f"""
+        <div class="meta-row">
+          <span class="meta-label">Author</span>
+          <span class="meta-value">{_escape(author)}</span>
+        </div>
+        """)
+        
+    series = novel.get("series")
+    if series:
+        meta_items.append(f"""
+        <div class="meta-row">
+          <span class="meta-label">Series</span>
+          <span class="meta-value">{_escape(series)}</span>
+        </div>
+        """)
+        
+    genres = novel.get("genres")
+    if genres:
+        meta_items.append(f"""
+        <div class="meta-row">
+          <span class="meta-label">Genres</span>
+          <span class="meta-value">{_escape(genres)}</span>
+        </div>
+        """)
+        
+    count = int(novel.get("section_count") or 0)
+    done = int(novel.get("progress_section") or 0)
+    percent = int(((done + 1) / count) * 100) if count else 0
+    meta_items.append(f"""
+    <div class="meta-row">
+      <span class="meta-label">Progress</span>
+      <span class="meta-value">{percent}% ({done + 1} / {count} sections)</span>
+    </div>
+    """)
+    
+    meta_items.append(f"""
+    <div class="meta-row">
+      <span class="meta-label">Last Read</span>
+      <span class="meta-value">{_format_date(novel.get("updated_at"))}</span>
+    </div>
+    """)
+    
+    file_size = novel.get("file_size") or 0
+    if file_size:
+        meta_items.append(f"""
+        <div class="meta-row">
+          <span class="meta-label">Size</span>
+          <span class="meta-value">{_format_size(file_size)}</span>
+        </div>
+        """)
+        
+    metadata_html = "".join(meta_items)
+    cover_html = _get_cover_html(novel)
+    
+    starred_class = "active" if starred else ""
+    archived_class = "active" if archived else ""
+    read_label = "Read Again" if archived else "Continue Reading"
+    
+    return f"""
+    <div id="detail-modal" class="modal-overlay show" onclick="if(event.target === this) closeModal();">
+      <div class="modal-content">
+        <button class="modal-close" onclick="closeModal();" title="Close modal">&times;</button>
+        
+        <div class="modal-cover-wrapper">
+          {cover_html}
+        </div>
+        
+        <h1 class="modal-title">{_escape(novel['title'])}</h1>
+        
+        <div class="modal-actions">
+          <!-- Star button -->
+          <button class="action-btn star-btn {starred_class}" onclick="document.getElementById('action-star').click();" title="Toggle Star">
+            {star_icon}
+          </button>
+          
+          <!-- Have read button -->
+          <button class="action-btn archive-btn {archived_class}" onclick="document.getElementById('action-archive').click();" title="Toggle Read Status">
+            {archive_icon}
+          </button>
+          
+          <!-- Delete button -->
+          <button class="action-btn delete-btn" onclick="if(confirm('Are you sure you want to delete this book?')) document.getElementById('action-delete').click();" title="Delete Book">
+            {delete_icon}
+          </button>
+          
+          <!-- Continue reading button -->
+          <a class="action-btn continue-btn" href="/reader/?novel_id={novel_id}" title="{read_label}">
+            {continue_icon}
+          </a>
+        </div>
+        
+        <div class="modal-divider"></div>
+        
+        <div class="modal-metadata">
+          {metadata_html}
+        </div>
+      </div>
+    </div>
+    """
+
+
+def _format_size(bytes_val: int) -> str:
+    if not bytes_val:
+        return "Unknown size"
+    val = float(bytes_val)
+    for unit in ['B', 'KB', 'MB', 'GB']:
+        if val < 1024:
+            return f"{val:.1f} {unit}"
+        val /= 1024
+    return f"{val:.1f} TB"
+
+
+def _format_date(iso_str: str | None) -> str:
+    if not iso_str:
+        return "Never"
+    try:
+        parts = iso_str.split("T")
+        date_part = parts[0]
+        time_part = parts[1][:5] if len(parts) > 1 else ""
+        return f"{date_part} {time_part}".strip()
+    except Exception:
+        return str(iso_str)
+
+
+
+def _reader_load(request: gr.Request):
+    novel_id = _request_id(request)
+    if not novel_id:
+        return _empty_page(), "", gr.update(choices=[]), "", _notice("Open a book from the dashboard.", "warn"), _state()
+    novel = store.get_novel(novel_id)
+    if not novel:
+        return _empty_page(), "", gr.update(choices=[]), "", _notice("Book not found.", "warn"), _state()
+    state = {**_state(), "novel_id": novel_id, "section": int(novel.get("progress_section") or 0)}
+    return _render(state)
+
+
+def _state() -> dict:
+    return {"novel_id": None, "section": 0, "history": [], "future": [], "theme": "sepia", "font": 22}
+
+
+def _move(state, delta):
+    novel_id = state.get("novel_id")
+    if not novel_id:
+        return _render(state, "Open a book first.")
+    count = store.section_count(novel_id)
+    current = int(state["section"])
+    target = max(0, min(count - 1, current + int(delta)))
+    if target != current:
+        state = {**state, "section": target, "history": state["history"] + [current], "future": []}
+    return _render(state, save_progress=True)
+
+
+def _jump(section, state):
+    target = _int(section)
+    if target is None:
+        return _render(state)
+    current = int(state["section"])
+    if target != current:
+        state = {**state, "section": target, "history": state["history"] + [current], "future": []}
+    return _render(state, save_progress=True)
+
+
+def _history(state, direction):
+    history, future = list(state["history"]), list(state["future"])
+    current = int(state["section"])
+    if direction == "back" and history:
+        state = {**state, "section": history.pop(), "history": history, "future": [current] + future}
+    if direction == "forward" and future:
+        state = {**state, "section": future.pop(0), "history": history + [current], "future": future}
+    return _render(state, save_progress=True)
+
+
+def _font(state, delta):
+    novel_id = state.get("novel_id")
+    novel = store.get_novel(novel_id) if novel_id else None
+    is_pdf = novel and novel.get("file_format") == "pdf"
+    
+    if is_pdf:
+        current_zoom = int(state.get("zoom", 100))
+        zoom_change = int(delta) * 10
+        new_zoom = max(50, min(200, current_zoom + zoom_change))
+        return _render({**state, "zoom": new_zoom})
+    else:
+        return _render({**state, "font": max(16, min(32, int(state["font"]) + int(delta)))})
+
+
+def _theme(state, theme):
+    return _render({**state, "theme": theme})
+
+
+def _bookmark(state, text):
+    text = (text or "").strip()
+    novel_id = state.get("novel_id")
+    if novel_id and text:
+        store.add_bookmark(novel_id, int(state["section"]), text)
+        return _render(state, "Bookmarked.")
+    return _render(state, "Select text first.")
+
+
+def _define(state, text):
+    text = (text or "").strip()
+    novel_id = state.get("novel_id")
+    if novel_id and text:
+        store.add_dictionary_lookup(novel_id, int(state["section"]), text, _meaning_url(text))
+        return _render(state, f"Defined: {text}")
+    return _render(state, "Select word first.")
+
+
+def _speak(state, text):
+    detail = f": {_escape((text or '').strip()[:48])}" if (text or "").strip() else ""
+    return _notice(f"Speak queued for future TTS{detail}.")
+
+
+def _render(state, message: str = "", save_progress: bool = False):
+    novel_id = state.get("novel_id")
+    if not novel_id:
+        return _empty_page(), "", gr.update(choices=[]), "", _notice(message, "warn") if message else "", state
+    novel = store.get_novel(novel_id)
+    if not novel:
+        return _empty_page(), "", gr.update(choices=[]), "", _notice("Book not found.", "warn"), state
+    if novel["status"] != "complete":
+        return _waiting_page(novel, state), _top(novel, None, state), _chapter_update(novel_id, state), _settings_panel(novel_id, state), _notice(novel["status_message"]), state
+
+    count = store.section_count(novel_id)
+    state = {**state, "section": max(0, min(count - 1, int(state["section"])))}
+    if save_progress:
+        store.update_progress(novel_id, int(state["section"]))
+    section = store.get_section(novel_id, int(state["section"]))
+    return _page(section, count, state), _top(novel, section, state), _chapter_update(novel_id, state), _settings_panel(novel_id, state), _notice(message), state
+
+
+def _clean_chapter_title(title: str, index: int) -> str:
+    if not title:
+        return f"Chapter {index + 1}"
+    title = title.strip()
+    # Check if it looks like a filepath or ends with file extensions
+    if "/" in title or "\\" in title or title.lower().endswith((".html", ".xhtml", ".xml", ".htm")):
+        basename = posixpath.basename(title.replace("\\", "/"))
+        # split_003 -> Chapter 4
+        num_match = re.search(r"split_(\d+)", basename)
+        if num_match:
+            return f"Chapter {int(num_match.group(1)) + 1}"
+        # generic number search, e.g. chapter_04 -> Chapter 4
+        num_match_generic = re.search(r"(\d+)", basename)
+        if num_match_generic:
+            return f"Chapter {int(num_match_generic.group(1))}"
+        # stem title fallback
+        stem = posixpath.splitext(basename)[0]
+        stem = stem.replace("_", " ").replace("-", " ").title()
+        return stem or f"Chapter {index + 1}"
+    return title
+
+
+def _top(novel: dict, section: dict | None, state: dict) -> str:
+    count = store.section_count(novel["id"]) if novel and novel["status"] == "complete" else 0
+    progress = f"{section['section_index'] + 1}/{count}" if section else ""
+    title = _clean_chapter_title(section["title"], section["section_index"]) if section else novel["title"]
+    return f"""
+    <header class="top theme-{state['theme']}">
+      <div><small>{_escape(novel['title'])}</small><strong>{_escape(title)}</strong></div>
+      <nav>
+        <a href="/dashboard/">Dashboard</a>
+        <button data-click="nr-back">Back</button><button data-click="nr-prev">Prev</button>
+        <span>{_escape(progress)}</span>
+        <button data-click="nr-next">Next</button><button data-click="nr-forward">Forward</button>
+        <button class="settings-trigger" title="Settings">
+          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: block;">
+            <circle cx="12" cy="12" r="3"></circle>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
+          </svg>
+        </button>
+      </nav>
+    </header>
+    """
+
+
+def _chapter_update(novel_id: int, state: dict):
+    choices = [(_clean_chapter_title(s["title"], s["section_index"]), s["section_index"]) for s in store.list_sections(novel_id)]
+    return gr.update(choices=choices, value=int(state["section"]))
+
+
+def _highlight_phrases(html: str, phrases: list[str], css_class: str) -> str:
+    if not phrases:
+        return html
+    phrases = sorted(list(set(phrases)), key=len, reverse=True)
+    parts = re.split(r'(<[^>]+>)', html)
+    for i in range(len(parts)):
+        if parts[i].startswith('<') and parts[i].endswith('>'):
+            continue
+        for phrase in phrases:
+            if not phrase.strip():
+                continue
+            escaped = re.escape(phrase)
+            replacement = f'<span class="{css_class}" data-phrase="{_escape(phrase)}">{phrase}</span>'
+            parts[i] = re.sub(escaped, replacement, parts[i])
+    return "".join(parts)
+
+
+def _page(section: dict | None, count: int, state: dict) -> str:
+    if not section:
+        return _empty_page()
+    progress = int(((section["section_index"] + 1) / max(count, 1)) * 100)
+    content = section["html"] or _paragraphs(section["text"])
+    
+    novel_id = state.get("novel_id")
+    if novel_id:
+        bookmarks = store.get_section_bookmarks(novel_id, section["section_index"])
+        lookups = store.get_section_lookups(novel_id, section["section_index"])
+        content = _highlight_phrases(content, bookmarks, "bookmark-dotted")
+        content = _highlight_phrases(content, lookups, "define-dotted")
+
+    zoom_val = state.get("zoom", 100) / 100.0
+    return f"""
+    <article class="page theme-{state['theme']}" style="--font:{state['font']}px; --pdf-zoom:{zoom_val}">
+      <div class="progress"><span style="width:{progress}%"></span></div>
+      <div class="text">{content}</div>
+    </article>
+    """
+
+
+def _waiting_page(novel: dict, state: dict) -> str:
+    return f"<article class='page theme-{state['theme']}'><div class='empty'><h2>{_escape(novel['title'])}</h2><p>{_escape(novel['status_message'])}</p></div></article>"
+
+
+def _empty_page() -> str:
+    return "<article class='page theme-sepia'><div class='empty'><h2>Open a book from your dashboard.</h2></div></article>"
+
+
+def _settings_panel(novel_id: int | None, state: dict) -> str:
+    if not novel_id:
+        return ""
+    bookmarks = store.list_all_bookmarks(novel_id)
+    bookmarks_html = ""
+    for b in bookmarks:
+        section_title = f"Ch {b['section_index'] + 1}"
+        preview = _escape(b['label'][:45])
+        if len(b['label']) > 45:
+            preview += "..."
+        bookmarks_html += f"""
+        <div class="bookmark-item" data-goto-section="{b['section_index']}" data-goto-text="{_escape(b['label'])}">
+          <span class="b-sec">{section_title}</span>
+          <span class="b-text">"{preview}"</span>
+        </div>
+        """
+    if not bookmarks:
+        bookmarks_html = "<p class='no-bookmarks'>No bookmarks in this book.</p>"
+        
+    novel = store.get_novel(novel_id)
+    is_pdf = novel and novel.get("file_format") == "pdf"
+        
+    theme = state.get("theme", "sepia")
+    font = state.get("font", 22)
+    active_sepia = "active" if theme == "sepia" else ""
+    active_light = "active" if theme == "light" else ""
+    active_dark = "active" if theme == "dark" else ""
+    
+    font_group_html = ""
+    if is_pdf:
+        zoom = state.get("zoom", 100)
+        font_group_html = f"""
+        <div class="settings-group">
+          <h4>Zoom</h4>
+          <div class="settings-row font-adjust">
+            <button class="settings-action" data-click="nr-font-down">Zoom-</button>
+            <span class="font-display">{zoom}%</span>
+            <button class="settings-action" data-click="nr-font-up">Zoom+</button>
+          </div>
+        </div>
+        """
+    else:
+        font = state.get("font", 22)
+        font_group_html = f"""
+        <div class="settings-group">
+          <h4>Font Size</h4>
+          <div class="settings-row font-adjust">
+            <button class="settings-action" data-click="nr-font-down">A-</button>
+            <span class="font-display">{font}px</span>
+            <button class="settings-action" data-click="nr-font-up">A+</button>
+          </div>
+        </div>
+        """
+    
+    return f"""
+    <div class="settings-popover theme-{theme}">
+      <!-- Screen 1: Main Settings -->
+      <div class="settings-main-screen">
+        {font_group_html}
+        <div class="settings-group">
+          <h4>Theme</h4>
+          <div class="settings-row themes">
+            <button class="theme-btn sepia {active_sepia}" data-theme-set="sepia">Sepia</button>
+            <button class="theme-btn light {active_light}" data-theme-set="light">Light</button>
+            <button class="theme-btn dark {active_dark}" data-theme-set="dark">Dark</button>
+          </div>
+        </div>
+        <div class="settings-group" style="border-bottom: none; padding-bottom: 0; margin-bottom: 0;">
+          <button class="theme-btn view-bookmarks-btn" style="display: flex; justify-content: space-between; align-items: center; width: 100% !important; background: var(--blue) !important; color: #ffffff !important; border-color: var(--blue) !important;">
+            <span>View Bookmarks ({len(bookmarks)})</span>
+            <span style="font-weight: bold; margin-left: 8px;">&rarr;</span>
+          </button>
+        </div>
+      </div>
+      
+      <!-- Screen 2: Bookmarks Screen -->
+      <div class="settings-bookmarks-screen" style="display: none;">
+        <div class="settings-group" style="display: flex; align-items: center; gap: 8px; margin-bottom: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 8px;">
+          <button class="back-to-settings-btn" style="background: transparent; border: none; color: var(--blue); cursor: pointer; font-size: 16px; padding: 0 4px 0 0; font-weight: bold; display: inline-flex; align-items: center;">&larr;</button>
+          <h4 style="margin: 0 !important; color: var(--muted) !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;">Bookmarks ({len(bookmarks)})</h4>
+        </div>
+        <div class="bookmarks-list">
+          {bookmarks_html}
+        </div>
+      </div>
+    </div>
+    """
+
+
+def _note(title: str, rows: list[dict], key: str) -> str:
+    body = "".join(f"<p><b>{r['section_index'] + 1}</b>{_escape(str(r.get(key, ''))[:120])}</p>" for r in rows[:8]) or "<p>Nothing yet.</p>"
+    return f"<div><h3>{title}</h3>{body}</div>"
+
+
+def _paragraphs(text: str) -> str:
+    return "".join(f"<p>{_escape(p).replace(chr(10), '<br>')}</p>" for p in text.split("\n\n") if p.strip())
+
+
+def _request_id(request: gr.Request) -> int | None:
+    params = dict(request.query_params) if request else {}
+    return _int(params.get("novel_id"))
+
+
+def _notice(text: str, tone: str = "ok") -> str:
+    return f"<p class='notice {tone}'>{_escape(text)}</p>" if text else ""
+
+
+def _meaning_url(text: str) -> str:
+    return f"https://www.google.com/search?q={quote_plus(text + ' meaning')}"
+
+
+def _int(value):
+    try:
+        return int(value)
+    except (TypeError, ValueError):
+        return None
+
+
+def _escape(value) -> str:
+    return str(value).replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;").replace('"', "&quot;")
+
+
+READER_JS = r"""
+// Apply saved theme immediately so there's no flash
+(function() {
+  var t = localStorage.getItem('nr-theme') || 'sepia';
+  document.documentElement.setAttribute('data-theme', t);
+})();
+
+const q = (sel, root = document) => root.querySelector(sel);
+const setBox = (id, value) => {
+  const field = q(`#${id} textarea, #${id} input`);
+  if (field) { field.value = value; field.dispatchEvent(new Event("input", { bubbles: true })); }
+};
+
+// Fixed Gradio 4 element-level click interceptor mapping
+const click = (id) => {
+  const el = q(`#${id}`);
+  if (!el) return;
+  if (el.tagName === "BUTTON") {
+    el.click();
+  } else {
+    el.querySelector("button")?.click();
+  }
+};
+
+const selectionText = () => {
+  const sel = getSelection();
+  const text = sel && !sel.isCollapsed ? sel.toString().trim().replace(/\s+/g, " ") : "";
+  const reader = q(".text");
+  return text && reader?.contains(sel.anchorNode) && reader.contains(sel.focusNode) ? text : "";
+};
+
+// Theme ids that map to data-click -> localStorage key
+const THEMES = { 'nr-sepia': 'sepia', 'nr-light': 'light', 'nr-dark': 'dark' };
+
+function applyTheme(name) {
+  localStorage.setItem('nr-theme', name);
+  document.documentElement.setAttribute('data-theme', name);
+}
+
+function checkAndScrollBookmark() {
+  if (!window.__gotoBookmarkText) return;
+  const phrase = window.__gotoBookmarkText;
+  const el = Array.from(document.querySelectorAll(".bookmark-dotted")).find(
+    span => span.dataset.phrase === phrase || span.textContent.trim() === phrase
+  );
+  if (el) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    el.style.backgroundColor = 'rgba(255, 215, 0, 0.4)';
+    setTimeout(() => { el.style.backgroundColor = 'transparent'; }, 2000);
+    window.__gotoBookmarkText = null;
+  }
+}
+
+// Seamlessly preserve settings popup state across Svelte server re-renders
+function syncSettingsPopupState() {
+  const panel = q(".settings-popover");
+  if (!panel) return;
+  if (window.__settingsPanelOpen) {
+    if (!panel.classList.contains("show")) {
+      panel.classList.add("show");
+      const trigger = q(".settings-trigger");
+      if (trigger) {
+        const rect = trigger.getBoundingClientRect();
+        panel.style.top = `${rect.bottom + 8}px`; // Fixed position
+        panel.style.left = `${Math.max(10, Math.min(innerWidth - 320, rect.left + rect.width - 290))}px`;
+      }
+    }
+
+    // Toggle main settings screen vs bookmarks list sub-screen
+    const mainScreen = q(".settings-main-screen", panel);
+    const bScreen = q(".settings-bookmarks-screen", panel);
+    if (mainScreen && bScreen) {
+      if (window.__settingsPanelBookmarksScreen) {
+        mainScreen.style.display = "none";
+        bScreen.style.display = "block";
+      } else {
+        mainScreen.style.display = "block";
+        bScreen.style.display = "none";
+      }
+    }
+  } else {
+    panel.classList.remove("show");
+  }
+}
+
+function bootReader() {
+  if (window.__readerBooted) return;
+  window.__readerBooted = true;
+  
+  const bar = document.createElement("div");
+  bar.id = "select-bar";
+  document.body.appendChild(bar);
+
+  // Prevent selection clearing when clicking buttons in selection bar
+  bar.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+  });
+
+  // Set up instant MutationObserver on settings popup container to prevent any flicker during Svelte DOM updates
+  const observer = new MutationObserver(() => {
+    syncSettingsPopupState();
+  });
+  const container = q("#settings-popup-panel") || document.body;
+  observer.observe(container, { childList: true, subtree: true });
+
+  // Poll for bookmark targets and keep settings open state synchronized
+  setInterval(checkAndScrollBookmark, 300);
+  setInterval(syncSettingsPopupState, 50);
+
+  document.addEventListener("click", (event) => {
+    // Intercept bookmarks clicks inside the settings popup
+    const bookmarkItem = event.target.closest(".bookmark-item");
+    if (bookmarkItem) {
+      const section = bookmarkItem.dataset.gotoSection;
+      const text = bookmarkItem.dataset.gotoText;
+      window.__gotoBookmarkText = text;
+      setBox("nr-target-jump", section);
+      click("nr-do-jump");
+      return;
+    }
+
+    // Toggle settings popup visibility & positioning
+    const trigger = event.target.closest(".settings-trigger");
+    const panel = q(".settings-popover");
+    if (trigger) {
+      event.preventDefault();
+      if (panel) {
+        panel.classList.toggle("show");
+        window.__settingsPanelOpen = panel.classList.contains("show");
+        if (window.__settingsPanelOpen) {
+          const rect = trigger.getBoundingClientRect();
+          panel.style.top = `${rect.bottom + 8}px`; // Fixed position
+          panel.style.left = `${Math.max(10, Math.min(innerWidth - 320, rect.left + rect.width - 290))}px`;
+        }
+      }
+      return;
+    }
+
+    // Sub-screen transition triggers inside settings panel
+    if (event.target.closest(".view-bookmarks-btn")) {
+      event.preventDefault();
+      window.__settingsPanelBookmarksScreen = true;
+      syncSettingsPopupState();
+      return;
+    }
+    if (event.target.closest(".back-to-settings-btn")) {
+      event.preventDefault();
+      window.__settingsPanelBookmarksScreen = false;
+      syncSettingsPopupState();
+      return;
+    }
+
+    // Double-guard settings open state when clicking elements inside settings popover
+    if (event.target.closest(".settings-popover")) {
+      window.__settingsPanelOpen = true;
+    }
+    
+    // Clicking outside closes the settings popup
+    if (panel && !event.target.closest(".settings-popover") && !event.target.closest(".settings-trigger")) {
+      // ONLY close if the click target is still in the document body (prevents closing on detached Svelte re-renders)
+      if (document.body.contains(event.target)) {
+        panel.classList.remove("show");
+        window.__settingsPanelOpen = false;
+      }
+    }
+
+    const proxy = event.target.closest("[data-click]");
+    if (proxy) {
+      const themeKey = THEMES[proxy.dataset.click];
+      if (themeKey) applyTheme(themeKey);
+      click(proxy.dataset.click);
+      return;
+    }
+
+    const themeSet = event.target.closest("[data-theme-set]");
+    if (themeSet) {
+      const theme = themeSet.dataset.themeSet;
+      applyTheme(theme);
+      click(`nr-${theme}`);
+      return;
+    }
+
+    const action = event.target.closest("#select-bar button");
+    if (action) {
+      const text = selectionText();
+      setBox("nr-selected-text", text);
+      if (action.dataset.a === "define" && text) {
+        window.open(`https://www.google.com/search?q=${encodeURIComponent(text + " meaning")}`, "_blank", "noopener");
+        click("nr-define");
+      } else if (action.dataset.a === "bookmark" && text) {
+        click("nr-bookmark");
+      } else if (action.dataset.a === "speak-selected" && text) {
+        click("nr-speak-selected");
+      }
+      bar.classList.remove("show");
+      return;
+    }
+  });
+
+  document.addEventListener("mouseup", (e) => {
+    if (e.target.closest("#select-bar")) return; // ignore mouseup when interacting with the select bar itself!
+    const text = selectionText();
+    if (!text) return bar.classList.remove("show");
+
+    // Dynamic selection popover button filters
+    const hasSpace = /\s/.test(text);
+    let buttonsHtml = `<button data-a='bookmark'>Bookmark</button>`;
+    if (!hasSpace && text.length > 0) {
+      buttonsHtml += `<button data-a='define'>Define</button>`;
+    }
+    buttonsHtml += `<button data-a='speak-selected'>Speak</button>`;
+    bar.innerHTML = buttonsHtml;
+
+    const rect = getSelection().getRangeAt(0).getBoundingClientRect();
+    bar.style.left = `${Math.max(10, Math.min(innerWidth - 260, rect.left + rect.width / 2 - 120))}px`;
+    bar.style.top = `${Math.max(10, scrollY + rect.top - 46)}px`;
+    bar.classList.add("show");
+  });
+
+  // Force Svelte layout reflows so observers position dynamic chapters perfectly at 100% zoom
+  [50, 150, 300, 600, 1200, 2500, 4000].forEach(delay => {
+    setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+      const rail = q('.chapter-rail');
+      if (rail) {
+        const d = rail.style.display;
+        rail.style.display = 'none';
+        rail.offsetHeight;
+        rail.style.display = d;
+      }
+    }, delay);
+  });
+}
+bootReader();
+"""
+
+
+# JS injected on both pages: reads localStorage theme and applies data-theme to <html>
+THEME_JS = """
+(function() {
+  var t = localStorage.getItem('nr-theme') || 'sepia';
+  document.documentElement.setAttribute('data-theme', t);
+
+  document.addEventListener("click", function(e) {
+    var card = e.target.closest(".book-card");
+    if (card) {
+      e.preventDefault();
+      var href = card.getAttribute("href");
+      window.history.pushState(null, "", href);
+      var btn = document.getElementById("action-select-novel");
+      if (btn) {
+        btn.click();
+      }
+      return;
+    }
+
+    var btn = e.target.closest("[data-theme-set]");
+    if (btn) {
+      var theme = btn.getAttribute("data-theme-set");
+      localStorage.setItem('nr-theme', theme);
+      document.documentElement.setAttribute('data-theme', theme);
+    }
+  });
+})();
+
+function closeModal() {
+  var modal = document.getElementById('detail-modal');
+  if (modal) {
+    modal.classList.remove('show');
+  }
+  window.history.pushState(null, "", "/dashboard/");
+  var btn = document.getElementById("action-clear-select");
+  if (btn) {
+    btn.click();
+  }
+}
+"""
+
+CSS = """
+/* ── Unified theme tokens ────────────────────────────────────────── */
+:root,
+html[data-theme=sepia] {
+  --bg:#f4ead0; --paper:#f7edcf; --ink:#2b2118; --muted:#756854;
+  --line:rgba(43,33,24,.18); --card-bg:rgba(244,235,208,.72);
+  --card-hover:rgba(244,235,208,.96); --rail-bg:#2e2416;
+  --rail-fg:#e8ddc8; --rail-border:rgba(255,255,255,.10);
+  --blue:#2f80ed; --warn:#b84a18;
+  --reader-bg:#f4ead0; --reader-ink:#2b2118;
+  --reader-muted:#756854; --reader-line:rgba(43,33,24,.18);
+  /* Gradio var overrides */
+  --body-background-fill:#f4ead0; --body-text-color:#2b2118;
+  --background-fill-primary:#f7edcf; --background-fill-secondary:#f0e3be;
+  --block-background-fill:transparent; --block-border-color:rgba(43,33,24,.18);
+  --border-color-primary:rgba(43,33,24,.18);
+  --neutral-50:#f7edcf; --neutral-100:#f0e3be; --neutral-200:rgba(43,33,24,.18);
+  --neutral-300:#a89880; --neutral-400:#756854; --neutral-500:#4a3828;
+  --neutral-600:#2b2118; --neutral-700:#2b2118; --neutral-800:#2b2118; --neutral-900:#1a140f;
+  --button-secondary-background-fill:#e8ddc8; --button-secondary-text-color:#2b2118;
+  --button-secondary-text-color-hover:#2b2118;
+  --input-background-fill:#f0e3be; --checkbox-label-text-color:#2b2118;
+  --upload-text-color:#4a3828; --prose-text-color:#2b2118;
+}
+html[data-theme=light] {
+  --bg:#f5f5f0; --paper:#ffffff; --ink:#1a1a1a; --muted:#5a5a5a;
+  --line:rgba(0,0,0,.13); --card-bg:rgba(255,255,255,.80);
+  --card-hover:rgba(255,255,255,.98); --rail-bg:#1e1e1e;
+  --rail-fg:#e8e8e8; --rail-border:rgba(255,255,255,.10);
+  --blue:#1a6ed8; --warn:#c0340d;
+  --reader-bg:#f5f5f0; --reader-ink:#1a1a1a;
+  --reader-muted:#5a5a5a; --reader-line:rgba(0,0,0,.13);
+  /* Gradio var overrides */
+  --body-background-fill:#f5f5f0; --body-text-color:#1a1a1a;
+  --background-fill-primary:#ffffff; --background-fill-secondary:#f0f0eb;
+  --block-background-fill:transparent; --block-border-color:rgba(0,0,0,.13);
+  --border-color-primary:rgba(0,0,0,.13);
+  --neutral-50:#ffffff; --neutral-100:#f0f0eb; --neutral-200:rgba(0,0,0,.13);
+  --neutral-300:#999999; --neutral-400:#5a5a5a; --neutral-500:#3a3a3a;
+  --neutral-600:#1a1a1a; --neutral-700:#1a1a1a; --neutral-800:#1a1a1a; --neutral-900:#000000;
+  --button-secondary-background-fill:#e4e4e0; --button-secondary-text-color:#1a1a1a;
+  --button-secondary-text-color-hover:#1a1a1a;
+  --input-background-fill:#ececec; --checkbox-label-text-color:#1a1a1a;
+  --upload-text-color:#3a3a3a; --prose-text-color:#1a1a1a;
+}
+html[data-theme=dark] {
+  --bg:#141414; --paper:#1e1e1e; --ink:#e8e2d8; --muted:#9a9188;
+  --line:rgba(232,226,216,.14); --card-bg:rgba(38,34,28,.80);
+  --card-hover:rgba(50,45,38,.95); --rail-bg:#0d0d0d;
+  --rail-fg:#d4cec4; --rail-border:rgba(255,255,255,.08);
+  --blue:#5ba3f5; --warn:#f0956a;
+  --reader-bg:#141414; --reader-ink:#e8e2d8;
+  --reader-muted:#9a9188; --reader-line:rgba(232,226,216,.14);
+  /* Gradio var overrides */
+  --body-background-fill:#141414; --body-text-color:#e8e2d8;
+  --background-fill-primary:#1e1e1e; --background-fill-secondary:#1a1a1a;
+  --block-background-fill:transparent; --block-border-color:rgba(232,226,216,.14);
+  --border-color-primary:rgba(232,226,216,.14); --neutral-100:#e8e2d8;
+  --neutral-200:rgba(232,226,216,.14); --neutral-800:#e8e2d8;
+  --button-secondary-background-fill:#2a2520; --button-secondary-text-color:#e8e2d8;
+  --input-background-fill:#252220; --checkbox-label-text-color:#e8e2d8;
+}
+/* ── Base ─────────────────────────────────────────────────────────── */
+body, .gradio-container { margin:0!important; padding:0!important; max-width:none!important; background:var(--bg)!important; color:var(--ink)!important; font-family:Inter,system-ui,sans-serif; transition:background .25s,color .25s; }
+/* Override Gradio base-theme text-color resets on common elements */
+.gradio-container p, .gradio-container span, .gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4, .gradio-container a, .gradio-container label, .gradio-container dt, .gradio-container dd, .gradio-container li, .gradio-container summary, .gradio-container small, .gradio-container strong, .gradio-container em { color:inherit; }
+/* Override Gradio widget backgrounds so they adapt to theme */
+.gradio-container .block { background:transparent!important; border-color:var(--line)!important; }
+/* File upload: force all text inside to be readable — Gradio uses neutral-400/500 which are light-gray by default */
+.gradio-container .upload-container, .gradio-container .file-upload, .gradio-container .upload-btn { background:var(--card-bg)!important; border-color:var(--line)!important; color:var(--ink)!important; }
+.gradio-container .upload-container *, .gradio-container .file-upload * { color:var(--ink)!important; }
+/* upload-area .wrap blocks (NOT chapter-rail .wrap) */
+.gradio-container .upload-container .wrap, .gradio-container .file-upload .wrap { background:var(--card-bg)!important; border-color:var(--line)!important; color:var(--ink)!important; }
+.gradio-container .upload-container .wrap .icon-wrap, .gradio-container .upload-container .wrap .title, .gradio-container .upload-container .wrap p, .gradio-container .upload-container .wrap span,
+.gradio-container .file-upload .wrap .icon-wrap, .gradio-container .file-upload .wrap .title, .gradio-container .file-upload .wrap p, .gradio-container .file-upload .wrap span { color:var(--ink)!important; }
+.gradio-container button.primary { background:var(--blue)!important; color:#fff!important; border:none!important; }
+.gradio-container button.secondary { background:var(--card-bg)!important; color:var(--ink)!important; border:1px solid var(--line)!important; }
+/* Gradio svelte components use these classes for upload hint text */
+.gradio-container .icon-wrap svg, .gradio-container .upload-icon { color:var(--muted)!important; opacity:0.7; }
+.gradio-container .file-name, .gradio-container .file-size, .gradio-container .or, .gradio-container .subtitle { color:var(--muted)!important; }
+/* Hide Gradio default footer entirely to prevent standard Gradio settings from interfering with our persistent theme system */
+footer, .footer, .gradio-button.theme-toggle, button.theme-toggle, .settings-btn, .show-api { display:none!important; }
+/* ── Dashboard ────────────────────────────────────────────────────── */
+.dashboard { width:min(1120px,calc(100vw - 48px)); margin:auto; padding:48px 0; }
+.dashboard header { display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:28px; }
+.dashboard header p, .dashboard h1, .dashboard small { margin:0; }
+.dashboard header p { color:var(--muted); text-transform:uppercase; font-size:12px; }
+.dashboard h1 { font:400 clamp(44px,7vw,82px)/1 Georgia,serif; color:var(--ink); }
+.dashboard-theme-selector { display:flex; gap:8px; align-items:center; }
+.dashboard-theme-selector button { border:1px solid var(--line)!important; background:transparent!important; border-radius:6px!important; color:var(--ink)!important; box-shadow:none!important; text-decoration:none; padding:7px 14px; cursor:pointer; font-size:13px; font-weight:500; transition:all .2s; }
+.dashboard-theme-selector button:hover { background:var(--line)!important; }
+.dashboard h2 { margin:36px 0 12px; font-size:14px; color:var(--muted); text-transform:uppercase; }
+.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:24px 18px; }
+
+/* Book Card */
+.book-card { display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); border-radius:12px; background:var(--card-bg); color:var(--ink)!important; overflow:hidden; transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 2px 8px rgba(0,0,0,0.04); height: 100%; position: relative; }
+.book-card:hover, .book-card.selected { background:var(--card-hover); transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.12); border-color: var(--blue); }
+
+.card-cover-container { width:100%; aspect-ratio:3/4; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--line); position:relative; display:flex; align-items:center; justify-content:center; }
+.book-cover-img { width:100%; height:100%; object-fit:cover; transition: transform 0.3s ease; }
+.book-card:hover .book-cover-img { transform: scale(1.03); }
+
+/* Star badge inside card cover */
+.star-badge { position:absolute; top:8px; right:8px; background:rgba(242, 201, 76, 0.95); color:#2b2118; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,0.15); z-index: 5; }
+
+/* Fallback Text Cover */
+.book-cover-fallback { width:100%; height:100%; padding:16px; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box; background:var(--paper); font-family:Georgia, serif; color:var(--ink); overflow:hidden; position:relative; }
+.book-cover-fallback::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(255,255,255,0.06) 1.5%, rgba(0,0,0,0.02) 3%, transparent 4%, rgba(0,0,0,0.03) 98%, rgba(0,0,0,0.08) 100%); pointer-events:none; }
+.fallback-header { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--muted); text-align:center; }
+.fallback-title { font-size:16px; font-weight:bold; text-align:center; margin:8px 0 4px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height: 3.6em; }
+.fallback-divider { width:30px; height:1px; background:var(--muted); margin:4px auto; opacity:0.5; }
+.fallback-body { font-size:10px; line-height:1.4; color:var(--muted); text-align:justify; opacity:0.85; overflow:hidden; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; height: 8.4em; }
+.fallback-footer { font-size:10px; font-style:italic; text-align:center; color:var(--muted); margin-top: auto; }
+
+.card-info { padding:14px; display:flex; flex-direction:column; gap:4px; flex-grow:1; }
+.card-format { color:var(--blue); font-size:10px; font-weight:bold; text-transform:uppercase; letter-spacing:0.5px; }
+.card-title { font:500 16px/1.25 Georgia,serif; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: 2.5em; }
+.card-author { color:var(--muted); font-size:12px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
+.card-progress { height:3px; background:var(--line); overflow:hidden; border-radius:1.5px; margin-top:8px; }
+.card-progress b { display:block; height:100%; background:var(--blue); }
+.card-progress-text { font-size:10px; color:var(--muted); align-self:flex-end; margin-top:2px; }
+
+/* ── Modal Dialog ──────────────────────────────────────────────────── */
+.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.4); display:none; align-items:center; justify-content:center; z-index:99999; padding:20px; box-sizing:border-box; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:fadeIn 0.25s ease-out; }
+.modal-overlay.show { display:flex; }
+
+.modal-content { background:var(--paper); color:var(--ink); width:100%; max-width:520px; border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,0.3); border:1px solid var(--line); position:relative; box-sizing:border-box; padding:36px 32px 28px; text-align:center; max-height:90vh; overflow-y:auto; animation:slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
+
+/* Scrollbar styling for modal */
+.modal-content::-webkit-scrollbar { width:6px; }
+.modal-content::-webkit-scrollbar-track { background:transparent; }
+.modal-content::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
+
+.modal-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:rgba(0,0,0,0.03); color:var(--ink); font-size:24px; font-weight:300; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; z-index:10; }
+.modal-close:hover { background:var(--line); transform:scale(1.05); }
+
+.modal-cover-wrapper { width:190px; aspect-ratio:3/4; margin:0 auto 24px; border-radius:12px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,0.15); border:1px solid var(--line); background:var(--bg); }
+.modal-cover-wrapper .book-cover-fallback { padding: 16px; }
+.modal-cover-wrapper .fallback-title { font-size: 15px; }
+.modal-cover-wrapper .fallback-body { font-size: 9.5px; -webkit-line-clamp: 5; height: 7em; }
+
+.modal-title { font:400 28px/1.25 Georgia,serif; color:var(--ink); margin:0 0 24px; padding:0 10px; }
+
+.modal-actions { display:flex; justify-content:center; align-items:center; gap:20px; margin:0 auto 28px; }
+.action-btn { width:54px!important; height:54px!important; border-radius:50%!important; border:1.5px solid var(--muted)!important; background:var(--bg)!important; color:var(--ink)!important; display:flex!important; align-items:center!important; justify-content:center!important; cursor:pointer!important; transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1)!important; text-decoration:none!important; box-sizing:border-box!important; box-shadow:0 2px 10px rgba(0,0,0,0.05)!important; padding:0!important; }
+.action-btn:hover { transform:translateY(-2px)!important; box-shadow:0 6px 16px rgba(0,0,0,0.12)!important; border-color:var(--ink)!important; background:var(--paper)!important; }
+
+/* Force standard action icons to follow the ink color on all internal strokes */
+.action-btn .icon-svg { width:24px!important; height:24px!important; stroke:var(--ink)!important; color:var(--ink)!important; }
+.action-btn .icon-svg path,
+.action-btn .icon-svg circle { stroke:var(--ink)!important; stroke-width:2.2px!important; fill:none!important; }
+
+/* Star Button States */
+.star-btn.active .icon-svg,
+.star-btn.active .icon-svg path { fill:#f2c94c!important; stroke:#f2c94c!important; }
+.star-btn:hover, .star-btn.active { border-color:#f2c94c!important; }
+.star-btn:hover .icon-svg,
+.star-btn:hover .icon-svg path { stroke:#f2c94c!important; }
+.star-btn.active { background:rgba(242, 201, 76, 0.15)!important; }
+
+/* Archive Button States */
+.archive-btn.active .icon-svg,
+.archive-btn.active .icon-svg path,
+.archive-btn.active .icon-svg circle { fill:var(--blue)!important; stroke:var(--blue)!important; }
+.archive-btn:hover, .archive-btn.active { border-color:var(--blue)!important; }
+.archive-btn:hover .icon-svg,
+.archive-btn:hover .icon-svg path,
+.archive-btn:hover .icon-svg circle { stroke:var(--blue)!important; }
+.archive-btn.active { background:rgba(47, 128, 237, 0.15)!important; }
+
+/* Delete Button States */
+.delete-btn:hover { border-color:#eb5757!important; background:rgba(235, 87, 87, 0.15)!important; }
+.delete-btn:hover .icon-svg,
+.delete-btn:hover .icon-svg path { stroke:#eb5757!important; }
+
+/* Continue Button (Play Icon) */
+.continue-btn { background:var(--blue)!important; border-color:var(--blue)!important; }
+.continue-btn .icon-svg { stroke:none!important; color:#ffffff!important; }
+.continue-btn .icon-svg path { fill:#ffffff!important; stroke:none!important; }
+.continue-btn:hover { background:var(--blue)!important; opacity:0.95!important; }
+
+.modal-divider { height:1px; background:var(--line); width:100%; margin-bottom:24px; }
+
+.modal-metadata { display:flex; flex-direction:column; gap:12px; text-align:left; padding:0 6px; }
+.meta-row { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px dashed rgba(0,0,0,0.05); padding-bottom:6px; font-size:14px; }
+html[data-theme=dark] .meta-row { border-bottom-color:rgba(255,255,255,0.05); }
+.meta-label { color:var(--muted); font-weight:normal; }
+.meta-value { color:var(--ink); font-weight:500; text-align:right; max-width:70%; word-break:break-word; }
+
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+
+/* ── Reader layout ────────────────────────────────────────────────── */
+@media (min-width: 861px) {
+  .reader-grid { display:flex!important; flex-direction:row!important; align-items:stretch!important; min-height:100vh!important; gap:0!important; }
+  .chapter-rail { display:flex!important; flex-direction:column!important; flex-wrap:nowrap!important; position:sticky!important; top:0!important; height:100vh!important; overflow-y:auto!important; overflow-x:hidden!important; flex:0 0 280px!important; min-width:280px!important; max-width:280px!important; background:var(--rail-bg)!important; color:var(--rail-fg)!important; padding:18px 0!important; border-right:1px solid var(--rail-border)!important; box-sizing:border-box!important; z-index:100!important; }
+  .reader-body { flex:1!important; min-width:0!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; }
+}
+
+@media (max-width: 860px) {
+  .reader-grid { min-height:100vh; gap:0!important; }
+  .chapter-rail { display:none!important; }
+}
+
+/* Force each chapter choice inside the radio group to render on a fresh single line spanning 100% width */
+.chapters .gr-radio-group {
+  display:flex!important;
+  flex-direction:column!important;
+  align-items:stretch!important;
+  width:100%!important;
+}
+
+.chapters label {
+  width:100%!important;
+  flex:1 1 100%!important;
+  display:flex!important;
+  align-items:center!important;
+  box-sizing:border-box!important;
+  margin:0!important;
+  padding:14px 18px!important;
+  border-top:1px solid var(--rail-border)!important;
+  border-radius:0!important;
+  color:var(--rail-fg)!important;
+  background:transparent!important;
+}
+.chapters label:has(input:checked) { color:var(--blue)!important; }
+
+/* Force ALL children of chapter-rail to use rail colors regardless of any other color overrides */
+.chapter-rail * { color:var(--rail-fg)!important; background:transparent!important; }
+.chapter-rail .block, .chapter-rail .wrap, .chapter-rail .panel, .chapter-rail fieldset, .chapter-rail .form { border:none!important; box-shadow:none!important; }
+.chapter-rail span.group-text { color:var(--rail-fg)!important; }
+.rail-link { display:block; margin:0 18px 18px; color:var(--rail-fg)!important; text-decoration:none; }
+/* theme-* classes kept on elements for state tracking; all reader vars now flow from html[data-theme] */
+.top { height:64px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 28px; color:var(--reader-ink)!important; background:var(--reader-bg)!important; border-bottom:1px solid var(--reader-line); }
+.top small { display:block!important; color:var(--reader-muted)!important; font-size:12px!important; }
+.top strong { display:block!important; font:400 20px/1.15 Georgia,serif!important; color:var(--reader-ink)!important; }
+.top nav { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
+.top a, .top button { border:1px solid var(--reader-line)!important; background:transparent!important; border-radius:6px!important; color:var(--reader-ink)!important; box-shadow:none!important; text-decoration:none; padding:7px 10px; }
+.top span { min-width:54px; text-align:center; color:var(--reader-muted); font-size:13px; }
+.page { min-height:calc(100vh - 64px); padding:64px clamp(26px,8vw,130px); color:var(--reader-ink)!important; background:var(--reader-bg)!important; }
+.text { max-width:930px; margin:auto; text-align:center; font:var(--font,22px)/1.32 Georgia,serif; color:var(--reader-ink)!important; }
+/* Force ALL descendants inside .text to use reader-ink — prevents EPUB inline color styles from creating unreadable light text on light backgrounds */
+.text * { color:var(--reader-ink)!important; }
+.text p { margin:0 0 .85em; }
+.text img { display:block; max-width:100%; height:auto; margin:1.2em auto; color:unset!important; }
+.text hr { width:min(320px,60%); margin:1.6em auto; border:0; border-top:1px solid currentColor; opacity:.38; }
+.text h1, .text h2, .text h3, .text h4 { font-weight:400; line-height:1.15; margin:1.2em 0 .7em; }
+.text blockquote { margin:1.2em auto; max-width:760px; opacity:.86; }
+.text ::selection { background:rgba(47,128,237,.22); }
+.notes { padding:0 28px 28px; color:var(--reader-ink)!important; background:var(--reader-bg)!important; border-top:1px solid var(--reader-line); }
+.notes summary { padding:16px 0; color:var(--reader-muted)!important; cursor:pointer; }
+.notes section { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
+.notes h3 { margin:0 0 8px; color:var(--reader-muted)!important; font-size:12px; text-transform:uppercase; }
+.notes p { margin:0 0 10px; color:var(--reader-ink)!important; }
+.notes b { margin-right:8px; color:var(--blue); }
+.notice { width:fit-content; margin:10px auto; color:var(--blue); font-size:13px; }
+.notice.warn { color:var(--warn); }
+.hidden { position:fixed!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
+@media (max-width:860px) { .reader-grid{flex-direction:column}.chapter-rail{display:none!important}.top{height:auto;align-items:flex-start;flex-direction:column;padding:14px}.page{padding:42px 20px}.text{text-align:left}.notes section,.detail dl{grid-template-columns:1fr} }
+"""
+
+
+READER_CSS = CSS + """
+/* select-bar uses reader theme vars so it adapts automatically */
+#select-bar { position:absolute; z-index:9999; display:none; gap:4px; padding:5px; border-radius:7px; background:var(--reader-bg); border:1px solid var(--reader-line); box-shadow:0 10px 26px rgba(0,0,0,.30); }
+#select-bar.show { display:flex; }
+#select-bar button { border:0; border-radius:5px; background:transparent; color:var(--reader-ink); padding:7px 10px; cursor:pointer; font-size:13px; }
+#select-bar button:hover { background:var(--reader-line); }
+
+/* Settings Popover Dropdown */
+.settings-popover {
+  position: fixed !important;
+  z-index: 1000;
+  display: none;
+  width: 300px;
+  background: var(--paper) !important;
+  color: var(--ink) !important;
+  border: 1px solid var(--line) !important;
+  border-radius: 14px !important;
+  box-shadow: 0 12px 36px rgba(0,0,0,0.18) !important;
+  padding: 20px !important;
+  box-sizing: border-box !important;
+  animation: slideUp 0.2s ease-out;
+}
+.settings-popover.show {
+  display: block !important;
+}
+.settings-group {
+  margin-bottom: 16px;
+  border-bottom: 1px dashed var(--line);
+  padding-bottom: 12px;
+}
+.settings-group:last-child {
+  margin-bottom: 0;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+.settings-group h4 {
+  margin: 0 0 10px 0 !important;
+  color: var(--muted) !important;
+  font-size: 11px !important;
+  text-transform: uppercase !important;
+  letter-spacing: 0.5px !important;
+}
+.settings-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.settings-row.themes {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+.font-adjust {
+  justify-content: space-between;
+}
+.font-display {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--ink);
+}
+.settings-action, .theme-btn {
+  background: var(--bg) !important;
+  color: var(--ink) !important;
+  border: 1.5px solid var(--line) !important;
+  border-radius: 8px !important;
+  padding: 8px 12px !important;
+  cursor: pointer !important;
+  font-size: 13px !important;
+  font-weight: 500 !important;
+  transition: all 0.15s ease !important;
+  text-align: center !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+}
+.settings-action:hover, .theme-btn:hover {
+  border-color: var(--ink) !important;
+  transform: translateY(-1px);
+}
+.theme-btn.active {
+  background: var(--blue) !important;
+  color: #ffffff !important;
+  border-color: var(--blue) !important;
+}
+/* Bookmarks list section inside popup */
+.bookmarks-list {
+  max-height: 180px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-right: 4px;
+}
+.bookmarks-list::-webkit-scrollbar {
+  width: 4px;
+}
+.bookmarks-list::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: 2px;
+}
+.bookmark-item {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 10px;
+  background: var(--bg);
+  border: 1.5px solid var(--line);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.bookmark-item:hover {
+  border-color: var(--blue);
+  background: var(--paper);
+  transform: translateX(2px);
+}
+.bookmark-item .b-sec {
+  font-size: 10px;
+  font-weight: bold;
+  color: var(--blue);
+  text-transform: uppercase;
+  margin-bottom: 2px;
+}
+.bookmark-item .b-text {
+  font-size: 12px;
+  font-style: italic;
+  color: var(--ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.no-bookmarks {
+  font-size: 12px;
+  color: var(--muted);
+  text-align: center;
+  margin: 12px 0 0 0;
+}
+
+/* Persistent dotted annotation underlines */
+.bookmark-dotted {
+  border-bottom: 2.2px dotted var(--blue) !important;
+  background: transparent !important;
+  cursor: pointer !important;
+  transition: background-color 0.3s ease;
+}
+.bookmark-dotted:hover {
+  background: rgba(47, 128, 237, 0.12) !important;
+}
+.define-dotted {
+  border-bottom: 2.2px dotted #9b51e0 !important; /* purple dotted */
+  background: transparent !important;
+  cursor: pointer !important;
+  transition: background-color 0.3s ease;
+}
+.define-dotted:hover {
+  background: rgba(155, 81, 224, 0.12) !important;
+}
+.settings-trigger {
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  border: 1.5px solid var(--reader-line) !important;
+  background: transparent !important;
+}
+.settings-trigger svg {
+  display: block;
+  stroke: var(--reader-ink) !important;
+  color: var(--reader-ink) !important;
+}
+.settings-trigger svg path,
+.settings-trigger svg circle {
+  stroke: var(--reader-ink) !important;
+  stroke-width: 2.2px !important;
+  fill: none !important;
+}
+.pdf-page-container {
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
+  border: 1px solid var(--reader-line) !important;
+  border-radius: 8px !important;
+  overflow: hidden !important;
+  background: #ffffff !important;
+  zoom: var(--pdf-zoom, 1) !important;
+  transition: zoom 0.2s ease !important;
+}
+.pdf-page-img {
+  transition: filter 0.3s ease !important;
+}
+[data-theme="dark"] .pdf-page-img {
+  filter: invert(0.9) hue-rotate(180deg) contrast(0.95) !important;
+}
+[data-theme="sepia"] .pdf-page-img {
+  filter: sepia(0.55) contrast(0.95) brightness(0.98) !important;
+}
+.pdf-text-layer {
+  color: transparent !important;
+  font-family: system-ui, -apple-system, sans-serif !important;
+  white-space: pre-wrap !important;
+  line-height: 1.15 !important;
+  cursor: text !important;
+  user-select: text !important;
+  -webkit-user-select: text !important;
+}
+.pdf-text-layer::selection {
+  background: rgba(0, 120, 215, 0.33) !important;
+  color: transparent !important;
+}
+.pdf-text-layer::-moz-selection {
+  background: rgba(0, 120, 215, 0.33) !important;
+  color: transparent !important;
+}
+.pdf-page-error {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  width: 100% !important;
+  padding: 40px !important;
+  background: rgba(235, 94, 85, 0.1) !important;
+  border: 1px dashed #eb5e55 !important;
+  border-radius: 8px !important;
+  color: #eb5e55 !important;
+}
+"""

requirements.txt

@@ -0,0 +1,5 @@
+gradio==6.8.0
+ebooklib>=0.18
+beautifulsoup4>=4.12
+pymupdf>=1.24
+Pillow>=10.0

voice_samples/Aiden/Aiden_angry_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8a088b0f3dff7d5e6769a40897fe46c004f1cde4bf7712f127753eca6d0f2f55
+size 691244

voice_samples/Aiden/Aiden_angry_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec065ac3fa7dfbc14f52ee218821bac8db29526353c676e1516cba0f3a8f2050
+size 668204

voice_samples/Aiden/Aiden_angry_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:23ee3284d2d53a134eb7b21da9df3ab136d7ef0367a8ab8c1ad49c56754e6456
+size 629804

voice_samples/Aiden/Aiden_fearful_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fbf02ab3a6504438a48ac3f74ca44ed03a6d0221f8d7138b300fca77ae9457ae
+size 764204

voice_samples/Aiden/Aiden_fearful_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5740ad971f69c5411d947d953ebaa16f9cb52ff59860e6791d2e8a842085a9fa
+size 633644

voice_samples/Aiden/Aiden_fearful_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d7fb3f1033f0657deaef1f350d73f2b12b9214e688892e7f11c03bae04152b8c
+size 748844

voice_samples/Aiden/Aiden_happy_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1e6415614108668077361a5e91999cde522399612467dc5d9e3e4a2258a74b33
+size 714284

voice_samples/Aiden/Aiden_happy_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b5922fd7eb230578dc1217888b3e5d81a69a47103feaf05ca17a98279b61d59d
+size 645164

voice_samples/Aiden/Aiden_happy_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5de4b1dca1f983d55cae84e24d0389716ef3ca7adeee1f9bec765d6dc98771e0
+size 414764

voice_samples/Aiden/Aiden_mysterious_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:10390cb57b0bf860e4c5bd4c6121591147e7c15aae24046230f7364bd10a6f12
+size 668204

voice_samples/Aiden/Aiden_neutral.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a8513477a7b4bec91e25443df7383dedc94f1ae5949874992dfed8ff3401536
+size 741164

voice_samples/Aiden/Aiden_sad_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:cc260af84d04b27d7a6a1a0aebf4646734162482b55ac9c7c3919687a61af904
+size 748844

voice_samples/Aiden/Aiden_sad_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:46f32b95f1bf08f84ea5e7967fdac42543bf72b34608b7d1a167cb63e0360c5e
+size 660524

voice_samples/Aiden/Aiden_sad_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f47c613b8c1f2bc1c329b95438292c414f70560d1bce830b46f2d3fddd2ceaaa
+size 779564

voice_samples/Aiden/Aiden_serious_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a690ce17ab7280688e235817df37a36cd8a664b01f2476feffedf16d24fac0a9
+size 710444

voice_samples/Aiden/Aiden_serious_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:96dd7863b4aed7d1209c4a30e700d94ed876b0a5f17493a7fc82daf346167e08
+size 545324

voice_samples/Aiden/Aiden_warm_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c905111e287bc1476ed1a9e4ac387884cfd4c9065c8920e71f6ed873077ddd12
+size 587564

voice_samples/Aiden/Aiden_warm_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a7628542d761f3ce77b9b7379f8ebf7720808270227a85c51eb19470f1d11485
+size 649004

voice_samples/Aiden/Aiden_whisper_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c9b8a72eedb625f271fb506343e0168d449bb2cf9c4b342e2eec508b8201f238
+size 633644

voice_samples/Aiden/Aiden_whisper_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5c4cd50c4f75aec53b78b425510d5d791c9b52c6343deee95dbcef09441b9d7e
+size 633644

voice_samples/Dylan/Dylan_angry_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e56d7164cec6126afc1ed576f37f2ea2eab0191b0d6374b214d9a41fc5437c6
+size 806444

voice_samples/Dylan/Dylan_angry_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3edc107e70036bcf16f039ce28a088375bef131755361d65e19bdee58735261e
+size 817964

voice_samples/Dylan/Dylan_angry_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b6f58c753e656e88cf5efc53f9f442d79448d63bebb0de621560351fb38c537
+size 675884

voice_samples/Dylan/Dylan_fearful_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9f2edc56d185eb036732232c7f4a4eba086b95404c9a606afbcbce457a9cf4fc
+size 952364

voice_samples/Dylan/Dylan_fearful_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1ec4756b2bc8852a1aa2585f8268cbfe4e78866c7ac5a290f83ae72fe0545370
+size 568364

voice_samples/Dylan/Dylan_fearful_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fb69ebf60e05a634dd66625e080e2923a66049dd18639c428813729e0fc9a46e
+size 668204

voice_samples/Dylan/Dylan_happy_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1353ec840de7607751c4d682246dbcf8f3b62fca94755bfd99d5411d95a75f24
+size 794924

voice_samples/Dylan/Dylan_happy_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a047e04d469be327f0930de697622b0d2a94373fe25a5a000fbdec5ca2657e7c
+size 672044

voice_samples/Dylan/Dylan_happy_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1dba770a5c373fcea44c5c9b79608e114950c3c646a53efaa74eadc9bf02b76d
+size 468524

voice_samples/Dylan/Dylan_mysterious_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2804d903b17b9aba33dd35664bea2f2072dcde15a7f8ab1d3e67898e9f0b6f1f
+size 733484

voice_samples/Dylan/Dylan_neutral.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3723c6ae0184780b3bd3df0b10258e6e53beb5a57c250cabb9ee62bdb182a78
+size 748844

voice_samples/Dylan/Dylan_sad_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4a5248013da3702b48d3977d56b81559256f28546049fa63543d00c60b98b484
+size 821804

voice_samples/Dylan/Dylan_sad_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:068e5f64e4295eac208a482fc484e8c0564d51f78d94868f8b825578f1f1619b
+size 675884

voice_samples/Dylan/Dylan_sad_med.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:afe1fcc1d65dc76307854fe392b861d09080cbf3bd0cf694cb96efac352d274a
+size 752684

voice_samples/Dylan/Dylan_serious_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9cd1d73998fe02580c89e64d56119510083b2bc0a9175150c0405734ba9bc3f8
+size 733484

voice_samples/Dylan/Dylan_serious_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:985f71e242741bf32463e319ba98ecb64e01a2de818a0451b18b7ef97841b271
+size 614444

voice_samples/Dylan/Dylan_warm_high.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:19db9dc946adebb11ce82d700b553ba2ff4f5a1e517ce592003c8f1e7c3077d2
+size 622124

voice_samples/Dylan/Dylan_warm_low.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0c5c6ee69071525f06b1038709bb19767a99a057212a5cc43aee0948c3451b32
+size 629804