Upload 12 files

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+static/icons/icon-512.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,14 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY app.py .
+COPY static/ static/
+COPY data/ data/
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860", "--log-level", "info"]

README.md

@@ -0,0 +1,12 @@
+---
+title: VOMEBOOK Search
+emoji: 📚
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+pinned: false
+license: gpl-3.0
+short_description: TXT search and full-text preview
+---
+
+VOMEBOOK Search is a txt-focused search Space for CCRD and CW bundles.

app.py

@@ -0,0 +1,337 @@
+"""VOMEBOOK Search Space backend for txt bundles."""
+
+from __future__ import annotations
+
+import gzip
+import json
+import posixpath
+import random
+import re
+import time
+from contextlib import asynccontextmanager
+from datetime import datetime
+from pathlib import Path
+from typing import Optional
+from urllib.parse import quote
+
+from fastapi import FastAPI, Query
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.middleware.gzip import GZipMiddleware
+from fastapi.responses import HTMLResponse, JSONResponse, PlainTextResponse, StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from stream_zip import ZIP_32, stream_zip
+
+
+BASE_DIR = Path(__file__).resolve().parent
+DATA_PATH = BASE_DIR / "data/search_data.json.gz"
+FOLDER_TREE_PATH = BASE_DIR / "data/folder_tree.json.gz"
+FOLDER_BROWSER_PATH = BASE_DIR / "data/folder_browser.json.gz"
+FULLTEXT_MANIFEST_PATH = BASE_DIR / "data/fulltext_manifest.json.gz"
+
+records: list[dict] = []
+record_map: dict[str, dict] = {}
+sources: list[dict] = []
+source_counts: dict[str, int] = {}
+folder_tree_data: dict[str, list[dict]] = {}
+folder_browser_data: dict[str, dict[str, dict]] = {}
+source_records_map: dict[str, list[int]] = {}
+extension_counts: dict[str, int] = {}
+vocab_by_len: dict[int, dict[str, int]] = {}
+word_index: dict[str, set[int]] = {}
+did_you_mean_vocab: dict[str, int] = {}
+
+
+def tokenize(text: str) -> list[str]:
+    text_lower = (text or "").lower()
+    return list(set(re.findall(r"[a-z0-9]+|[\u4e00-\u9fff\u3400-\u4dbf]+", text_lower)))
+
+
+def edit_distance(s1: str, s2: str, max_dist: int = 2) -> int:
+    if abs(len(s1) - len(s2)) > max_dist:
+        return 999
+    prev = list(range(len(s2) + 1))
+    for i, c1 in enumerate(s1):
+        curr = [i + 1]
+        for j, c2 in enumerate(s2):
+            cost = 0 if c1 == c2 else 1
+            curr.append(min(prev[j + 1] + 1, curr[j] + 1, prev[j] + cost))
+        if min(curr) > max_dist:
+            return 999
+        prev = curr
+    return prev[-1]
+
+
+def load_json_gz(path: Path):
+    return json.loads(gzip.decompress(path.read_bytes()).decode("utf-8"))
+
+
+def build_indexes() -> None:
+    global word_index, did_you_mean_vocab, vocab_by_len, source_records_map, extension_counts
+    word_index = {}
+    did_you_mean_vocab = {}
+    vocab_by_len = {}
+    source_records_map = {}
+    extension_counts = {}
+    for idx, rec in enumerate(records):
+        source_records_map.setdefault(rec["source"], []).append(idx)
+        extension_counts[rec["extension"]] = extension_counts.get(rec["extension"], 0) + 1
+        search_text = " ".join([rec["display_name"], rec["display_rel_path"], rec["source_name"]])
+        tokens = tokenize(search_text)
+        rec["_search_text"] = search_text.lower()
+        for token in tokens:
+            word_index.setdefault(token, set()).add(idx)
+            did_you_mean_vocab[token] = did_you_mean_vocab.get(token, 0) + 1
+    for token, freq in did_you_mean_vocab.items():
+        vocab_by_len.setdefault(len(token), {})[token] = freq
+
+
+def load_data() -> None:
+    global records, record_map, sources, source_counts, folder_tree_data, folder_browser_data
+    start = time.time()
+    payload = load_json_gz(DATA_PATH)
+    records = payload.get("records", [])
+    sources = payload.get("sources", [])
+    source_counts = {item["slug"]: item.get("count", 0) for item in sources}
+    record_map = {rec["doc_id"]: rec for rec in records}
+    folder_tree_data = load_json_gz(FOLDER_TREE_PATH)
+    folder_browser_data = load_json_gz(FOLDER_BROWSER_PATH)
+    build_indexes()
+    print(f"loaded {len(records)} txt records in {time.time() - start:.2f}s")
+
+
+def score_record(idx: int, query_tokens: list[str]) -> int:
+    score = 0
+    text = records[idx]["_search_text"]
+    for token in query_tokens:
+        if token in text:
+            score += 3
+    return score
+
+
+def apply_filters(indices: list[int], sources_filter=None, folders=None, min_size=None, max_size=None):
+    result = []
+    for idx in indices:
+        rec = records[idx]
+        if sources_filter and rec["source"] not in sources_filter:
+            continue
+        if folders:
+            rel_dir = "/".join(rec.get("display_dirs", []))
+            matched = any(rel_dir == folder or rel_dir.startswith(folder + "/") for folder in folders)
+            if not matched:
+                continue
+        size = rec.get("size") or 0
+        if min_size is not None and size < min_size:
+            continue
+        if max_size is not None and size > max_size:
+            continue
+        result.append(idx)
+    return result
+
+
+def trim_record(rec: dict) -> dict:
+    return {
+        "doc_id": rec["doc_id"],
+        "Source": rec["source"],
+        "SourceName": rec["source_name"],
+        "File": rec["display_name"],
+        "Extension": rec["extension"],
+        "Folder": rec["display_dirs"],
+        "DisplayPath": rec["display_rel_path"],
+        "Size": rec["size"],
+        "HasTxt": True,
+    }
+
+
+def search(q="", sources_filter=None, folders=None, min_size=None, max_size=None, page=1, page_size=100, sort="relevance", exact=False):
+    q = q.strip()
+    if not q:
+        indices = list(range(len(records)))
+        filtered = apply_filters(indices, sources_filter, folders, min_size, max_size)
+    else:
+        tokens = tokenize(q)
+        if exact:
+            indices = [idx for idx, rec in enumerate(records) if q.lower() in rec["_search_text"]]
+        else:
+            matched = set()
+            for token in tokens:
+                if token in word_index:
+                    matched.update(word_index[token])
+                    continue
+                tok_len = len(token)
+                for delta in (-2, -1, 0, 1, 2):
+                    for vocab_word in vocab_by_len.get(tok_len + delta, {}):
+                        if edit_distance(token, vocab_word) <= 2:
+                            matched.update(word_index.get(vocab_word, set()))
+                            if len(matched) > 5000:
+                                break
+            indices = list(matched)
+        filtered = apply_filters(indices, sources_filter, folders, min_size, max_size)
+        if sort == "relevance":
+            filtered.sort(key=lambda idx: (-score_record(idx, tokens), records[idx]["display_rel_path"].lower()))
+
+    if sort == "name":
+        filtered.sort(key=lambda idx: records[idx]["display_rel_path"].lower())
+    elif sort == "size":
+        filtered.sort(key=lambda idx: (-records[idx].get("size", 0), records[idx]["display_rel_path"].lower()))
+
+    total = len(filtered)
+    start = (page - 1) * page_size
+    result_items = [trim_record(records[idx]) for idx in filtered[start:start + page_size]]
+    return {"results": result_items, "total": total, "page": page, "page_size": page_size, "did_you_mean": None}
+
+
+def get_doc_storage_path(doc: dict) -> Path:
+    return BASE_DIR / doc["storage_root"] / doc["storage_rel_path"]
+
+
+def get_folder_contents(source_slug: str, path: str) -> dict:
+    source_browser = folder_browser_data.get(source_slug, {})
+    if path in source_browser:
+        entry = dict(source_browser[path])
+        entry["current_path"] = path
+        return entry
+    return {"folders": [], "files": [], "current_path": path}
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    load_data()
+    yield
+
+
+app = FastAPI(title="VOMEBOOK Search", version="1.0", lifespan=lifespan)
+app.add_middleware(GZipMiddleware, minimum_size=500)
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
+
+
+class SearchRequest(BaseModel):
+    q: str = ""
+    sources: Optional[list[str]] = None
+    folders: Optional[list[str]] = None
+    min_size: Optional[int] = None
+    max_size: Optional[int] = None
+    page: int = 1
+    page_size: int = 100
+    sort: str = "relevance"
+    exact: bool = False
+
+
+class ZipRequest(BaseModel):
+    doc_ids: list[str] = []
+
+
+@app.post("/api/search")
+def api_search(body: SearchRequest):
+    return JSONResponse(search(body.q, body.sources, body.folders, body.min_size, body.max_size, body.page, body.page_size, body.sort, body.exact))
+
+
+@app.post("/api/search/{source_slug}")
+def api_search_source(source_slug: str, body: SearchRequest):
+    if source_slug not in source_counts:
+        return JSONResponse({"error": "source not found", "results": [], "total": 0}, status_code=404)
+    return JSONResponse(search(body.q, [source_slug], body.folders, body.min_size, body.max_size, body.page, body.page_size, body.sort, body.exact))
+
+
+@app.get("/api/sources")
+def api_sources():
+    return JSONResponse(sources)
+
+
+@app.get("/api/extensions")
+def api_extensions(source: Optional[str] = Query(default=None)):
+    pool = [records[idx] for idx in source_records_map.get(source, [])] if source else records
+    counts = {}
+    for rec in pool:
+        counts[rec["extension"]] = counts.get(rec["extension"], 0) + 1
+    return JSONResponse([{"name": ext, "count": count} for ext, count in sorted(counts.items())])
+
+
+@app.get("/api/folders/{source_slug}")
+def api_folders(source_slug: str):
+    return JSONResponse(folder_tree_data.get(source_slug, []))
+
+
+@app.get("/api/folders/{source_slug}/contents")
+def api_folder_contents(source_slug: str, path: str = Query(default="")):
+    return JSONResponse(get_folder_contents(source_slug, path))
+
+
+@app.get("/api/random")
+def api_random(source: Optional[str] = Query(default=None)):
+    pool = [records[idx] for idx in source_records_map.get(source, [])] if source else records
+    if not pool:
+        return JSONResponse({"error": "no record"}, status_code=404)
+    return JSONResponse(trim_record(random.choice(pool)))
+
+
+@app.get("/api/preview/{doc_id}")
+def api_preview(doc_id: str):
+    rec = record_map.get(doc_id)
+    if not rec:
+        return JSONResponse({"error": "not found"}, status_code=404)
+    text = get_doc_storage_path(rec).read_text(encoding="utf-8", errors="ignore")
+    return JSONResponse({"doc_id": doc_id, "title": rec["display_name"], "path": rec["display_rel_path"], "source": rec["source_name"], "text": text})
+
+
+@app.get("/api/download/{doc_id}")
+def api_download(doc_id: str):
+    rec = record_map.get(doc_id)
+    if not rec:
+        return JSONResponse({"error": "not found"}, status_code=404)
+    file_path = get_doc_storage_path(rec)
+    encoded_filename = quote(f"{rec['display_name']}.txt", safe="")
+    return StreamingResponse(
+        iter([file_path.read_bytes()]),
+        media_type="text/plain; charset=utf-8",
+        headers={"Content-Disposition": f"attachment; filename*=UTF-8''{encoded_filename}"},
+    )
+
+
+@app.post("/api/zip")
+def api_zip(req: ZipRequest):
+    valid = []
+    for doc_id in req.doc_ids[:500]:
+        rec = record_map.get(doc_id)
+        if not rec:
+            continue
+        valid.append((rec["display_rel_path"], get_doc_storage_path(rec).read_bytes()))
+    if not valid:
+        return JSONResponse({"error": "no files"}, status_code=400)
+
+    modified_at = datetime.now()
+
+    def members():
+        for display_path, data in valid:
+            yield (display_path.encode("utf-8"), modified_at, ZIP_32, data)
+
+    return StreamingResponse(
+        stream_zip(members()),
+        media_type="application/zip",
+        headers={"Content-Disposition": "attachment; filename=vomebook_batch.zip"},
+    )
+
+
+@app.get("/api/fulltext-manifest")
+def api_fulltext_manifest():
+    return JSONResponse(load_json_gz(FULLTEXT_MANIFEST_PATH))
+
+
+app.mount("/data", StaticFiles(directory=str(BASE_DIR / "data")), name="data")
+app.mount("/static", StaticFiles(directory=str(BASE_DIR / "static"), html=True), name="static")
+app.mount("/icons", StaticFiles(directory=str(BASE_DIR / "static/icons")), name="icons")
+
+
+@app.get("/manifest.json")
+def serve_manifest():
+    return JSONResponse(json.loads((BASE_DIR / "static/manifest.json").read_text(encoding="utf-8")))
+
+
+@app.get("/sw.js")
+def serve_sw():
+    return PlainTextResponse((BASE_DIR / "static/sw.js").read_text(encoding="utf-8"), media_type="application/javascript")
+
+
+@app.get("/{rest_of_path:path}")
+async def serve_spa(rest_of_path: str):
+    return HTMLResponse((BASE_DIR / "static/index.html").read_text(encoding="utf-8"))

requirements.txt

@@ -0,0 +1,3 @@
+fastapi==0.115.0
+uvicorn==0.30.6
+stream-zip==0.0.83

static/app.js

@@ -0,0 +1,798 @@
+const STATE = {
+  mode: "global",
+  source: null,
+  query: "",
+  page: 1,
+  pageSize: 100,
+  total: 0,
+  results: [],
+  sources: [],
+  sourceMap: {},
+  folderTree: [],
+  folderSelections: [],
+  selectedSources: [],
+  minSize: null,
+  maxSize: null,
+  exact: false,
+  fulltext: false,
+  fulltextManifest: null,
+  fulltextLoaded: {},
+  historyEnabled: true,
+  leftSidebarOpen: true,
+  rightSidebarOpen: false,
+  isDark: true,
+  isLoading: false,
+  multiSelect: false,
+  selectedIds: new Set(),
+};
+
+const DOM = {};
+const HISTORY_KEY = "vomebook_search_history";
+
+function $(selector) {
+  return document.querySelector(selector);
+}
+
+function escapeHTML(value) {
+  return String(value).replace(/[&<>"']/g, function(ch) {
+    return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[ch];
+  });
+}
+
+function tokenize(text) {
+  return Array.from(new Set(String(text || "").toLowerCase().match(/[a-z0-9]+|[\u4e00-\u9fff\u3400-\u4dbf]+/g) || []));
+}
+
+function formatSize(bytes) {
+  if (!bytes) return "";
+  if (bytes < 1024) return bytes + " B";
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1).replace(/\.0$/, "") + " KB";
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1).replace(/\.0$/, "") + " MB";
+  return (bytes / 1073741824).toFixed(2).replace(/\.00$/, "") + " GB";
+}
+
+function bytesFromInput(value, unit) {
+  const parsed = parseFloat(value);
+  if (Number.isNaN(parsed) || parsed < 0) return null;
+  if (unit === "KB") return Math.round(parsed * 1024);
+  if (unit === "MB") return Math.round(parsed * 1048576);
+  if (unit === "GB") return Math.round(parsed * 1073741824);
+  return Math.round(parsed);
+}
+
+function buildPath(folder, file) {
+  return folder.length ? folder.join("/") + "/" + file : file;
+}
+
+const API = {
+  async getSources() {
+    const resp = await fetch("/api/sources");
+    return resp.json();
+  },
+  async search(body, sourceSlug) {
+    const url = sourceSlug ? `/api/search/${sourceSlug}` : "/api/search";
+    const resp = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    return resp.json();
+  },
+  async getFolders(sourceSlug) {
+    const resp = await fetch(`/api/folders/${sourceSlug}`);
+    return resp.json();
+  },
+  async getContents(sourceSlug, path) {
+    const qs = path ? `?path=${encodeURIComponent(path)}` : "";
+    const resp = await fetch(`/api/folders/${sourceSlug}/contents${qs}`);
+    return resp.json();
+  },
+  async preview(docId) {
+    const resp = await fetch(`/api/preview/${encodeURIComponent(docId)}`);
+    return resp.json();
+  },
+  async random(sourceSlug) {
+    const url = sourceSlug ? `/api/random?source=${encodeURIComponent(sourceSlug)}` : "/api/random";
+    const resp = await fetch(url);
+    return resp.json();
+  },
+  async fulltextManifest() {
+    const resp = await fetch("/api/fulltext-manifest");
+    return resp.json();
+  },
+  async fulltextIndex(path) {
+    const resp = await fetch(`/data/${path}`);
+    const blob = await resp.blob();
+    const ds = new DecompressionStream("gzip");
+    const stream = blob.stream().pipeThrough(ds);
+    const text = await new Response(stream).text();
+    return JSON.parse(text);
+  },
+};
+
+function cacheDom() {
+  DOM.headerTitle = $("#header-title");
+  DOM.headerLogo = $("#header-logo");
+  DOM.searchInput = $("#search-input");
+  DOM.searchHistoryDropdown = $("#search-history-dropdown");
+  DOM.hamburgerBtn = $("#hamburger-btn");
+  DOM.settingsBtn = $("#settings-btn");
+  DOM.themeBtn = $("#theme-btn");
+  DOM.leftSidebar = $("#left-sidebar");
+  DOM.rightSidebar = $("#right-sidebar");
+  DOM.sidebarTitle = $("#sidebar-title");
+  DOM.sidebarContent = $("#sidebar-content");
+  DOM.resultCount = $("#result-count");
+  DOM.resultsContainer = $("#results-container");
+  DOM.resultsList = $("#results-list");
+  DOM.resultsLoading = $("#results-loading");
+  DOM.emptyState = $("#empty-state");
+  DOM.emptyDesc = $("#empty-desc");
+  DOM.emptyRandomBtn = $("#empty-random-btn");
+  DOM.loadInfo = $("#load-info");
+  DOM.loadedCount = $("#loaded-count");
+  DOM.totalCount = $("#total-count");
+  DOM.didYouMean = $("#did-you-mean");
+  DOM.clearFiltersBtn = $("#clear-filters-btn");
+  DOM.sortSelect = $("#sort-select");
+  DOM.previewPanel = $("#preview-panel");
+  DOM.closeFiltersBtn = $("#close-filters-btn");
+  DOM.fulltextToggle = $("#fulltext-toggle");
+  DOM.historyToggle = $("#history-toggle");
+  DOM.exactToggle = $("#exact-search-toggle");
+  DOM.filterSourceList = $("#filter-source-list");
+  DOM.filterFolderTree = $("#filter-folder-tree");
+  DOM.filterMinSize = $("#filter-min-size");
+  DOM.filterMaxSize = $("#filter-max-size");
+  DOM.filterMinUnit = $("#filter-min-unit");
+  DOM.filterMaxUnit = $("#filter-max-unit");
+  DOM.folderSelectAll = $("#folder-select-all");
+  DOM.folderDeselectAll = $("#folder-deselect-all");
+  DOM.multiToggleLabel = $("#multi-toggle-label");
+  DOM.multiSelectToggle = $("#multi-select-toggle");
+  DOM.multiActionBar = $("#multi-action-bar");
+  DOM.multiSelectAll = $("#multi-select-all");
+  DOM.multiDeselect = $("#multi-deselect");
+  DOM.multiBatchDownload = $("#multi-batch-download");
+  DOM.multiZipDownload = $("#multi-zip-download");
+  DOM.multiSelectedCount = $("#multi-selected-count");
+  DOM.overlay = $("#overlay");
+  DOM.toast = $("#toast");
+}
+
+function parseRoute() {
+  const path = window.location.pathname.replace(/^\/+|\/+$/g, "");
+  if (!path) return { mode: "global", source: null };
+  return { mode: "source", source: decodeURIComponent(path) };
+}
+
+function syncRoute() {
+  const route = parseRoute();
+  STATE.mode = route.mode;
+  STATE.source = route.source;
+  if (STATE.source) {
+    DOM.sidebarTitle.textContent = STATE.source;
+  } else {
+    DOM.sidebarTitle.textContent = "数据包";
+  }
+}
+
+function navigateToSource(sourceSlug) {
+  history.pushState(null, "", `/${encodeURIComponent(sourceSlug)}`);
+  STATE.page = 1;
+  STATE.folderSelections = [];
+  syncRoute();
+  renderSidebar();
+  renderFolderTree();
+  doSearch();
+}
+
+function navigateHome() {
+  history.pushState(null, "", "/");
+  STATE.page = 1;
+  STATE.folderSelections = [];
+  syncRoute();
+  renderSidebar();
+  renderFolderTree();
+  doSearch();
+}
+
+function getSelectedSourcesForSearch() {
+  if (STATE.source) return [STATE.source];
+  if (STATE.selectedSources.length) return STATE.selectedSources.slice();
+  return [];
+}
+
+function updateStatus() {
+  DOM.resultCount.textContent = STATE.total ? `共 ${STATE.total.toLocaleString()} 条结果` : "";
+  DOM.loadedCount.textContent = STATE.results.length.toLocaleString();
+  DOM.totalCount.textContent = STATE.total.toLocaleString();
+  DOM.loadInfo.style.display = STATE.total ? "" : "none";
+  DOM.multiToggleLabel.style.display = STATE.total ? "" : "none";
+  const hasFilter = STATE.folderSelections.length || STATE.selectedSources.length || STATE.minSize !== null || STATE.maxSize !== null;
+  DOM.clearFiltersBtn.style.display = hasFilter ? "" : "none";
+}
+
+function showToast(message, duration = 2000) {
+  DOM.toast.textContent = message;
+  DOM.toast.style.display = "";
+  clearTimeout(showToast._timer);
+  showToast._timer = setTimeout(() => {
+    DOM.toast.style.display = "none";
+  }, duration);
+}
+
+function getHistory() {
+  try {
+    return JSON.parse(localStorage.getItem(HISTORY_KEY)) || [];
+  } catch (_error) {
+    return [];
+  }
+}
+
+function saveHistory(items) {
+  localStorage.setItem(HISTORY_KEY, JSON.stringify(items.slice(0, 20)));
+}
+
+function addHistory(query) {
+  if (!STATE.historyEnabled || !query) return;
+  const items = getHistory().filter((item) => item !== query);
+  items.unshift(query);
+  saveHistory(items);
+}
+
+function renderHistoryDropdown() {
+  const items = getHistory();
+  if (!items.length) {
+    DOM.searchHistoryDropdown.style.display = "none";
+    return;
+  }
+  DOM.searchHistoryDropdown.innerHTML = items.map((item) => `<div class="history-item" data-query="${escapeHTML(item)}"><span class="history-text">${escapeHTML(item)}</span></div>`).join("");
+  DOM.searchHistoryDropdown.style.display = "";
+}
+
+function applyTheme() {
+  document.body.classList.toggle("light", !STATE.isDark);
+}
+
+async function ensureFulltextLoaded() {
+  if (!STATE.fulltextManifest) {
+    STATE.fulltextManifest = await API.fulltextManifest();
+  }
+  const sourceSlugs = STATE.source ? [STATE.source] : (STATE.selectedSources.length ? STATE.selectedSources : STATE.sources.map((source) => source.slug));
+  for (const slug of sourceSlugs) {
+    if (STATE.fulltextLoaded[slug]) continue;
+    const item = (STATE.fulltextManifest.sources || []).find((source) => source.slug === slug);
+    if (!item) continue;
+    showToast(`加载全文索引: ${slug}`);
+    STATE.fulltextLoaded[slug] = await API.fulltextIndex(item.path);
+  }
+}
+
+function scoreFulltextDoc(docId, payload, queryTokens, exactQuery) {
+  if (exactQuery) {
+    const snippet = (payload.snippets[docId] || "").toLowerCase();
+    return snippet.includes(exactQuery.toLowerCase()) ? 100 : 1;
+  }
+  let score = 0;
+  for (const token of queryTokens) {
+    if ((payload.snippets[docId] || "").toLowerCase().includes(token)) score += 4;
+    if ((payload.docs[docId]?.display_name || "").toLowerCase().includes(token)) score += 1;
+  }
+  return score;
+}
+
+async function fulltextSearch() {
+  await ensureFulltextLoaded();
+  const query = STATE.query.trim();
+  const queryTokens = tokenize(query);
+  const sourceSlugs = STATE.source ? [STATE.source] : (STATE.selectedSources.length ? STATE.selectedSources : STATE.sources.map((source) => source.slug));
+  let results = [];
+  for (const slug of sourceSlugs) {
+    const payload = STATE.fulltextLoaded[slug];
+    if (!payload) continue;
+    let matchedIds = null;
+    if (STATE.exact) {
+      matchedIds = Object.keys(payload.docs).filter((docId) => {
+        const snippet = (payload.snippets[docId] || "") + " " + (payload.docs[docId]?.display_name || "");
+        return snippet.toLowerCase().includes(query.toLowerCase());
+      });
+    } else {
+      for (const token of queryTokens) {
+        const docIds = payload.index[token] || [];
+        const set = new Set(docIds);
+        if (matchedIds === null) matchedIds = set;
+        else matchedIds = new Set(Array.from(matchedIds).filter((docId) => set.has(docId)));
+      }
+      matchedIds = Array.from(matchedIds || []);
+    }
+    for (const docId of matchedIds) {
+      const meta = payload.docs[docId];
+      const folderParts = meta.display_rel_path.split("/");
+      const fileName = folderParts.pop();
+      const displayName = fileName.replace(/\.txt$/i, "");
+      results.push({
+        doc_id: docId,
+        Source: slug,
+        SourceName: STATE.sourceMap[slug]?.name || slug,
+        File: displayName,
+        Extension: "txt",
+        Folder: folderParts,
+        DisplayPath: meta.display_rel_path,
+        Size: meta.size,
+        HasTxt: true,
+        snippet: payload.snippets[docId] || "",
+        _score: scoreFulltextDoc(docId, payload, queryTokens, query),
+      });
+    }
+  }
+  if (STATE.folderSelections.length) {
+    results = results.filter((item) => {
+      const folder = item.Folder.join("/");
+      return STATE.folderSelections.some((selected) => folder === selected || folder.startsWith(selected + "/"));
+    });
+  }
+  if (STATE.minSize !== null) results = results.filter((item) => item.Size >= STATE.minSize);
+  if (STATE.maxSize !== null) results = results.filter((item) => item.Size <= STATE.maxSize);
+  if (DOM.sortSelect.value === "name") results.sort((a, b) => a.DisplayPath.localeCompare(b.DisplayPath, "zh"));
+  else if (DOM.sortSelect.value === "size") results.sort((a, b) => (b.Size - a.Size) || a.DisplayPath.localeCompare(b.DisplayPath, "zh"));
+  else results.sort((a, b) => (b._score - a._score) || a.DisplayPath.localeCompare(b.DisplayPath, "zh"));
+  STATE.total = results.length;
+  STATE.results = results.slice(0, STATE.page * STATE.pageSize);
+}
+
+async function pathSearch() {
+  const body = {
+    q: STATE.query,
+    sources: getSelectedSourcesForSearch(),
+    folders: STATE.folderSelections,
+    min_size: STATE.minSize,
+    max_size: STATE.maxSize,
+    page: 1,
+    page_size: STATE.page * STATE.pageSize,
+    sort: DOM.sortSelect.value,
+    exact: STATE.exact,
+  };
+  const data = await API.search(body, STATE.source);
+  STATE.total = data.total || 0;
+  STATE.results = data.results || [];
+}
+
+async function doSearch() {
+  STATE.isLoading = true;
+  DOM.resultsLoading.style.display = "flex";
+  DOM.previewPanel.style.display = "none";
+  try {
+    if (STATE.fulltext && STATE.query.trim()) {
+      await fulltextSearch();
+    } else {
+      await pathSearch();
+    }
+    renderResults();
+    updateStatus();
+  } catch (error) {
+    console.error(error);
+    showToast("搜索失败");
+  } finally {
+    STATE.isLoading = false;
+    DOM.resultsLoading.style.display = "none";
+  }
+}
+
+function resultPathHtml(item) {
+  const sourcePrefix = `<span class="path-folder" data-source="${escapeHTML(item.Source)}" data-folder="">${escapeHTML(item.SourceName)}</span>`;
+  const rest = (item.Folder || []).map((part, index) => {
+    const path = item.Folder.slice(0, index + 1).join("/");
+    return `<span class="path-sep">/</span><span class="path-folder" data-source="${escapeHTML(item.Source)}" data-folder="${escapeHTML(path)}">${escapeHTML(part)}</span>`;
+  }).join("");
+  return sourcePrefix + rest;
+}
+
+function renderResults() {
+  if (!STATE.results.length) {
+    DOM.resultsList.innerHTML = "";
+    DOM.emptyState.style.display = "flex";
+    DOM.emptyDesc.textContent = STATE.query ? `没有找到与“${STATE.query}”相关的结果` : "暂无数据";
+    DOM.multiActionBar.style.display = "none";
+    return;
+  }
+  DOM.emptyState.style.display = "none";
+  DOM.resultsList.innerHTML = STATE.results.map((item) => {
+    const fullName = `${item.File}.txt`;
+    const snippetHtml = item.snippet ? `<div class="result-snippet">${escapeHTML(item.snippet)}</div>` : "";
+    return `
+      <div class="result-item" data-doc-id="${escapeHTML(item.doc_id)}">
+        <input type="checkbox" class="result-checkbox" data-doc-id="${escapeHTML(item.doc_id)}" ${STATE.selectedIds.has(item.doc_id) ? "checked" : ""}>
+        <div class="result-file-icon">TXT</div>
+        <div class="result-info">
+          <div class="result-title">${escapeHTML(item.File)}<span style="opacity:0.5;font-size:12px">.txt</span></div>
+          <div class="result-path">${resultPathHtml(item)}</div>
+          <div class="result-meta"><span class="result-size">${escapeHTML(formatSize(item.Size))}</span></div>
+          ${snippetHtml}
+        </div>
+        <div class="result-actions">
+          <button class="result-action-btn" data-action="preview" data-doc-id="${escapeHTML(item.doc_id)}">在线预览</button>
+          <a class="result-action-btn primary" href="/api/download/${encodeURIComponent(item.doc_id)}">下载</a>
+        </div>
+      </div>`;
+  }).join("");
+  DOM.multiActionBar.style.display = STATE.multiSelect ? "" : "none";
+}
+
+async function openPreview(docId, keyword) {
+  try {
+    const data = await API.preview(docId);
+    if (data.error) {
+      showToast("预览失败");
+      return;
+    }
+    let text = escapeHTML(data.text || "");
+    if (keyword) {
+      const tokens = tokenize(keyword).filter(Boolean);
+      for (const token of tokens) {
+        text = text.replace(new RegExp(token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi"), (m) => `<mark>${m}</mark>`);
+      }
+    }
+    DOM.previewPanel.innerHTML = `
+      <div class="preview-header">
+        <div class="preview-title">${escapeHTML(data.title)}</div>
+        <div class="preview-path">${escapeHTML(data.source)} / ${escapeHTML(data.path)}</div>
+      </div>
+      <pre class="preview-body">${text}</pre>`;
+    DOM.previewPanel.style.display = "block";
+    DOM.previewPanel.scrollIntoView({ behavior: "smooth", block: "start" });
+  } catch (error) {
+    console.error(error);
+    showToast("预览失败");
+  }
+}
+
+function renderCheckboxList(container, items, selected, onChange) {
+  container.innerHTML = items.map((item) => `
+    <label class="filter-checkbox-item">
+      <input type="checkbox" value="${escapeHTML(item.key)}" ${selected.includes(item.key) ? "checked" : ""}>
+      <span>${escapeHTML(item.label)}</span>
+      <span class="checkbox-count">${(item.count || 0).toLocaleString()}</span>
+    </label>`).join("");
+  container.querySelectorAll("input").forEach((input) => {
+    input.addEventListener("change", () => {
+      const values = Array.from(container.querySelectorAll("input:checked")).map((item) => item.value);
+      onChange(values);
+    });
+  });
+}
+
+async function renderSourcesFilter() {
+  renderCheckboxList(DOM.filterSourceList, STATE.sources.map((source) => ({ key: source.slug, label: source.name, count: source.count })), STATE.selectedSources, (values) => {
+    STATE.selectedSources = values;
+    STATE.page = 1;
+    doSearch();
+  });
+}
+
+function flattenNodes(nodes, into) {
+  for (const node of nodes) {
+    if (!node.isRoot && node.path) into.push(node.path);
+    flattenNodes(node.children || [], into);
+  }
+}
+
+function renderFolderNodes(container, nodes, depth) {
+  for (const node of nodes) {
+    const row = document.createElement("div");
+    row.className = "filter-folder-item";
+    row.style.setProperty("--fdepth", depth);
+    const checked = STATE.folderSelections.includes(node.path);
+    row.innerHTML = `<span style="width:16px;display:inline-block"></span><input type="checkbox" value="${escapeHTML(node.path)}" ${checked ? "checked" : ""}><span class="folder-name">${escapeHTML(node.name)}</span><span class="folder-count">${(node.count || 0).toLocaleString()}</span>`;
+    const checkbox = row.querySelector("input");
+    checkbox.addEventListener("change", () => {
+      if (checkbox.checked) {
+        if (!STATE.folderSelections.includes(node.path)) STATE.folderSelections.push(node.path);
+      } else {
+        STATE.folderSelections = STATE.folderSelections.filter((path) => path !== node.path);
+      }
+      STATE.page = 1;
+      doSearch();
+    });
+    container.appendChild(row);
+    if (node.children && node.children.length) renderFolderNodes(container, node.children, depth + 1);
+  }
+}
+
+async function renderFolderTree() {
+  DOM.filterFolderTree.innerHTML = "";
+  if (!STATE.source) {
+    DOM.filterFolderTree.innerHTML = '<div style="font-size:12px;opacity:0.6">进入单仓库后可按路径过滤</div>';
+    return;
+  }
+  STATE.folderTree = await API.getFolders(STATE.source);
+  renderFolderNodes(DOM.filterFolderTree, STATE.folderTree, 0);
+}
+
+async function renderSidebar() {
+  if (!STATE.source) {
+    DOM.sidebarTitle.textContent = "数据包";
+    DOM.sidebarContent.innerHTML = STATE.sources.map((source) => `<div class="repo-list-item" data-source="${escapeHTML(source.slug)}"><span class="repo-name">${escapeHTML(source.name)}</span><span class="repo-count">${(source.count || 0).toLocaleString()}</span></div>`).join("");
+    return;
+  }
+  DOM.sidebarTitle.textContent = STATE.sourceMap[STATE.source]?.name || STATE.source;
+  const data = await API.getContents(STATE.source, "");
+  let html = '<div class="back-to-global" id="back-home">返回全局搜索</div>';
+  html += (data.folders || []).map((item) => `<div class="browser-item" data-folder-open="${escapeHTML(item.path)}">📁 <span class="browser-name">${escapeHTML(item.name)}</span><span class="browser-count">${(item.count || 0).toLocaleString()}</span></div>`).join("");
+  html += (data.files || []).map((item) => `<div class="browser-item" data-doc-id="${escapeHTML(item.doc_id)}">📄 <span class="browser-name">${escapeHTML(item.name)}.txt</span><span class="browser-size">${escapeHTML(formatSize(item.size))}</span></div>`).join("");
+  DOM.sidebarContent.innerHTML = html;
+}
+
+async function openFolder(path) {
+  const data = await API.getContents(STATE.source, path);
+  const parts = path ? path.split("/") : [];
+  let html = '<div class="back-to-global" id="back-home">返回全局搜索</div>';
+  html += `<div class="sidebar-breadcrumb"><span class="crumb-item" data-folder-nav="">根目录</span>${parts.map((part, index) => `<span class="crumb-sep">/</span><span class="crumb-item" data-folder-nav="${escapeHTML(parts.slice(0, index + 1).join("/"))}">${escapeHTML(part)}</span>`).join("")}</div>`;
+  html += (data.folders || []).map((item) => `<div class="browser-item" data-folder-open="${escapeHTML(item.path)}">📁 <span class="browser-name">${escapeHTML(item.name)}</span><span class="browser-count">${(item.count || 0).toLocaleString()}</span></div>`).join("");
+  html += (data.files || []).map((item) => `<div class="browser-item" data-doc-id="${escapeHTML(item.doc_id)}">📄 <span class="browser-name">${escapeHTML(item.name)}.txt</span><span class="browser-size">${escapeHTML(formatSize(item.size))}</span></div>`).join("");
+  DOM.sidebarContent.innerHTML = html;
+}
+
+function updateSidebarVisibility() {
+  DOM.leftSidebar.classList.toggle("collapsed", !STATE.leftSidebarOpen);
+  DOM.rightSidebar.classList.toggle("collapsed", !STATE.rightSidebarOpen);
+  DOM.leftSidebar.classList.toggle("open", STATE.leftSidebarOpen);
+  DOM.rightSidebar.classList.toggle("open", STATE.rightSidebarOpen);
+  DOM.overlay.style.display = (STATE.leftSidebarOpen || STATE.rightSidebarOpen) ? "" : "none";
+}
+
+function clearFilters() {
+  STATE.folderSelections = [];
+  STATE.selectedSources = [];
+  STATE.minSize = null;
+  STATE.maxSize = null;
+  DOM.filterMinSize.value = "";
+  DOM.filterMaxSize.value = "";
+  DOM.filterMinUnit.value = "MB";
+  DOM.filterMaxUnit.value = "MB";
+  renderSourcesFilter();
+  renderFolderTree();
+  doSearch();
+}
+
+async function randomDoc() {
+  const data = await API.random(STATE.source);
+  if (!data.doc_id) {
+    showToast("暂无可用文档");
+    return;
+  }
+  openPreview(data.doc_id, "");
+}
+
+function updateMultiUi() {
+  STATE.multiSelect = DOM.multiSelectToggle.checked;
+  DOM.multiActionBar.style.display = STATE.multiSelect ? "" : "none";
+  if (!STATE.multiSelect) STATE.selectedIds.clear();
+  DOM.multiSelectedCount.textContent = STATE.selectedIds.size ? `已选 ${STATE.selectedIds.size} 项` : "";
+  renderResults();
+}
+
+function attachEvents() {
+  DOM.headerLogo.addEventListener("click", (event) => {
+    if (window.location.pathname !== "/") return;
+    event.preventDefault();
+    window.location.href = DOM.headerLogo.href;
+  });
+  DOM.hamburgerBtn.addEventListener("click", () => {
+    STATE.leftSidebarOpen = !STATE.leftSidebarOpen;
+    updateSidebarVisibility();
+  });
+  DOM.settingsBtn.addEventListener("click", () => {
+    STATE.rightSidebarOpen = !STATE.rightSidebarOpen;
+    updateSidebarVisibility();
+  });
+  DOM.closeFiltersBtn.addEventListener("click", () => {
+    STATE.rightSidebarOpen = false;
+    updateSidebarVisibility();
+  });
+  DOM.overlay.addEventListener("click", () => {
+    STATE.leftSidebarOpen = false;
+    STATE.rightSidebarOpen = false;
+    updateSidebarVisibility();
+  });
+  DOM.themeBtn.addEventListener("click", () => {
+    STATE.isDark = !STATE.isDark;
+    applyTheme();
+    localStorage.setItem("theme", STATE.isDark ? "dark" : "light");
+  });
+  DOM.searchInput.addEventListener("focus", renderHistoryDropdown);
+  DOM.searchInput.addEventListener("blur", () => setTimeout(() => { DOM.searchHistoryDropdown.style.display = "none"; }, 100));
+  DOM.searchHistoryDropdown.addEventListener("click", (event) => {
+    const item = event.target.closest("[data-query]");
+    if (!item) return;
+    DOM.searchInput.value = item.dataset.query;
+    STATE.query = item.dataset.query;
+    doSearch();
+  });
+  let timer = null;
+  DOM.searchInput.addEventListener("input", () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      STATE.query = DOM.searchInput.value.trim();
+      STATE.page = 1;
+      addHistory(STATE.query);
+      doSearch();
+    }, 250);
+  });
+  DOM.sortSelect.addEventListener("change", () => {
+    STATE.page = 1;
+    doSearch();
+  });
+  DOM.exactToggle.addEventListener("change", () => {
+    STATE.exact = DOM.exactToggle.checked;
+    STATE.page = 1;
+    doSearch();
+  });
+  DOM.historyToggle.addEventListener("change", () => {
+    STATE.historyEnabled = DOM.historyToggle.checked;
+    if (!STATE.historyEnabled) saveHistory([]);
+  });
+  DOM.fulltextToggle.addEventListener("change", async () => {
+    STATE.fulltext = DOM.fulltextToggle.checked;
+    DOM.searchInput.placeholder = STATE.fulltext ? "全文搜索 TXT 正文..." : "搜索 TXT 文件或路径...";
+    STATE.page = 1;
+    if (STATE.fulltext) await ensureFulltextLoaded();
+    doSearch();
+  });
+  DOM.clearFiltersBtn.addEventListener("click", clearFilters);
+  DOM.emptyRandomBtn.addEventListener("click", randomDoc);
+  DOM.filterMinSize.addEventListener("input", () => {
+    STATE.minSize = bytesFromInput(DOM.filterMinSize.value, DOM.filterMinUnit.value);
+    doSearch();
+  });
+  DOM.filterMaxSize.addEventListener("input", () => {
+    STATE.maxSize = bytesFromInput(DOM.filterMaxSize.value, DOM.filterMaxUnit.value);
+    doSearch();
+  });
+  DOM.filterMinUnit.addEventListener("change", () => {
+    STATE.minSize = bytesFromInput(DOM.filterMinSize.value, DOM.filterMinUnit.value);
+    doSearch();
+  });
+  DOM.filterMaxUnit.addEventListener("change", () => {
+    STATE.maxSize = bytesFromInput(DOM.filterMaxSize.value, DOM.filterMaxUnit.value);
+    doSearch();
+  });
+  DOM.folderSelectAll.addEventListener("click", () => {
+    const paths = [];
+    flattenNodes(STATE.folderTree, paths);
+    STATE.folderSelections = paths;
+    renderFolderTree();
+    doSearch();
+  });
+  DOM.folderDeselectAll.addEventListener("click", () => {
+    STATE.folderSelections = [];
+    renderFolderTree();
+    doSearch();
+  });
+  DOM.multiSelectToggle.addEventListener("change", updateMultiUi);
+  DOM.multiSelectAll.addEventListener("click", () => {
+    STATE.selectedIds = new Set(STATE.results.map((item) => item.doc_id));
+    updateMultiUi();
+  });
+  DOM.multiDeselect.addEventListener("click", () => {
+    STATE.selectedIds.clear();
+    updateMultiUi();
+  });
+  DOM.multiBatchDownload.addEventListener("click", () => {
+    const ids = Array.from(STATE.selectedIds);
+    if (!ids.length) {
+      showToast("未选中任何文件");
+      return;
+    }
+    ids.forEach((id, index) => setTimeout(() => { window.open(`/api/download/${encodeURIComponent(id)}`, "_blank"); }, index * 250));
+  });
+  DOM.multiZipDownload.addEventListener("click", async () => {
+    const ids = Array.from(STATE.selectedIds);
+    if (!ids.length) {
+      showToast("未选中任何文件");
+      return;
+    }
+    const resp = await fetch("/api/zip", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ doc_ids: ids }),
+    });
+    const blob = await resp.blob();
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = `vomebook_batch_${Date.now()}.zip`;
+    link.click();
+    URL.revokeObjectURL(link.href);
+  });
+  DOM.resultsList.addEventListener("click", async (event) => {
+    const checkbox = event.target.closest(".result-checkbox");
+    if (checkbox) {
+      const docId = checkbox.dataset.docId;
+      if (checkbox.checked) STATE.selectedIds.add(docId);
+      else STATE.selectedIds.delete(docId);
+      DOM.multiSelectedCount.textContent = STATE.selectedIds.size ? `已选 ${STATE.selectedIds.size} 项` : "";
+      return;
+    }
+    const action = event.target.closest("[data-action='preview']");
+    if (action) {
+      openPreview(action.dataset.docId, STATE.query);
+      return;
+    }
+    const folder = event.target.closest(".path-folder[data-folder]");
+    if (folder) {
+      const source = folder.dataset.source;
+      const path = folder.dataset.folder;
+      if (STATE.mode === "global" && source && !STATE.source) {
+        navigateToSource(source);
+        if (path) STATE.folderSelections = [path];
+      } else {
+        STATE.folderSelections = path ? [path] : [];
+      }
+      renderFolderTree();
+      doSearch();
+    }
+  });
+  DOM.sidebarContent.addEventListener("click", async (event) => {
+    const sourceItem = event.target.closest("[data-source]");
+    if (sourceItem) {
+      navigateToSource(sourceItem.dataset.source);
+      return;
+    }
+    const backHome = event.target.closest("#back-home");
+    if (backHome) {
+      navigateHome();
+      return;
+    }
+    const folderOpen = event.target.closest("[data-folder-open]");
+    if (folderOpen) {
+      openFolder(folderOpen.dataset.folderOpen);
+      return;
+    }
+    const folderNav = event.target.closest("[data-folder-nav]");
+    if (folderNav) {
+      openFolder(folderNav.dataset.folderNav);
+      return;
+    }
+    const docItem = event.target.closest("[data-doc-id]");
+    if (docItem) {
+      openPreview(docItem.dataset.docId, STATE.query);
+    }
+  });
+  DOM.resultsContainer.addEventListener("scroll", () => {
+    const nearBottom = DOM.resultsContainer.scrollTop + DOM.resultsContainer.clientHeight >= DOM.resultsContainer.scrollHeight - 200;
+    if (nearBottom && STATE.results.length < STATE.total && !STATE.isLoading) {
+      STATE.page += 1;
+      doSearch();
+    }
+  });
+  document.addEventListener("keydown", (event) => {
+    if (event.key === "/" && document.activeElement !== DOM.searchInput) {
+      event.preventDefault();
+      DOM.searchInput.focus();
+      DOM.searchInput.select();
+    }
+  });
+  window.addEventListener("popstate", async () => {
+    syncRoute();
+    await renderSidebar();
+    await renderFolderTree();
+    doSearch();
+  });
+}
+
+async function init() {
+  cacheDom();
+  STATE.isDark = localStorage.getItem("theme") !== "light";
+  applyTheme();
+  syncRoute();
+  STATE.sources = await API.getSources();
+  STATE.sourceMap = Object.fromEntries(STATE.sources.map((source) => [source.slug, source]));
+  await renderSourcesFilter();
+  await renderSidebar();
+  await renderFolderTree();
+  attachEvents();
+  updateSidebarVisibility();
+  doSearch();
+}
+
+document.addEventListener("DOMContentLoaded", init);

static/index.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+<title>VOMEBOOK Search</title>
+<link rel="manifest" href="/manifest.json">
+<meta name="theme-color" content="#1a1c1e">
+<link rel="apple-touch-icon" href="/icons/icon-192.png">
+<link rel="icon" type="image/png" sizes="192x192" href="/icons/icon-192.png">
+<link rel="icon" type="image/png" sizes="512x512" href="/icons/icon-512.png">
+<link rel="stylesheet" href="/static/style.css">
+</head>
+<body class="dark">
+<header id="header">
+  <div class="header-left">
+    <button id="hamburger-btn" class="icon-btn" aria-label="菜单">☰</button>
+    <a id="header-logo" class="header-logo" href="https://huggingface.co/VOMEBOOK" title="VOMEBOOK">
+      <span id="header-title">VOMEBOOK</span>
+    </a>
+  </div>
+  <div class="header-center">
+    <div class="search-box">
+      <span class="search-icon">⌕</span>
+      <input type="search" id="search-input" class="search-input" placeholder="搜索 TXT 文件或路径..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+      <kbd class="search-kbd">/</kbd>
+      <div id="search-history-dropdown" class="search-history-dropdown" style="display:none"></div>
+    </div>
+  </div>
+  <div class="header-right">
+    <button id="settings-btn" class="icon-btn" aria-label="搜索设置">⚙</button>
+    <button id="theme-btn" class="icon-btn" aria-label="切换主题">◐</button>
+  </div>
+</header>
+
+<div id="app-body" class="app-body">
+  <aside id="left-sidebar" class="sidebar left-sidebar">
+    <div class="sidebar-header"><span id="sidebar-title">数据包</span></div>
+    <div id="sidebar-content" class="sidebar-content"><div class="sidebar-loading">加载中...</div></div>
+  </aside>
+
+  <main id="main-content" class="main-content">
+    <div id="status-bar" class="status-bar">
+      <div class="status-left">
+        <span id="result-count" class="result-count"></span>
+        <label class="multi-toggle" id="multi-toggle-label" style="display:none"><input type="checkbox" id="multi-select-toggle"><span>多选</span></label>
+        <span id="did-you-mean" class="did-you-mean"></span>
+      </div>
+      <div class="status-right">
+        <button id="clear-filters-btn" class="text-btn" style="display:none">清空筛选</button>
+        <div class="sort-group">
+          <span class="sort-label">排序:</span>
+          <select id="sort-select" class="sort-select">
+            <option value="relevance">相关度</option>
+            <option value="name">文件名</option>
+            <option value="size">文件大小</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <div id="multi-action-bar" class="multi-action-bar" style="display:none">
+      <button id="multi-select-all" class="multi-action-btn">全选</button>
+      <button id="multi-deselect" class="multi-action-btn">取消选择</button>
+      <button id="multi-batch-download" class="multi-action-btn primary">批量下载</button>
+      <button id="multi-zip-download" class="multi-action-btn primary">合并下载</button>
+      <span id="multi-selected-count" class="multi-selected-count"></span>
+    </div>
+
+    <div id="results-container" class="results-container">
+      <div id="results-list" class="results-list"></div>
+      <div id="results-loading" class="loading-spinner" style="display:none"><div class="spinner"></div></div>
+      <div id="empty-state" class="empty-state" style="display:none">
+        <div class="empty-title">没有找到结果</div>
+        <div id="empty-desc" class="empty-desc">试试其他关键词</div>
+        <button id="empty-random-btn" class="random-big-btn">随机来一篇</button>
+      </div>
+    </div>
+
+    <div id="load-info" class="load-info" style="display:none">已加载 <span id="loaded-count">0</span> / <span id="total-count">0</span> 条</div>
+    <div id="preview-panel" class="preview-panel" style="display:none"></div>
+  </main>
+
+  <aside id="right-sidebar" class="sidebar right-sidebar">
+    <div class="sidebar-header"><span>搜索过滤</span><button id="close-filters-btn" class="icon-btn-sm" aria-label="关闭过滤">×</button></div>
+    <div class="sidebar-content">
+      <div class="filter-section">
+        <label class="toggle-row">
+          <span class="toggle-label">全文搜索</span>
+          <input type="checkbox" id="fulltext-toggle">
+          <span class="toggle-switch"></span>
+        </label>
+      </div>
+      <div class="filter-section">
+        <label class="toggle-row">
+          <span class="toggle-label">记录搜索历史</span>
+          <input type="checkbox" id="history-toggle" checked>
+          <span class="toggle-switch"></span>
+        </label>
+      </div>
+      <div class="filter-section">
+        <label class="toggle-row">
+          <span class="toggle-label">精准搜索</span>
+          <input type="checkbox" id="exact-search-toggle">
+          <span class="toggle-switch"></span>
+        </label>
+      </div>
+      <div id="filter-source-section" class="filter-section">
+        <div class="filter-section-title">数据包过滤</div>
+        <div id="filter-source-list" class="filter-checkbox-list"></div>
+      </div>
+      <div id="filter-folder-section" class="filter-section">
+        <div class="filter-section-title"><span>路径过滤</span><span class="filter-actions"><button id="folder-select-all" class="text-btn-sm">全选</button><button id="folder-deselect-all" class="text-btn-sm">反选</button></span></div>
+        <div id="filter-folder-tree" class="filter-folder-tree"></div>
+      </div>
+      <div class="filter-section">
+        <div class="filter-section-title">文件大小</div>
+        <div class="filter-size-row">
+          <input type="number" id="filter-min-size" class="size-input" placeholder="最小" min="0" step="0.1">
+          <select id="filter-min-unit" class="size-unit"><option value="B">B</option><option value="KB">KB</option><option value="MB" selected>MB</option><option value="GB">GB</option></select>
+          <span class="size-sep">—</span>
+          <input type="number" id="filter-max-size" class="size-input" placeholder="最大" min="0" step="0.1">
+          <select id="filter-max-unit" class="size-unit"><option value="B">B</option><option value="KB">KB</option><option value="MB" selected>MB</option><option value="GB">GB</option></select>
+        </div>
+      </div>
+    </div>
+  </aside>
+</div>
+
+<div id="overlay" class="overlay" style="display:none"></div>
+<div id="toast" class="toast" style="display:none"></div>
+<script>if ("serviceWorker" in navigator) { navigator.serviceWorker.register("/sw.js", { scope: "/" }); }</script>
+<script src="/static/app.js"></script>
+</body>
+</html>

static/manifest.json

@@ -0,0 +1,27 @@
+{
+  "name": "VOMEBOOK Search",
+  "short_name": "VOMEBOOK",
+  "description": "TXT 搜索与全文检索空间",
+  "start_url": "/",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "theme_color": "#1a1c1e",
+  "background_color": "#1a1c1e",
+  "categories": ["books", "education", "search"],
+  "lang": "zh-CN",
+  "icons": [
+    {
+      "src": "/icons/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any maskable"
+    },
+    {
+      "src": "/icons/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ]
+}

static/style.css

@@ -0,0 +1,1650 @@
+    /* ═══════════════════════════════════════════════════════════
+   VoiceOfML Search — MD3 Design System
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── CSS Variables (Dark Theme — Default) ────────────── */
+:root {
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Menlo", monospace;
+
+  --header-h: 48px;
+
+  --surface: #1a1c1e;
+  --surface-variant: #282a2d;
+  --surface-container: #1e2022;
+  --on-surface: #e2e2e6;
+  --on-surface-variant: #c4c6cf;
+
+  --primary: #8ab4f8;
+  --on-primary: #003258;
+  --primary-container: #004a7c;
+  --on-primary-container: #d1e4ff;
+
+  --secondary: #bcc7db;
+  --on-secondary: #263141;
+  --secondary-container: #3c4758;
+  --on-secondary-container: #d8e3f8;
+
+  --outline: #8d9099;
+  --outline-variant: #43474e;
+
+  --error: #f2b8b5;
+  --on-error: #601410;
+
+  --radius-sm: 6px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-full: 999px;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.5);
+
+  --transition: 150ms ease;
+  
+  --sidebar-w: 280px;
+  --sidebar-expanded-w: 100vw;
+
+  color-scheme: dark;
+}
+
+/* ── Light Theme ─────────────────────────────────────── */
+body.light {
+  --surface: #fdfbff;
+  --surface-variant: #f0eff4;
+  --surface-container: #f5f3f7;
+  --on-surface: #1a1c1e;
+  --on-surface-variant: #44474e;
+
+  --primary: #1a6db5;
+  --on-primary: #ffffff;
+  --primary-container: #d1e4ff;
+  --on-primary-container: #001d36;
+
+  --secondary: #525f70;
+  --on-secondary: #ffffff;
+  --secondary-container: #d8e3f8;
+  --on-secondary-container: #121c29;
+
+  --outline: #74777f;
+  --outline-variant: #c4c6cf;
+
+  --error: #ba1a1a;
+  --on-error: #ffffff;
+
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
+  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);
+  --shadow-lg: 0 4px 16px rgba(0,0,0,0.16);
+
+  color-scheme: light;
+}
+
+/* ── Reset & Base ────────────────────────────────────── */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--on-surface);
+  background: var(--surface);
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+.icon-btn:focus-visible,
+.icon-btn-sm:focus-visible,
+.text-btn:focus-visible,
+.text-btn-sm:focus-visible,
+.browser-item:focus-visible,
+.repo-list-item:focus-visible,
+.result-action-btn:focus-visible,
+.random-book-btn:focus-visible,
+.random-big-btn:focus-visible,
+.filter-checkbox-item:focus-visible,
+.back-to-global:focus-visible,
+.sidebar-breadcrumb .crumb-item:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: none;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+}
+a:hover, a:focus-visible {
+  text-decoration: underline;
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+  color: inherit;
+}
+
+input, select {
+  font-family: inherit;
+  font-size: inherit;
+  color: var(--on-surface);
+  background: none;
+  border: none;
+  outline: none;
+}
+
+ul, li {
+  list-style: none;
+}
+
+/* ── Scrollbar ───────────────────────────────────────── */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--outline-variant);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--outline);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Header
+   ═══════════════════════════════════════════════════════════ */
+
+#header {
+  height: var(--header-h);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  background: var(--surface-container);
+  border-bottom: 1px solid var(--outline-variant);
+  z-index: 100;
+  flex-shrink: 0;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.header-logo {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--on-surface);
+  font-weight: 600;
+  font-size: 15px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition);
+  text-decoration: none;
+}
+.header-logo:hover, .header-logo:focus-visible {
+  background: var(--surface-variant);
+  text-decoration: none;
+}
+
+.header-center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-width: 0;
+}
+
+.search-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 680px;
+  height: 36px;
+  background: var(--surface);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-full);
+  transition: all var(--transition);
+}
+.search-box:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+.search-icon {
+  flex-shrink: 0;
+  margin-left: 12px;
+  color: var(--on-surface-variant);
+}
+
+.search-input {
+  flex: 1;
+  height: 100%;
+  padding: 0 8px;
+  font-size: 14px;
+  background: transparent;
+  min-width: 0;
+}
+.search-input::placeholder {
+  color: var(--on-surface-variant);
+  opacity: 0.6;
+}
+
+.search-kbd {
+  flex-shrink: 0;
+  margin-right: 8px;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  border: 1px solid var(--outline-variant);
+  color: var(--on-surface-variant);
+  opacity: 0.7;
+  font-family: var(--font-mono);
+}
+
+.search-history-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: var(--surface);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
+  z-index: 100;
+  max-height: 320px;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+.search-history-dropdown .history-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--on-surface);
+  transition: background 0.1s;
+}
+.search-history-dropdown .history-item:hover {
+  background: var(--surface-variant);
+}
+.search-history-dropdown .history-icon {
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+  opacity: 0.5;
+}
+.search-history-dropdown .history-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.search-history-dropdown .history-del {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: var(--on-surface-variant);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 6px;
+  opacity: 0.5;
+}
+.search-history-dropdown .history-del:hover {
+  opacity: 1;
+  color: var(--error);
+}
+.search-history-dropdown .history-footer {
+  padding: 4px 12px;
+  border-top: 1px solid var(--outline-variant);
+  text-align: center;
+}
+.search-history-dropdown .history-clear-all {
+  background: none;
+  border: none;
+  color: var(--on-surface-variant);
+  font-size: 12px;
+  cursor: pointer;
+  opacity: 0.6;
+}
+.search-history-dropdown .history-clear-all:hover {
+  opacity: 1;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+/* Icon Buttons */
+.icon-btn {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  color: var(--on-surface-variant);
+  transition: all var(--transition);
+}
+.icon-btn:hover, .icon-btn:focus-visible {
+  background: var(--surface-variant);
+  color: var(--on-surface);
+}
+
+.icon-btn-sm {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  color: var(--on-surface-variant);
+  font-size: 18px;
+  transition: all var(--transition);
+}
+.icon-btn-sm:hover, .icon-btn-sm:focus-visible {
+  background: var(--surface-variant);
+  color: var(--on-surface);
+}
+
+.text-btn {
+  font-size: 12px;
+  color: var(--primary);
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  transition: background var(--transition);
+}
+.text-btn:hover, .text-btn:focus-visible {
+  background: var(--surface-variant);
+}
+
+.text-btn-sm {
+  font-size: 11px;
+  color: var(--primary);
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: background var(--transition);
+}
+.text-btn-sm:hover, .text-btn-sm:focus-visible {
+  background: var(--surface-variant);
+}
+
+.preview-panel {
+  margin: 12px 16px 20px;
+  background: var(--surface-container);
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.preview-header {
+  padding: 12px 14px;
+  border-bottom: 1px solid var(--outline-variant);
+}
+
+.preview-title {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.preview-path {
+  font-size: 12px;
+  opacity: 0.7;
+  margin-top: 4px;
+  word-break: break-all;
+}
+
+.preview-body {
+  margin: 0;
+  padding: 14px;
+  max-height: 50vh;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-sans);
+  line-height: 1.75;
+}
+
+.result-snippet {
+  margin-top: 6px;
+  font-size: 12px;
+  opacity: 0.85;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Layout
+   ═══════════════════════════════════════════════════════════ */
+
+.app-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ── Sidebar ─────────────────────────────────────────── */
+.sidebar {
+  width: var(--sidebar-w);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--outline-variant);
+  background: var(--surface-container);
+  transition: width var(--transition), opacity var(--transition);
+  overflow: hidden;
+}
+.sidebar.collapsed {
+  width: 0 !important; 
+  border-right: none;
+}
+.right-sidebar {
+  border-right: none;
+  border-left: 1px solid var(--outline-variant);
+}
+.right-sidebar.collapsed {
+  border-left: none;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  font-size: 12px;
+  height: 36px;
+  min-height: 36px;
+  font-weight: 600;
+  color: var(--on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--outline-variant);
+  flex-shrink: 0;
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+}
+
+.sidebar-loading {
+  padding: 16px;
+  text-align: center;
+  font-size: 13px;
+  color: var(--on-surface-variant);
+  opacity: 0.7;
+}
+.sidebar.expanded-wide {
+  width: var(--sidebar-expanded-w) !important;
+}
+
+/* ── Breadcrumb (Left Sidebar) ───────────────────────── */
+.sidebar-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--outline-variant);
+  flex-wrap: wrap;
+  font-size: 12px;
+  flex-shrink: 0;
+  min-height: 32px;
+}
+
+.sidebar-breadcrumb .crumb-item {
+  color: var(--primary);
+  cursor: pointer;
+  padding: 2px 4px;
+  border-radius: 4px;
+  white-space: nowrap;
+  transition: background var(--transition);
+}
+.sidebar-breadcrumb .crumb-item:hover,
+.sidebar-breadcrumb .crumb-item:focus-visible {
+  background: var(--surface-variant);
+}
+
+.sidebar-breadcrumb .crumb-item.current {
+  color: var(--on-surface-variant);
+  cursor: default;
+  font-weight: 500;
+}
+.sidebar-breadcrumb .crumb-item.current:hover,
+.sidebar-breadcrumb .crumb-item.current:focus-visible {
+  background: none;
+}
+
+.sidebar-breadcrumb .crumb-sep {
+  color: var(--outline);
+  flex-shrink: 0;
+}
+
+/* Back to global button */
+.back-to-global {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 12px;
+  height: 40px;
+  font-size: 13px;
+  color: var(--primary);
+  cursor: pointer;
+  border-bottom: 1px solid var(--outline-variant);
+  transition: background var(--transition);
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+.back-to-global:hover, .back-to-global:focus-visible {
+  background: var(--surface-variant);
+}
+
+/* ── Sidebar Browser Items (Folder + File) ───────────── */
+.browser-list {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.browser-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px;
+  cursor: pointer;
+  transition: background var(--transition);
+  font-size: 13px;
+  color: var(--on-surface);
+}
+.browser-item:hover, .browser-item:focus-visible {
+  background: var(--surface-variant);
+}
+
+/* 默认：无条纹 */
+.browser-item:nth-child(even) {
+  background: transparent;
+}
+
+/* 展开后：显示条纹 */
+.left-sidebar.expanded-wide .browser-item:nth-child(even) {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+body.light .left-sidebar.expanded-wide .browser-item:nth-child(even) {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.left-sidebar.expanded-wide .browser-item:nth-child(even):hover,
+.left-sidebar.expanded-wide .browser-item:nth-child(even):focus-visible {
+  background: var(--surface-variant);
+}
+
+.browser-item .browser-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+}
+
+.browser-item .browser-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browser-item .browser-count {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+.browser-item .browser-size {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+  margin-right: 4px;
+}
+
+.browser-item .browser-action {
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 4px;
+  color: var(--primary);
+  border: 1px solid var(--primary);
+  flex-shrink: 0;
+  transition: all var(--transition);
+  white-space: nowrap;
+}
+.browser-item .browser-action:hover,
+.browser-item .browser-action:focus-visible {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+}
+
+/* ── Main Content ────────────────────────────────────── */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Repo List (Left Sidebar — Global Mode)
+   ═══════════════════════════════════════════════════════════ */
+
+.repo-list-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background var(--transition);
+}
+.repo-list-item:hover, .repo-list-item:focus-visible {
+  background: var(--surface-variant);
+}
+.repo-list-item.active {
+  background: var(--secondary-container);
+}
+
+.repo-list-item .repo-icon {
+  width: 18px;
+  height: 18px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+.repo-list-item .repo-name {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--on-surface);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.repo-list-item .repo-count {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Status Bar
+   ═══════════════════════════════════════════════════════════ */
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 16px;
+  border-bottom: 1px solid var(--outline-variant);
+  flex-shrink: 0;
+  min-height: 36px;
+  height: 36px;
+}
+
+.status-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+}
+
+.status-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+body.mobile .status-bar {
+  padding: 4px 8px;
+  gap: 4px;
+}
+body.mobile .status-left { gap: 4px; }
+body.mobile .status-right { gap: 4px; }
+body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
+
+.sort-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+}
+
+.sort-select {
+  font-size: 12px;
+  padding: 2px 6px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  cursor: pointer;
+}
+
+.did-you-mean {
+  font-size: 12px;
+  color: var(--primary);
+  cursor: pointer;
+}
+.did-you-mean:hover, .did-you-mean:focus-visible {
+  text-decoration: underline;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Results
+   ═══════════════════════════════════════════════════════════ */
+
+.results-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* ── Result Item ─────────────────────────────────────── */
+.result-item {
+  display: flex;
+  gap: 10px;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--outline-variant);
+  transition: background var(--transition);
+  content-visibility: auto;
+  contain-intrinsic-size: auto 60px;
+}
+.result-item:nth-child(even) {
+  background: var(--surface-variant);
+}
+.result-item:nth-child(even):hover,
+.result-item:nth-child(even):focus-visible {
+  background: var(--secondary-container);
+}
+.result-item:hover, .result-item:focus-visible {
+  background: var(--surface-variant);
+}
+
+.result-file-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: var(--on-surface-variant);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.result-file-icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.result-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.result-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--on-surface);
+  word-break: break-all;
+  line-height: 1.4;
+}
+
+.result-title mark {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.result-path {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  margin-top: 3px;
+  font-family: var(--font-mono);
+  word-break: break-all;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex-wrap: wrap;
+  line-height: 1.5;
+}
+
+.result-path .path-sep {
+  color: var(--outline);
+  margin: 0 2px;
+  user-select: none;
+}
+
+.result-path .path-folder {
+  cursor: pointer;
+  color: var(--secondary);
+  transition: color var(--transition);
+}
+.result-path .path-folder:hover,
+.result-path .path-folder:focus-visible {
+  color: var(--primary);
+  text-decoration: underline;
+}
+
+.result-preview {
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  margin-top: 4px;
+  line-height: 1.5;
+  max-height: 3em;
+  overflow: hidden;
+  font-family: var(--font-mono);
+}
+
+.result-preview mark {
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+.result-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+  flex-wrap: wrap;
+}
+
+.result-repo-tag {
+  font-size: 10px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  background: var(--primary-container);
+  color: var(--on-primary-container);
+  cursor: pointer;
+  font-weight: 500;
+  transition: opacity var(--transition);
+}
+.result-repo-tag:hover, .result-repo-tag:focus-visible {
+  opacity: 0.8;
+}
+
+.result-size {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+}
+
+.result-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.result-action-btn {
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  color: var(--on-surface-variant);
+  border: 1px solid var(--outline-variant);
+  white-space: nowrap;
+  transition: all var(--transition);
+}
+.result-action-btn:hover, .result-action-btn:focus-visible {
+  background: var(--surface-variant);
+  border-color: var(--outline);
+}
+.result-action-btn.primary {
+  color: var(--primary);
+  border-color: var(--primary);
+}
+.result-action-btn.primary:hover,
+.result-action-btn.primary:focus-visible {
+  background: var(--primary-container);
+  border-color: var(--primary);
+  color: var(--on-primary-container);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Load Info
+   ═══════════════════════════════════════════════════════════ */
+
+.load-info {
+  text-align: center;
+  padding: 12px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  border-top: 1px solid var(--outline-variant);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.mobile-selected-count {
+  display: none;
+  color: var(--on-surface-variant);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+body.mobile .load-info {
+  text-align: center;
+}
+
+body.mobile .mobile-selected-count {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Quick Scroll Track
+   ═══════════════════════════════════════════════════════════ */
+
+.scroll-track {
+  position: absolute;
+  right: 2px;
+  top: 40px;
+  bottom: 50px;
+  width: 8px;
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.scroll-track.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.scroll-thumb {
+  position: absolute;
+  width: 6px;
+  left: 1px;
+  border-radius: 3px;
+  background: var(--outline);
+  cursor: pointer;
+  min-height: 30px;
+  transition: background var(--transition);
+}
+.scroll-thumb:hover, .scroll-thumb:focus-visible {
+  background: var(--on-surface-variant);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Footer
+   ═══════════════════════════════════════════════════════════ */
+
+.footer {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-top: 1px solid var(--outline-variant);
+  padding: 0 16px;
+  flex-shrink: 0;
+  position: relative;
+  background: var(--surface-container);
+}
+
+.hitokoto {
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  opacity: 0.55;
+  text-align: center;
+  max-width: 70%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-height: 18px;
+}
+
+.random-book-btn {
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--on-surface-variant);
+  padding: 4px 10px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--outline-variant);
+  transition: all var(--transition);
+}
+.random-book-btn:hover, .random-book-btn:focus-visible {
+  background: var(--surface-variant);
+  border-color: var(--outline);
+  color: var(--primary);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Filter Section (Right Sidebar)
+   ═══════════════════════════════════════════════════════════ */
+
+.filter-section {
+  border-bottom: 1px solid var(--outline-variant);
+  padding: 10px 12px;
+}
+
+#history-toggle-section,
+#search-folders-section,
+#exact-search-section {
+  padding: 0 12px;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+#history-toggle-section .toggle-row,
+#search-folders-section .toggle-row,
+#exact-search-section .toggle-row {
+  height: 100%;
+}
+
+.filter-section-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--on-surface-variant);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+
+.filter-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.filter-checkbox-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.filter-checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+  color: var(--on-surface);
+  cursor: pointer;
+  transition: color var(--transition);
+}
+.filter-checkbox-item:hover, .filter-checkbox-item:focus-visible {
+  color: var(--primary);
+}
+
+.filter-checkbox-item input[type="checkbox"] {
+  accent-color: var(--primary);
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.filter-checkbox-item .checkbox-count {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  margin-left: auto;
+}
+
+/* ── Folder Tree Filter ──────────────────────────────── */
+.filter-folder-tree {
+  max-height: 280px;
+  overflow-y: auto;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.filter-folder-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 0 3px calc(var(--fdepth, 0) * 16px);
+  font-size: 13px;
+  color: var(--on-surface);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-wrap: nowrap;
+  width: max-content;
+  min-width: 100%;
+}
+
+.filter-folder-item .tree-toggle {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--on-surface-variant);
+  font-size: 10px;
+}
+.filter-folder-item .tree-toggle.expanded {
+  transform: rotate(90deg);
+}
+
+.filter-folder-item input[type="checkbox"] {
+  accent-color: var(--primary);
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.filter-folder-item .folder-name {
+  flex: 0 0 auto;
+}
+
+.folder-self-toggle {
+  border: 1px solid var(--outline-variant);
+  background: transparent;
+  color: var(--on-surface-variant);
+  border-radius: 999px;
+  font-size: 11px;
+  line-height: 1;
+  padding: 4px 8px;
+  cursor: pointer;
+  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
+  flex-shrink: 0;
+  margin-left: 4px;
+}
+
+.filter-folder-item .folder-count {
+  font-size: 10px;
+  color: var(--on-surface-variant);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.folder-self-toggle:hover,
+.folder-self-toggle:focus-visible {
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+.folder-self-toggle.active {
+  background: color-mix(in srgb, var(--primary) 18%, transparent);
+  border-color: var(--primary);
+  color: var(--primary);
+}
+
+/* ── Size Filter ─────────────────────────────────────── */
+.filter-size-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.size-input {
+  flex: 1;
+  font-size: 12px;
+  padding: 6px 8px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  min-width: 0;
+}
+.size-input:focus {
+  border-color: var(--primary);
+}
+.size-unit {
+  font-size: 12px;
+  padding: 6px 4px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  cursor: pointer;
+}
+
+.size-sep {
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Empty State
+   ═════════════════════════════════════════════════════════���═ */
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 16px;
+  text-align: center;
+  gap: 12px;
+}
+
+.empty-icon {
+  width: 56px;
+  height: 56px;
+  color: var(--outline-variant);
+  opacity: 0.4;
+}
+
+.empty-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--on-surface-variant);
+}
+
+.empty-desc {
+  font-size: 13px;
+  color: var(--on-surface-variant);
+  opacity: 0.6;
+}
+
+.random-big-btn {
+  font-size: 14px;
+  padding: 10px 24px;
+  border-radius: 24px;
+  background: var(--primary);
+  color: var(--on-primary);
+  font-weight: 500;
+  cursor: pointer;
+  transition: opacity var(--transition);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.random-big-btn:hover, .random-big-btn:focus-visible {
+  opacity: 0.85;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Loading Spinner
+   ═══════════════════════════════════════════════════════════ */
+
+.loading-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.spinner {
+  width: 28px;
+  height: 28px;
+  border: 3px solid var(--outline-variant);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Overlay
+   ═══════════════════════════════════════════════════════════ */
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 90;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Toast
+   ═══════════════════════════════════════════════════════════ */
+
+.toast {
+  position: fixed;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--secondary-container);
+  color: var(--on-secondary-container);
+  padding: 8px 20px;
+  border-radius: var(--radius-full);
+  font-size: 13px;
+  z-index: 200;
+  box-shadow: var(--shadow-md);
+  animation: toast-in 0.2s ease;
+}
+
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Mobile
+   ═══════════════════════════════════════════════════════════ */
+
+body.mobile .sidebar:not(.open) {
+  width: 0;
+  border-right: none;
+  border-left: none;
+}
+
+body.mobile .left-sidebar.open {
+  position: fixed;
+  top: var(--header-h);
+  left: 0;
+  bottom: 0;
+  z-index: 95;
+  width: 85vw;
+  max-width: 320px;
+  box-shadow: var(--shadow-lg);
+}
+
+body.mobile .right-sidebar.open {
+  position: fixed;
+  top: var(--header-h);
+  right: 0;
+  bottom: 0;
+  z-index: 95;
+  width: 85vw;
+  max-width: 320px;
+  box-shadow: var(--shadow-lg);
+}
+
+body.mobile .footer {
+  display: none;
+}
+
+body.mobile .header-logo {
+  display: none;
+}
+
+body.mobile .random-book-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 50;
+  transform: none;
+  background: var(--surface-container);
+  box-shadow: var(--shadow-md);
+  border-radius: var(--radius-full);
+}
+
+body.mobile .hitokoto {
+  display: none;
+}
+
+body.mobile .search-kbd {
+  display: none;
+}
+
+body.mobile .status-bar {
+  padding: 4px 8px;
+}
+
+body.mobile .result-actions {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Responsive (auto-detect)
+   ═══════════════════════════════════════════════════════════ */
+
+@media (max-width: 768px) {
+  body:not(.force-desktop) .sidebar:not(.open) {
+    width: 0;
+    border-right: none;
+    border-left: none;
+  }
+
+  body:not(.force-desktop) .left-sidebar.open {
+    position: fixed;
+    top: var(--header-h);
+    left: 0;
+    bottom: 0;
+    z-index: 95;
+    width: 85vw;
+    max-width: 320px;
+    box-shadow: var(--shadow-lg);
+  }
+
+  body:not(.force-desktop) .right-sidebar.open {
+    position: fixed;
+    top: var(--header-h);
+    right: 0;
+    bottom: 0;
+    z-index: 95;
+    width: 85vw;
+    max-width: 320px;
+    box-shadow: var(--shadow-lg);
+  }
+
+  body:not(.force-desktop) .footer {
+    display: none;
+  }
+
+  body:not(.force-desktop) .random-book-btn {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 50;
+    transform: none;
+    background: var(--surface-container);
+    box-shadow: var(--shadow-md);
+    border-radius: var(--radius-full);
+  }
+
+  body:not(.force-desktop) .hitokoto {
+    display: none;
+  }
+
+  body:not(.force-desktop) .search-kbd {
+    display: none;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Utility
+   ═══════════════════════════════════════════════════════════ */
+
+.hidden {
+  display: none !important;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Toggle Switch ──────────────────────────────────── */
+.toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.toggle-label {
+  font-size: 13px;
+  color: var(--on-surface);
+}
+
+.toggle-row input[type="checkbox"] {
+  display: none;
+}
+
+.toggle-switch {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  background: var(--outline-variant);
+  border-radius: 11px;
+  transition: background var(--transition);
+  flex-shrink: 0;
+}
+
+.toggle-switch::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  background: var(--surface);
+  border-radius: 50%;
+  transition: transform var(--transition);
+}
+
+.toggle-row input:checked + .toggle-switch {
+  background: var(--primary);
+}
+
+.toggle-row input:checked + .toggle-switch::after {
+  transform: translateX(18px);
+}
+
+input[type="checkbox"]:indeterminate {
+  accent-color: var(--primary);
+}
+body.theme-transitioning *,
+body.theme-transitioning *::before,
+body.theme-transitioning *::after {
+  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
+}
+
+.theme-ripple {
+  position: fixed;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 9999;
+  width: 0;
+  height: 0;
+  animation: theme-ripple-expand 0.6s ease-out forwards;
+}
+
+@keyframes theme-ripple-expand {
+  0%   { width: 0; height: 0; opacity: 0.6; }
+  100% { width: 300vmax; height: 300vmax; opacity: 0; transform: translate(-150vmax, -150vmax); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Multi-Select
+   ═══════════════════════════════════════════════════════════ */
+
+.multi-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  cursor: pointer;
+  margin-left: 0;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid transparent;
+}
+.multi-toggle:hover { border-color: var(--outline-variant); }
+.multi-toggle input { margin: 0; }
+
+.multi-action-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 12px;
+  height: 40px;
+  background: var(--surface-variant);
+  border-bottom: 1px solid var(--outline-variant);
+  box-sizing: border-box;
+  flex-wrap: nowrap;
+}
+.multi-action-btn {
+  padding: 4px 12px;
+  border: 1px solid var(--outline-variant);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--on-surface);
+  font-size: 12px;
+  cursor: pointer;
+}
+.multi-action-btn.primary {
+  background: var(--primary);
+  color: var(--on-primary);
+  border-color: var(--primary);
+}
+.multi-action-btn:hover { opacity: 0.85; }
+.multi-selected-count {
+  margin-left: auto;
+  font-size: 12px;
+  color: var(--on-surface-variant);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+body.mobile .multi-action-btn {
+  flex-shrink: 0;
+}
+
+.result-checkbox {
+  display: none;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  margin-right: 6px;
+  align-self: center;
+  accent-color: var(--primary);
+}
+body.multiselect .result-checkbox { display: block; }
+body.multiselect .result-file-icon { display: none; }
+.result-item.selected {
+  background: color-mix(in srgb, var(--primary) 15%, transparent) !important;
+}

static/sw.js

@@ -0,0 +1,66 @@
+const CACHE_NAME = "vomebook-search-v1";
+
+const PRECACHE_URLS = [
+  "/",
+  "/static/style.css",
+  "/static/app.js",
+  "/manifest.json"
+];
+
+// ── Install: precache app shell ─────────────────────
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(PRECACHE_URLS).catch((err) => {
+        console.warn("[SW] precache partial failure:", err);
+      });
+    }).then(() => self.skipWaiting())
+  );
+});
+
+// ── Activate: clean old caches ──────────────────────
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    caches.keys().then((keys) => {
+      return Promise.all(
+        keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))
+      );
+    }).then(() => self.clients.claim())
+  );
+});
+
+// ── Fetch: cache strategies ─────────────────────────
+self.addEventListener("fetch", (event) => {
+  const url = new URL(event.request.url);
+
+  // External domains: network only
+  if (url.hostname !== self.location.hostname) {
+    return;
+  }
+
+  // ── API: network first, no caching ────────────────
+  if (url.pathname.startsWith("/api/")) {
+    return;
+  }
+
+  // ── Download proxy: network only ──────────────────
+  if (url.pathname.startsWith("/txt/")) {
+    return;
+  }
+
+  // ── App shell / static: cache first, network update
+  event.respondWith(
+    caches.match(event.request).then((cached) => {
+      const fetchPromise = fetch(event.request).then((response) => {
+        if (response.ok && response.status !== 206) {
+          const clone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => {
+            cache.put(event.request, clone);
+          });
+        }
+        return response;
+      }).catch(() => cached);
+      return cached || fetchPromise;
+    })
+  );
+});