diff --git a/README.md b/README.md
index 3127ace..76b33fc 100644
--- a/README.md
+++ b/README.md
@@ -507,7 +507,12 @@ web/src/
     comic.ts     CBZ / 图片目录
     detect.ts    魔数优先的格式识别
   ui/
-    reader-view.ts   分页、滚动、手势、定位
+    mount.ts         组件树与类式屏幕之间唯一的接缝
+    toolkit.tsx      按钮/分段控件/开关/面板这些原语
+    vendor/preact.ts 框架的唯一入口（换版本/换实现只改这一处）
+    *-screen.tsx     书架、登录、书库管理、阅读器（铬层）
+    reader-chrome.tsx  阅读器的顶栏/页脚/目录/设置/朗读条
+    reader-view.ts   分页、滚动、手势、定位（命令式，零框架）
     locator.ts       阅读位置格式
     shadow.ts        书的样式与 App 样式隔离
     resources.ts     资源按需解出，不预展开
@@ -531,12 +536,18 @@ android/app/src/main/java/cool/cnb/reader/
 
 ### 客户端技术选型说明
 
-- **不用框架**：渲染层是命令式 DOM 操作——分页、注入文档、shadow root、量测列宽。
-  引一个虚拟 DOM 只在代码和它要量测的布局之间多加一层，而这一层恰好是这个产品最不该
-  透过它去调试的东西。产物是一个 171KB（gzip 54KB）的单文件 bundle。
+- **UI 层用 Preact + signals，排版层不用框架**：这条线划在「有没有布局要量测」上。
+  书架、登录、书库管理、阅读器的**铬层**（顶栏/页脚/目录/设置面板/朗读条）是状态与
+  事件，用组件描述；而**阅读舞台**——分页、注入文档、shadow root、量测列宽——仍然是
+  命令式 DOM，一个虚拟 DOM 加在代码和它要量测的布局之间，恰好是这个产品最不该透过它
+  去调试的东西。`ReaderScreen` 把这两半拼在一个文件里：`stage` 节点由类持有并交给
+  `ReaderView`，其余全部是 `ChromeState` 的函数。
+  选型对比见 `docs/architecture.md` §8；产物是一个 240KB（gzip 75KB）的单文件 bundle。
 - **单文件 bundle、相对路径**：产物要被两个宿主消费——服务端托管给浏览器、Android 打进
   assets。`file://` 或 WebView 里加载同源分片会踩平台特异性，所以 `inlineDynamicImports`
-  打成一份，`base: './'`。
+  打成一份，`base: './'`。这条约束也是选 Preact 而不是 React/Vue 的关键：
+  `preact/compat` 不进包、没有 `react-dom`，只引入 `preact` 与 `preact/hooks`，
+  两个模块压缩前合计约 15KB。
 - **不注入 reset 样式**：见 `web/src/styles/reader.css` 顶部。整个产品的差异点是「忠于
   出版方的排版」，而一份 reset 正好会抹掉出版方的字体、缩进和行距。
   可调项全部是可继承的自定义属性，默认值是 `inherit`——「关」的意思是「不动它」，
diff --git a/docs/architecture.md b/docs/architecture.md
index 2779a6d..74ef621 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -195,6 +195,58 @@ Readium 用 Readium CSS 主动接管排版、覆盖出版方样式，这与本
 - 渲染层是 **WebView + 自研 CSS 干预策略**，保留作者样式、只做最小覆盖
 - 参考 readium-css 的变量组织方式，但**不引入它的默认接管行为**
 
+### UI 框架选型：Preact，而且只用在「没有布局要量测」的那一半
+
+界面原来是纯命令式 DOM：每个屏幕在构造函数里建好全部节点、把它们存成实例字段，
+再由若干 `render*()` 方法在状态变化时挑选该改哪个。它有两个具体的坏味道：
+
+1. **同一份状态有多个副本。** 分段控件的选中态既在 `settings` 里也在
+   `aria-pressed` 上，两者靠点击处理器手工同步；`LoginScreen` 的通知、错误、
+   注册开关、按钮文案是四个节点被五个地方改。改一处漏一处不会报错。
+2. **重建与状态的矛盾。** 朗读引擎行必须在 HTTP 能力探测回来时重新生成，
+   而整块面板重建会丢掉读者在面板里的滚动位置，于是长出一套
+   「只替换 `[data-speech=group]`」的定点重建。
+
+选型的硬约束有三个，都来自「一份产物两个宿主」：
+
+- **单文件 bundle、`base: './'`**：WebView 从 `https://appassets...` 加载，
+  不能按需拉分片，所以框架必须能被 tree-shake 进一个文件。
+- **体积**：这是要打进 APK、也要由 NAS 上的 Node 托管的资源。
+- **不认识的东西不能碰布局**：阅读舞台的分页依赖 `getBoundingClientRect()`，
+  虚拟 DOM 不能在它和布局之间。
+
+对比过的四个：
+
+| 方案 | gzip 净成本 | 结论 |
+| --- | --- | --- |
+| Preact + `preact/hooks` | 最小 | **选用**（无 `preact/compat`、无 `react-dom`，仅这两个模块） |
+| React + react-dom | ~45KB | 一个阅读器不该为 `react-dom` 付这个价钱 |
+| Vue 3 runtime | ~34KB | 需要 SFC 预编译或运行时模板编译，产物形状与单文件 bundle 相冲 |
+| 纯 Web Components / lit | ~5KB / ~7KB | 手写 `render()` 等于自建一个更窄的框架；lit 又把模板塞进字符串，失去类型检查 |
+
+**边界写在 `ReaderScreen` 里，而不是靠自觉**：舞台（`stage`）由类持有、
+交给 `ReaderView`，并通过一个 ref 回调挂进组件树；组件只决定它**放在哪**
+（状态行与页脚之间，stacking context 来自这里），内容一概不碰。于是：
+
+- 排版、分页、shadow root、手势、量测：**零框架**。
+- 顶栏、页脚进度、目录、设置面板、朗读条、状态行、书架、登录、书库管理：
+  `ChromeState` 的函数。
+
+副作用也是可见的：`settingsPanel` 那套「只重建朗读行」的定点更新没有了，
+探测答案回来时只是改状态，Preact 的 diff 让读者的滚动位置天然保住。
+
+组件只用了 `preact` 与 `preact/hooks`（`useState` / `useRef` / `useEffect`），
+没有引入 `@preact/signals` 之类的额外状态层——屏幕自己就是状态的持有者，
+`update()` 把整份状态交给树。少一个依赖，就少一处「值在哪」的歧义。
+
+### `mountUI`：类与组件之间唯一的接缝
+
+屏幕仍然是类，仍然有 `element` 和 `dispose()`——路由不需要知道框架，
+`ReaderScreen` 这种以命令式为主的屏幕也不必假装自己不是。
+`mountUI(container, tree, initial)` 返回 `{ element, update, unmount }`，
+`update` 传入「整棵树应该是什么状态的函数」的那个值。测试保持原样：
+断言仍然打在真实 DOM 上（`test/manager.test.ts` 一行没改逻辑，只改了 import 后缀）。
+
 ### 只有一份渲染层
 
 Android 不重写渲染，它加载的是同一份 `web/` 产物。这不是为了省事，
diff --git a/web/package-lock.json b/web/package-lock.json
index 028f930..a38f7bc 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,6 +15,7 @@
         "@types/jsdom": "^30.0.0",
         "@types/node": "^22.20.3",
         "jsdom": "^30.0.1",
+        "preact": "^10.29.8",
         "tsx": "^4.19.2",
         "typescript": "^5.7.3",
         "vite": "^6.0.7",
@@ -1672,6 +1673,25 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/preact": {
+      "version": "10.29.8",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.29.8.tgz",
+      "integrity": "sha512-ej2aVZ+vZ8WO7tvlQWRM9N63A0KzF9q4mWJfDUHgYaIofWY9hu74QdnQrjoPMmZi2/nZ5gN0bJCQF49xQqx09Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      },
+      "peerDependencies": {
+        "preact-render-to-string": ">=5"
+      },
+      "peerDependenciesMeta": {
+        "preact-render-to-string": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
diff --git a/web/package.json b/web/package.json
index 40a17d9..c19aa5d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -19,6 +19,7 @@
     "@types/jsdom": "^30.0.0",
     "@types/node": "^22.20.3",
     "jsdom": "^30.0.1",
+    "preact": "^10.29.8",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
diff --git a/web/src/app.ts b/web/src/app.ts
index f1d04d6..f5397a8 100644
--- a/web/src/app.ts
+++ b/web/src/app.ts
@@ -14,10 +14,10 @@ import type { Platform } from './core/platform.ts';
 import { SyncEngine, type SyncStatus } from './core/sync.ts';
 import { OfflineStore } from './store/offline.ts';
 import { SettingsStore, DEFAULT_APP_SETTINGS, type AppSettings } from './store/settings.ts';
-import { ShelfScreen } from './ui/shelf-screen.ts';
-import { ReaderScreen } from './ui/reader-screen.ts';
-import { LoginScreen } from './ui/login-screen.ts';
-import { ManagerScreen } from './ui/manager-screen.ts';
+import { ShelfScreen } from './ui/shelf-screen.tsx';
+import { ReaderScreen } from './ui/reader-screen.tsx';
+import { LoginScreen } from './ui/login-screen.tsx';
+import { ManagerScreen } from './ui/manager-screen.tsx';
 import { el } from './ui/dom.ts';
 
 /**
diff --git a/web/src/styles/reader.css b/web/src/styles/reader.css
index f342b8f..450dffa 100644
--- a/web/src/styles/reader.css
+++ b/web/src/styles/reader.css
@@ -1262,6 +1262,20 @@ book-content ::selection {
   min-height: 0;
 }
 
+/*
+ * The host of the screen's component tree.
+ *
+ * The screens are component trees mounted into a container, and the container
+ * must not become a layout box of its own: the styles below are written against
+ * `.manager-screen > .manager-body`, and a wrapper in between would break the
+ * `min-height: 0` chain that lets the list scroll instead of pushing the action
+ * bar off the bottom of the phone. `display: contents` makes the host vanish for
+ * layout purposes and keeps the tree's children exactly where they were.
+ */
+.manager-ui {
+  display: contents;
+}
+
 .manager-crumbs {
   flex: 1 1 auto;
   display: flex;
diff --git a/web/src/ui/auth-view.ts b/web/src/ui/auth-view.ts
deleted file mode 100644
index bbcc9e7..0000000
--- a/web/src/ui/auth-view.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Sign-in.
- *
- * The first account on a fresh instance becomes the admin, so this screen has to
- * know whether the instance is empty — showing a login form to the person setting
- * the server up for the first time is the most common way a self-hosted product
- * loses a user in the first two minutes.
- *
- * The instance probe is unauthenticated by design, so it can run before anyone
- * has a token.
- */
-
-import { ApiClient } from '../net/api.ts';
-
-export interface AuthHost {
-  onSignedIn?: () => void;
-}
-
-export class AuthView {
-  private readonly root: HTMLElement;
-
-  constructor(
-    host: HTMLElement,
-    private readonly api: ApiClient,
-    private readonly options: AuthHost = {},
-  ) {
-    this.root = document.createElement('div');
-    this.root.className = 'dialog';
-    host.replaceChildren(this.root);
-  }
-
-  async render(): Promise<void> {
-    let registrationOpen = true;
-    let userCount = 0;
-    try {
-      const instance = await this.api.instance();
-      registrationOpen = instance.registrationOpen;
-      userCount = instance.userCount;
-    } catch {
-      // An unreachable server is reported by the submit handler with a real
-      // message; guessing here would only duplicate it worse.
-    }
-    // The first account is always allowed, whatever the instance says.
-    const mode: 'register' | 'login' = registrationOpen && userCount === 0 ? 'register' : 'login';
-
-    const panel = document.createElement('div');
-    panel.className = 'dialog__panel';
-    const title = document.createElement('h2');
-    title.className = 'dialog__title';
-    title.textContent = mode === 'register' ? '创建第一个账号' : '登录';
-
-    const hint = document.createElement('p');
-    hint.className = 'dialog__row';
-    hint.textContent =
-      mode === 'register' ? '第一个注册的账号会自动成为管理员。' : '请用管理员创建的账号登录。';
-
-    const username = document.createElement('input');
-    username.autocomplete = 'username';
-    username.placeholder = '用户名';
-    const password = document.createElement('input');
-    password.type = 'password';
-    password.autocomplete = mode === 'register' ? 'new-password' : 'current-password';
-    password.placeholder = '口令';
-
-    const userRow = document.createElement('label');
-    userRow.className = 'dialog__row';
-    userRow.append('用户名', username);
-    const passRow = document.createElement('label');
-    passRow.className = 'dialog__row';
-    passRow.append('口令', password);
-
-    const error = document.createElement('div');
-    error.className = 'reader__warning';
-    error.hidden = true;
-
-    const submit = document.createElement('button');
-    submit.className = 'dialog__button dialog__button--primary';
-    submit.textContent = mode === 'register' ? '创建并登录' : '登录';
-
-    const actions = document.createElement('div');
-    actions.className = 'dialog__actions';
-    actions.append(submit);
-    panel.append(title, hint, userRow, passRow, error, actions);
-    this.root.replaceChildren(panel);
-
-    const run = async (): Promise<void> => {
-      error.hidden = true;
-      submit.disabled = true;
-      try {
-        if (mode === 'register') await this.api.register(username.value.trim(), password.value);
-        else await this.api.login(username.value.trim(), password.value);
-        this.options.onSignedIn?.();
-      } catch (failure) {
-        error.hidden = false;
-        error.textContent = describe(failure);
-      } finally {
-        submit.disabled = false;
-      }
-    };
-
-    submit.addEventListener('click', () => void run());
-    password.addEventListener('keydown', (event) => {
-      if (event.key === 'Enter') void run();
-    });
-    username.focus();
-  }
-}
-
-/**
- * Turn a server error into something a person can act on.
- *
- * The codes are part of the API's compatibility promise, so mapping them here is
- * safe — and the server's own messages are English, while this UI is not.
- */
-function describe(failure: unknown): string {
-  const code = (failure as { code?: string }).code;
-  switch (code) {
-    case 'BAD_CREDENTIALS':
-      return '用户名或口令错误';
-    case 'REGISTRATION_DISABLED':
-      return '这个实例已关闭公开注册，请让管理员创建账号';
-    case 'PASSWORD_TOO_SHORT':
-      return '口令至少 8 位';
-    case 'USERNAME_TAKEN':
-      return '用户名已被占用';
-    case 'ACCOUNT_DISABLED':
-      return '账号已被停用';
-    case 'HTTP_ERROR':
-    case undefined:
-      return '无法连接服务端，检查地址与网络';
-    default:
-      return failure instanceof Error ? failure.message : '操作失败';
-  }
-}
diff --git a/web/src/ui/auth-view.tsx b/web/src/ui/auth-view.tsx
new file mode 100644
index 0000000..1a17f62
--- /dev/null
+++ b/web/src/ui/auth-view.tsx
@@ -0,0 +1,185 @@
+/**
+ * Sign-in.
+ *
+ * The first account on a fresh instance becomes the admin, so this screen has to
+ * know whether the instance is empty — showing a login form to the person setting
+ * the server up for the first time is the most common way a self-hosted product
+ * loses a user in the first two minutes.
+ *
+ * The instance probe is unauthenticated by design, so it can run before anyone
+ * has a token.
+ *
+ * This is the oldest screen in the client and the one that shows what the
+ * component layer is for: the mode, the two fields, the error line and the
+ * button's own disabled state used to be four DOM nodes mutated by hand from
+ * `run()`, and every one of them could disagree with the others after a failure.
+ * Here they are all drawn from the same state.
+ */
+
+import { ApiClient } from '../net/api.ts';
+import { mountUI } from './mount.ts';
+import type { JSX } from './vendor/preact.ts';
+
+export interface AuthHost {
+  onSignedIn?: () => void;
+}
+
+interface AuthState {
+  mode: 'register' | 'login';
+  hint: string;
+  username: string;
+  password: string;
+  error: string;
+  busy: boolean;
+}
+
+export class AuthView {
+  private readonly ui: ReturnType<typeof mountUI>;
+  private state: AuthState = {
+    mode: 'login',
+    hint: '请用管理员创建的账号登录。',
+    username: '',
+    password: '',
+    error: '',
+    busy: false,
+  };
+
+  constructor(
+    host: HTMLElement,
+    private readonly api: ApiClient,
+    private readonly options: AuthHost = {},
+  ) {
+    const root = document.createElement('div');
+    root.className = 'dialog';
+    host.replaceChildren(root);
+    this.ui = mountUI(root, () => this.view(), this.state);
+  }
+
+  async render(): Promise<void> {
+    let registrationOpen = true;
+    let userCount = 0;
+    try {
+      const instance = await this.api.instance();
+      registrationOpen = instance.registrationOpen;
+      userCount = instance.userCount;
+    } catch {
+      // An unreachable server is reported by the submit handler with a real
+      // message; guessing here would only duplicate it worse.
+    }
+    // The first account is always allowed, whatever the instance says.
+    const mode: AuthState['mode'] = registrationOpen && userCount === 0 ? 'register' : 'login';
+    this.state = {
+      ...this.state,
+      mode,
+      hint: mode === 'register' ? '第一个注册的账号会自动成为管理员。' : '请用管理员创建的账号登录。',
+    };
+    this.draw();
+  }
+
+  private draw(): void {
+    this.ui.update(this.state);
+  }
+
+  private view(): JSX.Element {
+    return <AuthPanel state={this.state} onPatch={(patch) => this.patch(patch)} onSubmit={() => void this.submit()} />;
+  }
+
+  private patch(patch: Partial<AuthState>): void {
+    this.state = { ...this.state, ...patch };
+    this.draw();
+  }
+
+  private async submit(): Promise<void> {
+    this.patch({ error: '', busy: true });
+    try {
+      if (this.state.mode === 'register') await this.api.register(this.state.username.trim(), this.state.password);
+      else await this.api.login(this.state.username.trim(), this.state.password);
+      this.options.onSignedIn?.();
+    } catch (failure) {
+      this.patch({ error: describe(failure) });
+    } finally {
+      this.patch({ busy: false });
+    }
+  }
+}
+
+/**
+ * The form itself.
+ *
+ * A component so the "busy" state, the error line and the button label are
+ * rendered from one value: the old version hid and unhid the error node and
+ * toggled `disabled` from inside an async function, which is how a rejected
+ * login could leave the button disabled for good.
+ */
+function AuthPanel({
+  state,
+  onPatch,
+  onSubmit,
+}: {
+  state: AuthState;
+  onPatch(patch: Partial<AuthState>): void;
+  onSubmit(): void;
+}): JSX.Element {
+  const registering = state.mode === 'register';
+  return (
+    <div className="dialog__panel">
+      <h2 className="dialog__title">{registering ? '创建第一个账号' : '登录'}</h2>
+      <p className="dialog__row">{state.hint}</p>
+      <label className="dialog__row">
+        用户名
+        <input
+          autoComplete="username"
+          placeholder="用户名"
+          value={state.username}
+          onInput={(event) => onPatch({ username: (event.currentTarget as HTMLInputElement).value })}
+        />
+      </label>
+      <label className="dialog__row">
+        口令
+        <input
+          type="password"
+          autoComplete={registering ? 'new-password' : 'current-password'}
+          placeholder="口令"
+          value={state.password}
+          onInput={(event) => onPatch({ password: (event.currentTarget as HTMLInputElement).value })}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') onSubmit();
+          }}
+        />
+      </label>
+      {state.error ? <div className="reader__warning">{state.error}</div> : null}
+      <div className="dialog__actions">
+        <button type="button" className="dialog__button dialog__button--primary" disabled={state.busy} onClick={onSubmit}>
+          {registering ? '创建并登录' : '登录'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Turn a server error into something a person can act on.
+ *
+ * The codes are part of the API's compatibility promise, so mapping them here is
+ * safe — and the server's own messages are English, while this UI is not.
+ */
+function describe(failure: unknown): string {
+  const code = (failure as { code?: string }).code;
+  switch (code) {
+    case 'BAD_CREDENTIALS':
+      return '用户名或口令错误';
+    case 'REGISTRATION_DISABLED':
+      return '这个实例已关闭公开注册，请让管理员创建账号';
+    case 'PASSWORD_TOO_SHORT':
+      return '口令至少 8 位';
+    case 'USERNAME_TAKEN':
+      return '用户名已被占用';
+    case 'ACCOUNT_DISABLED':
+      return '账号已被停用';
+    case 'HTTP_ERROR':
+    case undefined:
+      return '无法连接服务端，检查地址与网络';
+    default:
+      return failure instanceof Error ? failure.message : '操作失败';
+  }
+}
diff --git a/web/src/ui/dom.ts b/web/src/ui/dom.ts
index 75b7d8a..03575e4 100644
--- a/web/src/ui/dom.ts
+++ b/web/src/ui/dom.ts
@@ -1,10 +1,16 @@
 /**
  * A very small element helper.
  *
- * No framework, deliberately. The rendering layer is imperative DOM work
- * (pagination, injected documents, shadow roots, column measurement) where a
- * virtual DOM adds a layer of indirection between the code and the layout it is
- * measuring — exactly the layer this product cannot afford to debug through.
+ * Still no framework, and now scoped to the half of the UI that genuinely is
+ * imperative: the rendering layer (pagination, injected documents, shadow roots,
+ * column measurement) where a virtual DOM adds a layer of indirection between the
+ * code and the layout it is measuring — exactly the layer this product cannot
+ * afford to debug through.
+ *
+ * The chrome — shelves, panels, dialogs, the reader's topbar and settings — is
+ * Preact now (see `toolkit.tsx` and `mount.ts`). `el` survives for the code that
+ * builds DOM *to be measured* rather than DOM to be described, plus the few
+ * places a legacy screen still constructs a node by hand.
  */
 export type Child = Node | string | null | undefined | false;
 
diff --git a/web/src/ui/login-screen.ts b/web/src/ui/login-screen.ts
deleted file mode 100644
index 2a3d8ef..0000000
--- a/web/src/ui/login-screen.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { ApiError } from '../api/errors.ts';
-import type { ReaderApi } from '../api/client.ts';
-import type { InstanceInfo } from '../api/types.ts';
-import { clear, el } from './dom.ts';
-
-export interface LoginScreenOptions {
-  api: ReaderApi;
-  defaultServerUrl: string;
-  onAuthenticated(): void;
-  onServerUrlChange(url: string): Promise<void>;
-}
-
-/**
- * Sign-in, and the first-run experience.
- *
- * The first-run path is the one that decides whether a self-hosted product gets
- * adopted, so it is explicit rather than clever: probe the URL, show whether the
- * instance is fresh or already claimed, and only offer registration when the
- * server will actually accept it. Finding that out by submitting a form and
- * getting `REGISTRATION_DISABLED` back is the kind of first impression that
- * loses a user.
- */
-export class LoginScreen {
-  readonly element: HTMLDivElement;
-  private readonly serverInput: HTMLInputElement;
-  private readonly usernameInput: HTMLInputElement;
-  private readonly passwordInput: HTMLInputElement;
-  private readonly displayNameInput: HTMLInputElement;
-  private readonly submitButton: HTMLButtonElement;
-  private readonly errorText: HTMLDivElement;
-  private readonly notice: HTMLDivElement;
-  private instance: InstanceInfo | null = null;
-  private registering = false;
-
-  constructor(private readonly options: LoginScreenOptions) {
-    this.serverInput = el('input', {
-      attrs: { type: 'url', inputmode: 'url', autocomplete: 'url', placeholder: 'http://192.168.1.10:8080', value: options.defaultServerUrl },
-    });
-    this.usernameInput = el('input', { attrs: { type: 'text', autocomplete: 'username', autocapitalize: 'off', autocorrect: 'off', spellcheck: 'false' } });
-    this.passwordInput = el('input', { attrs: { type: 'password', autocomplete: 'current-password' } });
-    this.displayNameInput = el('input', { attrs: { type: 'text', autocomplete: 'nickname' } });
-    this.errorText = el('div', { className: 'error-text', attrs: { hidden: true } }) as HTMLDivElement;
-    this.notice = el('div', { className: 'notice', attrs: { hidden: true } }) as HTMLDivElement;
-    this.submitButton = el('button', {
-      className: 'button primary',
-      text: '登录',
-      attrs: { type: 'submit' },
-    }) as HTMLButtonElement;
-
-    const form = el('form', {
-      className: 'centered-form',
-      on: { submit: (event) => { event.preventDefault(); void this.submit(); } },
-      children: [
-        el('h1', { text: 'reader', attrs: { style: 'margin:0 0 .25rem;font-size:1.3rem;' } }),
-        el('p', { className: 'muted', text: '自部署书库阅读器', attrs: { style: 'margin:0 0 1.25rem;font-size:.85rem;' } }),
-        this.notice,
-        el('div', { className: 'field', children: [el('label', { text: '服务端地址' }), this.serverInput] }),
-        el('div', { className: 'field', children: [el('label', { text: '用户名' }), this.usernameInput] }),
-        el('div', { className: 'field', children: [el('label', { text: '密码' }), this.passwordInput] }),
-        el('div', {
-          className: 'field',
-          attrs: { hidden: true },
-          dataset: { role: 'display-name' },
-          children: [el('label', { text: '显示名（可选）' }), this.displayNameInput],
-        }),
-        this.submitButton,
-        el('div', { className: 'field', attrs: { style: 'margin-top:.75rem;' }, children: [
-          el('button', {
-            className: 'button',
-            text: '注册新账号',
-            attrs: { type: 'button', 'data-role': 'toggle-register' },
-            on: { click: () => this.toggleRegister() },
-          }),
-        ]}),
-        this.errorText,
-      ],
-    });
-
-    this.element = el('div', {
-      className: 'login-screen',
-      children: [form],
-    }) as HTMLDivElement;
-    this.element.style.cssText = 'flex:1 1 auto;min-height:0;display:flex;overflow-y:auto;';
-
-    // Probe as soon as the URL stops changing, so the button label is correct
-    // before the reader types anything into the credential fields.
-    let probeTimer: ReturnType<typeof setTimeout> | null = null;
-    this.serverInput.addEventListener('input', () => {
-      if (probeTimer) clearTimeout(probeTimer);
-      probeTimer = setTimeout(() => void this.probe(), 400);
-    });
-    this.usernameInput.addEventListener('input', () => {
-      if (this.registering && this.instance) {
-        this.displayNameInput.value = this.displayNameInput.value || this.usernameInput.value;
-      }
-    });
-
-    void this.probe();
-  }
-
-  private async probe(): Promise<void> {
-    const url = this.serverInput.value.trim();
-    if (!url) return;
-    this.options.api.setBaseUrl(url);
-    try {
-      this.instance = await this.options.api.instance();
-      await this.options.onServerUrlChange(url);
-      if (this.instance.userCount === 0) {
-        this.setNotice('这是一个全新的实例，第一个注册的账号会成为管理员。');
-        this.setRegistering(true);
-      } else if (this.instance.registrationOpen) {
-        this.setNotice(`已有 ${this.instance.userCount} 个账号，此实例开放注册。`);
-      } else {
-        this.clearNotice();
-      }
-    } catch (err) {
-      this.instance = null;
-      if (err instanceof ApiError && err.isConnectivity) {
-        this.setNotice('连不上这个地址。确认服务端已启动，且地址包含端口。', 'error');
-      } else if (err instanceof ApiError) {
-        this.setNotice(err.message, 'error');
-      }
-    }
-  }
-
-  private toggleRegister(): void {
-    this.setRegistering(!this.registering);
-  }
-
-  private setRegistering(registering: boolean): void {
-    this.registering = registering;
-    const displayNameField = this.element.querySelector('[data-role="display-name"]') as HTMLElement | null;
-    if (displayNameField) displayNameField.hidden = !registering;
-    this.submitButton.textContent = registering ? '注册并登录' : '登录';
-    this.passwordInput.setAttribute('autocomplete', registering ? 'new-password' : 'current-password');
-  }
-
-  private setNotice(text: string, kind: 'info' | 'error' = 'info'): void {
-    this.notice.hidden = false;
-    this.notice.textContent = text;
-    this.notice.style.background = kind === 'error'
-      ? 'color-mix(in srgb, #b6453a 14%, var(--reader-surface))'
-      : '';
-  }
-
-  private clearNotice(): void {
-    this.notice.hidden = true;
-  }
-
-  private showError(message: string): void {
-    this.errorText.hidden = false;
-    this.errorText.textContent = message;
-  }
-
-  private clearError(): void {
-    this.errorText.hidden = true;
-  }
-
-  private async submit(): Promise<void> {
-    this.clearError();
-    const url = this.serverInput.value.trim();
-    if (!url) {
-      this.showError('请填写服务端地址');
-      return;
-    }
-    this.options.api.setBaseUrl(url);
-    const username = this.usernameInput.value.trim();
-    const password = this.passwordInput.value;
-    if (!username || !password) {
-      this.showError('请填写用户名和密码');
-      return;
-    }
-    if (password.length < 8) {
-      this.showError('密码至少 8 位（服务端的硬性要求）');
-      return;
-    }
-
-    this.submitButton.disabled = true;
-    try {
-      if (this.registering) {
-        await this.options.api.register(username, password, this.displayNameInput.value.trim() || undefined);
-      } else {
-        await this.options.api.login(username, password);
-      }
-      await this.options.onServerUrlChange(url);
-      this.options.onAuthenticated();
-    } catch (err) {
-      if (err instanceof ApiError) {
-        if (err.isConnectivity) this.showError('连不上服务端，检查地址和网络');
-        else if (err.code === 'REGISTRATION_DISABLED') this.showError('此实例已关闭公开注册，请让管理员创建账号');
-        else if (err.code === 'PASSWORD_TOO_SHORT') this.showError('密码至少 8 位');
-        else if (err.isAuthFailure) this.showError('用户名或密码错误');
-        else this.showError(err.message);
-      } else {
-        this.showError(err instanceof Error ? err.message : '登录失败');
-      }
-    } finally {
-      this.submitButton.disabled = false;
-    }
-  }
-
-  /** Lets the router re-show the form after a session expiry. */
-  reset(message?: string): void {
-    this.passwordInput.value = '';
-    if (message) this.showError(message);
-    clear(this.errorText);
-    if (message) this.showError(message);
-    this.usernameInput.focus();
-  }
-}
diff --git a/web/src/ui/login-screen.tsx b/web/src/ui/login-screen.tsx
new file mode 100644
index 0000000..3a916c2
--- /dev/null
+++ b/web/src/ui/login-screen.tsx
@@ -0,0 +1,271 @@
+import { ApiError } from '../api/errors.ts';
+import type { ReaderApi } from '../api/client.ts';
+import type { InstanceInfo } from '../api/types.ts';
+import { mountUI } from './mount.ts';
+import { Notice } from './toolkit.tsx';
+import { type JSX } from './vendor/preact.ts';
+
+export interface LoginScreenOptions {
+  api: ReaderApi;
+  defaultServerUrl: string;
+  onAuthenticated(): void;
+  onServerUrlChange(url: string): Promise<void>;
+}
+
+interface LoginState {
+  serverUrl: string;
+  username: string;
+  password: string;
+  displayName: string;
+  registering: boolean;
+  busy: boolean;
+  error: string;
+  notice: string;
+  noticeKind: 'info' | 'error';
+  instance: InstanceInfo | null;
+}
+
+/**
+ * Sign-in, and the first-run experience.
+ *
+ * The first-run path is the one that decides whether a self-hosted product gets
+ * adopted, so it is explicit rather than clever: probe the URL, show whether the
+ * instance is fresh or already claimed, and only offer registration when the
+ * server will actually accept it. Finding that out by submitting a form and
+ * getting `REGISTRATION_DISABLED` back is the kind of first impression that
+ * loses a user.
+ *
+ * The whole screen is now a function of `LoginState`. The previous version kept
+ * eight node references and mutated them from five places — the notice, the
+ * registration toggle, the probe that resolves 400ms after the last keystroke,
+ * the submit handler and `reset()` — which meant a probe landing after a submit
+ * could re-label a button the user was already pressing.
+ */
+export class LoginScreen {
+  readonly element: HTMLDivElement;
+  private readonly ui: ReturnType<typeof mountUI>;
+  private state: LoginState;
+  /** The probe's debounce, on the instance so a re-render cannot drop it. */
+  private probeTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(private readonly options: LoginScreenOptions) {
+    this.state = {
+      serverUrl: options.defaultServerUrl,
+      username: '',
+      password: '',
+      displayName: '',
+      registering: false,
+      busy: false,
+      error: '',
+      notice: '',
+      noticeKind: 'info',
+      instance: null,
+    };
+
+    this.element = document.createElement('div');
+    this.element.className = 'login-screen';
+    this.element.style.cssText = 'flex:1 1 auto;min-height:0;display:flex;overflow-y:auto;';
+    this.ui = mountUI(this.element, () => this.view(), this.state);
+    this.installProbeListener();
+    void this.runProbe(this.state.serverUrl);
+  }
+
+  private draw(): void {
+    this.ui.update(this.state);
+  }
+
+  private patch(patch: Partial<LoginState>): void {
+    this.state = { ...this.state, ...patch };
+    this.draw();
+  }
+
+  private view(): JSX.Element {
+    const state = this.state;
+    return (
+      <form
+        className="centered-form"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void this.submit();
+        }}
+      >
+        <h1 style="margin:0 0 .25rem;font-size:1.3rem;">reader</h1>
+        <p className="muted" style="margin:0 0 1.25rem;font-size:.85rem;">
+          自部署书库阅读器
+        </p>
+        {state.notice ? <Notice>{state.notice}</Notice> : null}
+        <div className="field">
+          <label>服务端地址</label>
+          <input
+            type="url"
+            inputMode="url"
+            autoComplete="url"
+            placeholder="http://192.168.1.10:8080"
+            value={state.serverUrl}
+            onInput={(event) => this.onServerUrlChange((event.currentTarget as HTMLInputElement).value)}
+          />
+        </div>
+        <div className="field">
+          <label>用户名</label>
+          <input
+            type="text"
+            autoComplete="username"
+            autoCapitalize="off"
+            autocorrect="off"
+            spellcheck={false}
+            value={state.username}
+            onInput={(event) => this.onUsernameInput((event.currentTarget as HTMLInputElement).value)}
+          />
+        </div>
+        <div className="field">
+          <label>密码</label>
+          <input
+            type="password"
+            autoComplete={state.registering ? 'new-password' : 'current-password'}
+            value={state.password}
+            onInput={(event) => this.patch({ password: (event.currentTarget as HTMLInputElement).value })}
+          />
+        </div>
+        {state.registering ? (
+          <div className="field">
+            <label>显示名（可选）</label>
+            <input
+              type="text"
+              autoComplete="nickname"
+              value={state.displayName}
+              onInput={(event) => this.patch({ displayName: (event.currentTarget as HTMLInputElement).value })}
+            />
+          </div>
+        ) : null}
+        <button type="submit" className="button primary" disabled={state.busy}>
+          {state.registering ? '注册并登录' : '登录'}
+        </button>
+        <div className="field" style="margin-top:.75rem;">
+          <button type="button" className="button" onClick={() => this.toggleRegister()}>
+            注册新账号
+          </button>
+        </div>
+        {state.error ? <div className="error-text">{state.error}</div> : null}
+      </form>
+    );
+  }
+
+  private onServerUrlChange(value: string): void {
+    this.patch({ serverUrl: value });
+  }
+
+  private onUsernameInput(value: string): void {
+    const patch: Partial<LoginState> = { username: value };
+    // Pre-fill the display name from the username while registering, which is
+    // what the old version did from an `input` listener on the field.
+    if (this.state.registering && !this.state.displayName) patch.displayName = value;
+    this.patch(patch);
+  }
+
+  private toggleRegister(): void {
+    this.patch({ registering: !this.state.registering });
+  }
+
+  /**
+   * Probes the server URL once the reader stops changing it.
+   *
+   * Delegated to the container so it survives every re-render, with the debounce
+   * held on the instance: a listener registered per render would accumulate, and
+   * a timer owned by a render would be dropped by the next keystroke.
+   *
+   * The first probe also runs at construction, from the baked-in or remembered
+   * URL — which is what makes the button label correct before anything is typed.
+   */
+  private installProbeListener(): void {
+    this.element.addEventListener('input', (event) => {
+      const target = event.target as HTMLInputElement;
+      if (target.getAttribute('type') !== 'url') return;
+      if (this.probeTimer) clearTimeout(this.probeTimer);
+      this.probeTimer = setTimeout(() => {
+        this.probeTimer = null;
+        void this.runProbe(target.value);
+      }, 400);
+    });
+  }
+
+  private async runProbe(url: string): Promise<void> {
+    const trimmed = url.trim();
+    if (!trimmed) return;
+    this.options.api.setBaseUrl(trimmed);
+    try {
+      const instance = await this.options.api.instance();
+      await this.options.onServerUrlChange(trimmed);
+      this.patch({ instance, ...noticeForInstance(instance) });
+    } catch (err) {
+      this.patch({
+        instance: null,
+        ...(err instanceof ApiError && err.isConnectivity
+          ? { notice: '连不上这个地址。确认服务端已启动，且地址包含端口。', noticeKind: 'error' as const }
+          : err instanceof ApiError
+            ? { notice: err.message, noticeKind: 'error' as const }
+            : { notice: '', instance: null }),
+      });
+    }
+  }
+
+  private async submit(): Promise<void> {
+    const url = this.state.serverUrl.trim();
+    if (!url) {
+      this.patch({ error: '请填写服务端地址' });
+      return;
+    }
+    this.options.api.setBaseUrl(url);
+    const username = this.state.username.trim();
+    const password = this.state.password;
+    if (!username || !password) {
+      this.patch({ error: '请填写用户名和密码' });
+      return;
+    }
+    if (password.length < 8) {
+      this.patch({ error: '密码至少 8 位（服务端的硬性要求）' });
+      return;
+    }
+
+    this.patch({ error: '', busy: true });
+    try {
+      if (this.state.registering) {
+        await this.options.api.register(username, password, this.state.displayName.trim() || undefined);
+      } else {
+        await this.options.api.login(username, password);
+      }
+      await this.options.onServerUrlChange(url);
+      this.options.onAuthenticated();
+    } catch (err) {
+      this.patch({ error: describeSubmitError(err) });
+    } finally {
+      this.patch({ busy: false });
+    }
+  }
+
+  /** Lets the router re-show the form after a session expiry. */
+  reset(message?: string): void {
+    this.patch({ password: '', ...(message ? { error: message } : {}) });
+    if (message) this.patch({ error: message });
+  }
+}
+
+function noticeForInstance(instance: InstanceInfo): Partial<LoginState> {
+  if (instance.userCount === 0) {
+    return { notice: '这是一个全新的实例，第一个注册的账号会成为管理员。', noticeKind: 'info', registering: true };
+  }
+  if (instance.registrationOpen) {
+    return { notice: `已有 ${instance.userCount} 个账号，此实例开放注册。`, noticeKind: 'info' };
+  }
+  return { notice: '', noticeKind: 'info' };
+}
+
+function describeSubmitError(err: unknown): string {
+  if (err instanceof ApiError) {
+    if (err.isConnectivity) return '连不上服务端，检查地址和网络';
+    if (err.code === 'REGISTRATION_DISABLED') return '此实例已关闭公开注册，请让管理员创建账号';
+    if (err.code === 'PASSWORD_TOO_SHORT') return '密码至少 8 位';
+    if (err.isAuthFailure) return '用户名或密码错误';
+    return err.message;
+  }
+  return err instanceof Error ? err.message : '登录失败';
+}
diff --git a/web/src/ui/manager-screen.ts b/web/src/ui/manager-screen.ts
deleted file mode 100644
index 2f9cd2e..0000000
--- a/web/src/ui/manager-screen.ts
+++ /dev/null
@@ -1,869 +0,0 @@
-import { ApiError } from '../api/errors.ts';
-import type { ReaderApi } from '../api/client.ts';
-import type { BrowseEntry, BrowseListing, ConflictPolicy, ShelfAction } from '../api/types.ts';
-import { clear, el, formatBytes, formatDate } from './dom.ts';
-
-export interface ManagerScreenOptions {
-  api: ReaderApi;
-  onClose(): void;
-  onSignedOut(): void;
-}
-
-/** Long-press, in milliseconds, before a touch starts a selection. */
-const LONG_PRESS_MS = 450;
-
-/**
- * 书库管理 — the library as a file manager.
- *
- * ## Why this exists
- *
- * The shelf answers "what can I read". It cannot answer "where did my book go",
- * and that is the question a self-hosted library actually generates: a title
- * that does not appear after a rescan has no explanation anywhere in the app,
- * because a book's DTO never carries its path. This screen is the one place the
- * `BOOKS_DIR` is visible, and it is also the only one that writes to it.
- *
- * ## The three decisions that shape it
- *
- *  1. **Hidden entries are shown, with the reason.** `.trash`, `@eaDir` and
- *     friends are skipped by the scanner by design. Filtering them out here too
- *     would hide exactly the files a reader is looking for — the ones that are on
- *     disk but not on the shelf — so they are listed with a badge instead.
- *  2. **Selection is explicit, and destructive actions need a second tap.**
- *     Thumb-scrolling a NAS library with a delete button on every row is one
- *     mis-tap away from data loss. Rows navigate; selection is entered through
- *     the long-press or the ⋯ button, and delete always asks.
- *  3. **The write controls disappear on a read-only mount.** `:ro` is the
- *     documented deployment, so the common case is "this screen can only look",
- *     and offering buttons that answer 403 teaches the reader to distrust the UI.
- */
-export class ManagerScreen {
-  readonly element: HTMLDivElement;
-  private readonly list: HTMLDivElement;
-  private readonly crumbRow: HTMLDivElement;
-  private readonly statusLine: HTMLDivElement;
-  private readonly actionBar: HTMLDivElement;
-  private readonly selectionCount: HTMLDivElement;
-  private readonly mkdirButton: HTMLButtonElement;
-  private readonly uploadButton: HTMLButtonElement;
-  private readonly uploadInput: HTMLInputElement;
-  private readonly listBody: HTMLDivElement;
-
-  private current = '';
-  private listing: BrowseListing | null = null;
-  /** Paths ticked for a batch operation. Empty means "navigate" mode. */
-  private readonly selected = new Set<string>();
-  private loading = false;
-  /** A write is in flight; every other write is refused until it settles. */
-  private busy = false;
-  /**
-   * The message a completed write left for the next render.
-   *
-   * Held across the reload a write triggers, because that reload's own status
-   * line is the directory summary — and the summary is not an answer to "did it
-   * work".
-   */
-  private outcome: string | null = null;
-  private longPressTimer: ReturnType<typeof setTimeout> | null = null;
-  private longPressFired = false;
-
-  constructor(private readonly options: ManagerScreenOptions) {
-    this.crumbRow = el('div', { className: 'manager-crumbs' }) as HTMLDivElement;
-    this.statusLine = el('div', { className: 'manager-status muted' }) as HTMLDivElement;
-    this.list = el('div', { className: 'manager-list' }) as HTMLDivElement;
-    this.selectionCount = el('div', { className: 'manager-selection', attrs: { hidden: true } }) as HTMLDivElement;
-    this.actionBar = el('div', { className: 'manager-actions' }) as HTMLDivElement;
-    this.mkdirButton = el('button', {
-      className: 'icon-button',
-      text: '＋',
-      attrs: { type: 'button', 'aria-label': '新建文件夹' },
-      on: { click: () => void this.promptMkdir() },
-    }) as HTMLButtonElement;
-    // Hidden from the DOM to `display: none`, never hidden by *moving* it: a
-    // file input removed from the document loses its value in some WebViews, and
-    // the second upload after a cancel would then send nothing.
-    this.uploadInput = el('input', {
-      className: 'manager-upload-input',
-      attrs: { type: 'file', multiple: true, 'aria-hidden': 'true', tabindex: '-1' },
-      on: { change: () => void this.handlePicked() },
-    }) as HTMLInputElement;
-    this.uploadButton = el('button', {
-      className: 'icon-button',
-      text: '⬆',
-      attrs: { type: 'button', 'aria-label': '上传书籍' },
-      on: { click: () => this.uploadInput.click() },
-    }) as HTMLButtonElement;
-
-    this.listBody = el('div', {
-      className: 'manager-body',
-      children: [this.list, this.statusLine],
-    }) as HTMLDivElement;
-
-    const header = el('div', {
-      className: 'panel-header',
-      children: [
-        el('button', {
-          className: 'icon-button',
-          text: '←',
-          attrs: { type: 'button', 'aria-label': '返回书架' },
-          on: { click: () => options.onClose() },
-        }),
-        this.crumbRow,
-        this.uploadButton,
-        this.mkdirButton,
-      ],
-    });
-
-    this.element = el('div', {
-      className: 'manager-screen',
-      children: [header, this.listBody, this.actionBar, this.selectionCount, this.uploadInput],
-    }) as HTMLDivElement;
-
-    // Clicking the empty area (not a row) clears a selection, which is the
-    // gesture people already have for "never mind".
-    this.listBody.addEventListener('click', (event) => {
-      if (event.target === this.listBody || event.target === this.list) this.clearSelection();
-    });
-  }
-
-  async open(): Promise<void> {
-    await this.load('');
-  }
-
-  private async load(path: string): Promise<void> {
-    if (this.loading) return;
-    this.loading = true;
-    // An outcome message set by a write outlives the reload it triggers.
-    // Otherwise "已更新 2 本" is replaced by the directory's file counts a tick
-    // later, and the one thing the user needs to read is the one thing they
-    // never see.
-    if (!this.outcome) this.setStatus('载入中…');
-    try {
-      const listing = await this.options.api.browse(path);
-      this.listing = listing;
-      this.current = listing.path;
-      this.clearSelection();
-      this.renderCrumbs();
-      this.renderEntries();
-      this.applyWritable(listing.writable);
-      // No `setStatus('')` here: listing a directory *succeeds with something to
-      // say*, and that thing is what `renderEntries` just wrote — how many
-      // entries, how big, and how many the scanner is skipping. Clearing it left
-      // the screen with no answer to any of those.
-      if (this.outcome) {
-        const message = this.outcome;
-        this.outcome = null;
-        this.toast(message);
-      }
-    } catch (err) {
-      this.handleError(err);
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  /**
-   * Reflects the mount's writability into the UI, in two places for two reasons.
-   *
-   * The button is hidden outright: a control that can only answer 403 teaches the
-   * reader to distrust every other control. The data attribute is on the *screen*
-   * so the stylesheet owns the rest — the per-row ⋯ menu is a write affordance
-   * and is dimmed by CSS rather than by a second branch in the render path.
-   */
-  private applyWritable(writable: boolean): void {
-    // The upload control disappears for the same reason the ＋ does: a control
-    // that can only answer 403 teaches the reader to distrust every other one.
-    this.mkdirButton.hidden = !writable;
-    this.uploadButton.hidden = !writable;
-    this.element.dataset['writable'] = String(writable);
-  }
-
-  private renderCrumbs(): void {
-    clear(this.crumbRow);
-    const listing = this.listing;
-    if (!listing) return;
-    for (const [index, crumb] of listing.crumbs.entries()) {
-      if (index > 0) this.crumbRow.append(el('span', { className: 'manager-crumb-sep', text: '/' }));
-      const isLast = index === listing.crumbs.length - 1;
-      this.crumbRow.append(
-        el('button', {
-          className: 'manager-crumb',
-          text: crumb.name,
-          attrs: { type: 'button', 'aria-current': String(isLast) },
-          on: { click: () => void this.load(crumb.path) },
-        }),
-      );
-    }
-  }
-
-  private renderEntries(): void {
-    clear(this.list);
-    const listing = this.listing;
-    if (!listing) return;
-    if (listing.entries.length === 0) {
-      this.list.append(el('div', { className: 'empty-state', children: [el('p', { text: '这个文件夹是空的' })] }));
-      this.setStatus(listing.writable ? '空文件夹 · 可以用右上角的 ＋ 新建子目录' : '空文件夹');
-      return;
-    }
-    for (const entry of listing.entries) this.list.append(this.row(entry));
-
-    const hidden = listing.entries.filter((entry) => entry.hidden || entry.hiddenByRule).length;
-    const parts = [`${listing.dirs} 个文件夹`, `${listing.files} 个文件`, formatBytes(listing.size)];
-    if (hidden > 0) parts.push(`${hidden} 个被扫描忽略`);
-    this.setStatus(parts.join(' · '));
-  }
-
-  /**
-   * One row.
-   *
-   * The row itself navigates; the checkbox that appears in selection mode is what
-   * selects. That split is the whole reason a destructive tap cannot happen by
-   * accident while scrolling a library of ten thousand files.
-   */
-  private row(entry: BrowseEntry): HTMLDivElement {
-    const selectable = entry.type !== 'other';
-    const checkbox = el('span', { className: 'manager-check', attrs: { 'aria-hidden': 'true' } });
-    const name = el('div', {
-      className: 'manager-name',
-      children: [
-        el('span', { className: 'manager-icon', text: entry.type === 'dir' ? '📁' : '📄' }),
-        el('span', { className: 'manager-label', text: entry.name }),
-      ],
-    });
-    const meta = el('div', {
-      className: 'manager-meta muted',
-      children: [
-        el('span', { text: entry.type === 'dir' ? '' : formatBytes(entry.size) }),
-        el('span', { text: formatDate(entry.mtime) }),
-        entry.hiddenByRule
-          ? el('span', { className: 'manager-badge warn', text: '扫描忽略' })
-          : entry.scanned
-            ? el('span', { className: 'manager-badge', text: '书籍' })
-            : null,
-        entry.hidden && !entry.hiddenByRule ? el('span', { className: 'manager-badge', text: '隐藏' }) : null,
-      ],
-    });
-
-    const more = el('button', {
-      className: 'icon-button manager-more',
-      text: '⋯',
-      attrs: { type: 'button', 'aria-label': `${entry.name} 的操作` },
-      on: {
-        click: (event) => {
-          event.stopPropagation();
-          void this.openEntryMenu(entry);
-        },
-      },
-    }) as HTMLButtonElement;
-
-    const node = el('div', {
-      className: 'manager-row',
-      attrs: { 'data-type': entry.type, role: 'button', tabindex: '0' },
-      children: [checkbox, name, meta, more],
-    }) as HTMLDivElement;
-    node.dataset['path'] = entry.path;
-
-    const activate = (): void => {
-      if (!selectable) return;
-      if (this.selected.size > 0) {
-        this.toggle(entry);
-        return;
-      }
-      if (entry.type === 'dir') void this.load(entry.path);
-    };
-
-    node.addEventListener('click', activate);
-    node.addEventListener('keydown', (event) => {
-      if ((event as KeyboardEvent).key === 'Enter' || (event as KeyboardEvent).key === ' ') {
-        event.preventDefault();
-        activate();
-      }
-    });
-
-    // Long press enters selection mode, which is how a file manager on a phone
-    // says "I mean this one, not the one I tapped".
-    if (selectable && this.selected.size > 0) node.dataset['selected'] = String(this.selected.has(entry.path));
-    const start = (): void => {
-      this.longPressFired = false;
-      if (!selectable) return;
-      this.longPressTimer = setTimeout(() => {
-        this.longPressTimer = null;
-        this.longPressFired = true;
-        this.toggle(entry);
-      }, LONG_PRESS_MS);
-    };
-    const cancel = (): void => {
-      if (this.longPressTimer !== null) clearTimeout(this.longPressTimer);
-      this.longPressTimer = null;
-    };
-    node.addEventListener('touchstart', start, { passive: true });
-    node.addEventListener('touchend', cancel);
-    node.addEventListener('touchcancel', cancel);
-    node.addEventListener('touchmove', cancel);
-    node.addEventListener('mousedown', start);
-    node.addEventListener('mouseup', cancel);
-    node.addEventListener('mouseleave', cancel);
-    // A long press already acted; the click that follows must not navigate.
-    node.addEventListener('click', (event) => {
-      if (!this.longPressFired) return;
-      this.longPressFired = false;
-      event.stopImmediatePropagation();
-    }, true);
-
-    return node;
-  }
-
-  private toggle(entry: BrowseEntry): void {
-    if (this.selected.has(entry.path)) this.selected.delete(entry.path);
-    else this.selected.add(entry.path);
-    const node = this.list.querySelector<HTMLElement>(`[data-path="${cssEscape(entry.path)}"]`);
-    if (node) node.dataset['selected'] = String(this.selected.has(entry.path));
-    this.renderSelection();
-  }
-
-  private clearSelection(): void {
-    this.selected.clear();
-    for (const node of this.list.querySelectorAll<HTMLElement>('.manager-row')) {
-      node.dataset['selected'] = 'false';
-    }
-    this.renderSelection();
-  }
-
-  /**
-   * The batch action bar.
-   *
-   * Rendered only while something is selected: an always-present toolbar of
-   * move/delete buttons on a screen whose primary gesture is tapping a folder is
-   * a permanent invitation to the wrong action.
-   */
-  private renderSelection(): void {
-    clear(this.actionBar);
-    const count = this.selected.size;
-    if (count === 0) {
-      this.actionBar.hidden = true;
-      this.selectionCount.hidden = true;
-      return;
-    }
-    this.actionBar.hidden = false;
-    this.selectionCount.hidden = false;
-    this.selectionCount.textContent = `已选 ${count} 项`;
-    const writable = this.listing?.writable ?? false;
-
-    this.actionBar.append(
-      el('button', {
-        className: 'button',
-        text: '取消',
-        attrs: { type: 'button' },
-        on: { click: () => this.clearSelection() },
-      }),
-    );
-    if (writable) {
-      if (count === 1) {
-        const only = [...this.selected][0]!;
-        const entry = this.listing?.entries.find((candidate) => candidate.path === only);
-        this.actionBar.append(
-          el('button', {
-            className: 'button',
-            text: '重命名',
-            attrs: { type: 'button' },
-            on: { click: () => void this.promptRename(only, entry?.name ?? '') },
-          }),
-        );
-      }
-      this.actionBar.append(
-        el('button', {
-          className: 'button',
-          text: '改资料',
-          attrs: { type: 'button' },
-          on: { click: () => void this.promptBatchMetadata() },
-        }),
-        el('button', {
-          className: 'button',
-          text: '下架',
-          attrs: { type: 'button' },
-          on: { click: () => void this.batchShelf('remove') },
-        }),
-        el('button', {
-          className: 'button',
-          text: '移动…',
-          attrs: { type: 'button' },
-          on: { click: () => void this.promptMove() },
-        }),
-        el('button', {
-          className: 'button danger',
-          text: '删除',
-          attrs: { type: 'button' },
-          on: { click: () => void this.confirmDelete() },
-        }),
-      );
-    } else {
-      this.actionBar.append(
-        el('span', { className: 'muted', text: '书库是只读挂载，无法修改' }),
-      );
-    }
-  }
-
-  private async openEntryMenu(entry: BrowseEntry): Promise<void> {
-    if (!this.listing?.writable) {
-      this.toast('书库是只读挂载，无法修改');
-      return;
-    }
-    const action = await this.pick(`「${entry.name}」`, [
-      { value: 'select', label: '选择' },
-      { value: 'metadata', label: '改资料' },
-      { value: 'shelve', label: '从书架拿掉' },
-      { value: 'rename', label: '重命名' },
-      { value: 'move', label: '移动到…' },
-      { value: 'delete', label: '删除' },
-    ]);
-    if (action === 'select') {
-      this.toggle(entry);
-      return;
-    }
-    // Everything below acts on exactly this row, so the selection is replaced
-    // rather than merged: an action started from one row's menu must not quietly
-    // include a batch ticked earlier and now off screen.
-    this.selectOnly(entry.path);
-    if (action === 'metadata') return this.promptBatchMetadata();
-    if (action === 'shelve') return this.batchShelf('remove');
-    if (action === 'rename') return this.promptRename(entry.path, entry.name);
-    if (action === 'move') return this.promptMove();
-    if (action === 'delete') return this.confirmDelete();
-  }
-
-  private selectOnly(path: string): void {
-    this.selected.clear();
-    this.selected.add(path);
-    for (const node of this.list.querySelectorAll<HTMLElement>('.manager-row')) {
-      node.dataset['selected'] = String(node.dataset['path'] === path);
-    }
-    this.renderSelection();
-  }
-
-  /**
-   * Uploads the picked files into the directory currently open.
-   *
-   * The progress line is the whole point of the display: a book is routinely
-   * hundreds of megabytes on a phone over Wi-Fi, and a screen that says nothing
-   * for two minutes reads as broken. It is also the only place in this client
-   * where a request can outlive a screen change, so the input is cleared *before*
-   * the upload rather than after — picking the same file twice in a row must
-   * work.
-   */
-  private async handlePicked(): Promise<void> {
-    const files = [...(this.uploadInput.files ?? [])];
-    this.uploadInput.value = '';
-    if (files.length === 0) return;
-
-    const policy = await this.pickConflictPolicy();
-    if (!policy) return;
-
-    const total = files.reduce((sum, file) => sum + file.size, 0);
-    this.setBusy(true);
-    try {
-      const result = await this.options.api.upload(files, this.current, policy, (fraction) => {
-        this.setStatus(`上传中… ${Math.round(fraction * 100)}%（${formatBytes(total)}）`);
-      });
-      this.reportUpload(result);
-    } catch (err) {
-      this.handleError(err);
-    } finally {
-      this.setBusy(false);
-    }
-  }
-
-  /**
-   * Asks what should happen to a name that is already taken.
-   *
-   * Asked before the bytes move rather than after a 409, because by then the
-   * user has waited for the whole upload twice. `覆盖` is the only answer that can
-   * lose a book, so it is described that way instead of being the default.
-   */
-  private async pickConflictPolicy(): Promise<ConflictPolicy | null> {
-    const answer = await this.pick('同名文件怎么办？', [
-      { value: 'rename', label: '两份都留（加 (2)）' },
-      { value: 'skip', label: '跳过已有的' },
-      { value: 'overwrite', label: '覆盖（会替换原文件）' },
-      { value: 'fail', label: '有重名就整批不动' },
-    ]);
-    return answer as ConflictPolicy | null;
-  }
-
-  private reportUpload(result: Awaited<ReturnType<ReaderApi['upload']>>): void {
-    const parts: string[] = [];
-    if (result.uploaded.length > 0) parts.push(`已入库 ${result.uploaded.length} 个文件`);
-    if (result.skipped.length > 0) parts.push(`跳过 ${result.skipped.length} 个`);
-    const added = result.scan?.added ?? 0;
-    parts.push(added > 0 ? `新增 ${added} 本` : '没有新书');
-    // A skipped file is the one thing the user has to act on, so it is named
-    // rather than counted: "跳过 1 个" without a name is a dead end.
-    const first = result.skipped[0];
-    if (first) parts.push(`（${first.name}：${first.reason}）`);
-    this.toast(parts.join(' · '));
-  }
-
-  /**
-   * Rewrites the metadata of every selected path at once.
-   *
-   * The fields are optional on purpose — this is a *patch*, and an empty field
-   * means "leave it alone", which is the only way one dialog can serve both "fill
-   * in the missing author on forty files" and "fix the series name".
-   */
-  private async promptBatchMetadata(): Promise<void> {
-    const paths = [...this.selected];
-    if (paths.length === 0) return;
-    const fields = await this.batchMetadataDialog(paths.length);
-    if (fields === null) return;
-    if (Object.keys(fields).length === 0) {
-      this.toast('没有填写任何字段');
-      return;
-    }
-    await this.mutate(
-      () => this.options.api.browseBatchMetadata(paths, fields),
-      `改资料（${paths.length} 项）`,
-      (result) => this.reportBatch(result),
-    );
-  }
-
-  private async batchShelf(action: ShelfAction): Promise<void> {
-    const paths = [...this.selected];
-    if (paths.length === 0) return;
-    const label = action === 'remove' ? '下架' : '上架';
-    if (action === 'remove') {
-      const ok = await this.confirm(
-        `${label} ${paths.length} 项？`,
-        '只是从你的书架上拿掉，磁盘上的文件一个都不会动，随时可以放回来。',
-      );
-      if (!ok) return;
-    }
-    await this.mutate(
-      () => this.options.api.browseBatchShelf(paths, action),
-      `${label}（${paths.length} 项）`,
-      (result) => this.reportBatch(result),
-    );
-  }
-
-  private reportBatch(result: { applied: number; failed: Array<{ path: string; reason: string }> }): string {
-    if (result.applied === 0 && result.failed.length > 0) {
-      return `没有可处理的书籍（${result.failed.length} 项不是书）`;
-    }
-    // A path that is not a book is expected — a folder of images, a `.nfo` — and
-    // saying so is what stops "已更新 12 本" from looking like the other two were
-    // silently dropped.
-    const skipped = result.failed.length > 0 ? `，跳过 ${result.failed.length} 项` : '';
-    return `已更新 ${result.applied} 本${skipped}`;
-  }
-
-  /** A form of optional fields; absent means "do not touch". */
-  private batchMetadataDialog(count: number): Promise<Record<string, string> | null> {
-    const FIELDS = [
-      { key: 'author', label: '作者' },
-      { key: 'publisher', label: '出版社' },
-      { key: 'series', label: '系列' },
-      { key: 'seriesIndex', label: '系列序号' },
-      { key: 'language', label: '语言' },
-      { key: 'tags', label: '标签（逗号分隔）' },
-      { key: 'pubdate', label: '出版日期' },
-    ];
-    return new Promise((resolve) => {
-      const inputs = new Map<string, HTMLInputElement>();
-      const rows = FIELDS.map((field) => {
-        const input = el('input', { attrs: { type: 'text', placeholder: '留空则不改' } }) as HTMLInputElement;
-        inputs.set(field.key, input);
-        return el('label', { className: 'dialog-field', children: [el('span', { text: field.label }), input] });
-      });
-      const close = (result: Record<string, string> | null): void => {
-        overlay.remove();
-        resolve(result);
-      };
-      const form = el('form', {
-        className: 'dialog',
-        on: {
-          submit: (event) => {
-            event.preventDefault();
-            const patch: Record<string, string> = {};
-            for (const [key, input] of inputs) {
-              const value = input.value.trim();
-              if (value !== '') patch[key] = value;
-            }
-            close(patch);
-          },
-        },
-        children: [
-          el('h3', { text: `改资料（${count} 项）` }),
-          el('p', { className: 'muted', text: '留空的字段保持不变。目录会写成它里面每一本书的资料。' }),
-          // The fields are their own scroller so the actions below them stay
-          // reachable: a sheet that scrolls whole puts 保存 past the fold, and a
-          // form with no visible way to commit it reads as a dead end.
-          el('div', { className: 'dialog-fields', children: rows }),
-          el('div', {
-            className: 'dialog-actions',
-            children: [
-              el('button', { className: 'button', text: '取消', attrs: { type: 'button' }, on: { click: () => close(null) } }),
-              el('button', { className: 'button primary', text: '保存', attrs: { type: 'submit' } }),
-            ],
-          }),
-        ],
-      });
-      const overlay = el('div', {
-        className: 'dialog-overlay',
-        on: {
-          click: (event) => {
-            if (event.target === overlay) close(null);
-          },
-        },
-        children: [form],
-      }) as HTMLDivElement;
-      this.element.append(overlay);
-      inputs.get('author')?.focus();
-    });
-  }
-
-  /**
-   * Blocks a second write while one is in flight.
-   *
-   * Uploads are long and the bar stays on screen; a second tap would start a
-   * second upload into the same directory, and the two would interleave their
-   * status lines.
-   */
-  private setBusy(busy: boolean): void {
-    this.busy = busy;
-    this.uploadButton.disabled = busy;
-    this.mkdirButton.disabled = busy;
-  }
-
-  private async promptRename(path: string, currentName: string): Promise<void> {
-    const name = await this.prompt('重命名', currentName);
-    if (name === null || name.trim() === '' || name === currentName) return;
-    await this.mutate(() => this.options.api.browseRename(path, name.trim()), `重命名 ${currentName}`);
-  }
-
-  private async promptMkdir(): Promise<void> {
-    const name = await this.prompt('新建文件夹', '');
-    if (name === null || name.trim() === '') return;
-    await this.mutate(() => this.options.api.browseMkdir(this.current, name.trim()), `新建 ${name.trim()}`);
-  }
-
-  /**
-   * Moving a batch asks for a path rather than offering a folder picker.
-   *
-   * A picker would be a second navigation UI inside the first, and the one place
-   * a reader is most likely to land in the wrong folder is precisely where the
-   * files go. A typed, library-relative path is unambiguous — and the server
-   * resolves it through the same containment check as everything else.
-   */
-  private async promptMove(): Promise<void> {
-    const target = await this.prompt('移动到（书库内的路径，留空为根目录）', this.current);
-    if (target === null) return;
-    const paths = [...this.selected];
-    await this.mutate(() => this.options.api.browseMove(paths, target.trim()), `移动 ${paths.length} 项`);
-  }
-
-  private async confirmDelete(): Promise<void> {
-    const count = this.selected.size;
-    const ok = await this.confirm(
-      `删除 ${count} 项？`,
-      '文件会从磁盘上直接删除，不进回收站。删除后需要重新扫描书库，书架才会更新。',
-    );
-    if (!ok) return;
-    const paths = [...this.selected];
-    await this.mutate(() => this.options.api.browseDelete(paths), `删除 ${paths.length} 项`);
-  }
-
-  /**
-   * Runs a mutating call, reports its outcome, and reloads only on success.
-   *
-   * The order matters and is the reason this is not two calls at the call sites:
-   * reloading after a *failed* write would replace the error message with a fresh
-   * directory listing, so the screen would look like the rename simply did not
-   * happen — the worst possible answer to "why did nothing change".
-   */
-  private async mutate(
-    action: () => Promise<unknown>,
-    label: string,
-    describe?: (result: never) => string,
-  ): Promise<void> {
-    if (this.busy) return;
-    this.toast(`${label}…`);
-    let result: unknown;
-    try {
-      result = await action();
-    } catch (err) {
-      this.handleError(err);
-      return;
-    }
-    // The server's own counts beat a generic "完成": a batch that touched two
-    // books out of five selected is a different outcome from one that touched
-    // five, and only the response knows which happened.
-    this.outcome = describe ? describe(result as never) : `${label} 完成`;
-    await this.load(this.current);
-  }
-
-  private setStatus(text: string): void {
-    this.statusLine.textContent = text;
-  }
-
-  private toast(text: string): void {
-    this.setStatus(text);
-  }
-
-  private handleError(err: unknown): void {
-    if (err instanceof ApiError) {
-      if (err.isAuthFailure) {
-        this.options.onSignedOut();
-        return;
-      }
-      this.setStatus(err.message);
-      return;
-    }
-    this.setStatus(err instanceof Error ? err.message : '出错了');
-  }
-
-  // ---- dialogs ----
-  //
-  // Built on the spot rather than kept as members: each one is a single question
-  // with one answer, and a dialog that outlives its question is how a stale
-  // "delete?" prompt ends up attached to a different file.
-
-  private prompt(title: string, value: string): Promise<string | null> {
-    return new Promise((resolve) => {
-      const input = el('input', { attrs: { type: 'text', value } }) as HTMLInputElement;
-      const close = (result: string | null): void => {
-        overlay.remove();
-        resolve(result);
-      };
-      const form = el('form', {
-        className: 'dialog',
-        on: {
-          submit: (event) => {
-            event.preventDefault();
-            close(input.value);
-          },
-        },
-        children: [
-          el('h3', { text: title }),
-          input,
-          el('div', {
-            className: 'dialog-actions',
-            children: [
-              el('button', { className: 'button', text: '取消', attrs: { type: 'button' }, on: { click: () => close(null) } }),
-              el('button', { className: 'button primary', text: '确定', attrs: { type: 'submit' } }),
-            ],
-          }),
-        ],
-      });
-      const overlay = el('div', {
-        className: 'dialog-overlay',
-        on: {
-          click: (event) => {
-            if (event.target === overlay) close(null);
-          },
-        },
-        children: [form],
-      }) as HTMLDivElement;
-      this.element.append(overlay);
-      input.focus();
-      input.select();
-    });
-  }
-
-  private confirm(title: string, body: string): Promise<boolean> {
-    return new Promise((resolve) => {
-      const close = (result: boolean): void => {
-        overlay.remove();
-        resolve(result);
-      };
-      const overlay = el('div', {
-        className: 'dialog-overlay',
-        on: {
-          click: (event) => {
-            if (event.target === overlay) close(false);
-          },
-        },
-        children: [
-          el('div', {
-            className: 'dialog',
-            children: [
-              el('h3', { text: title }),
-              el('p', { className: 'muted', text: body }),
-              el('div', {
-                className: 'dialog-actions',
-                children: [
-                  el('button', { className: 'button', text: '取消', attrs: { type: 'button' }, on: { click: () => close(false) } }),
-                  el('button', { className: 'button danger', text: '删除', attrs: { type: 'button' }, on: { click: () => close(true) } }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      }) as HTMLDivElement;
-      this.element.append(overlay);
-    });
-  }
-
-  private async pick(title: string, options: Array<{ value: string; label: string }>): Promise<string | null> {
-    // De-duplicated by value: two rows that resolve to the same action are one
-    // action, and showing it twice reads as two different things.
-    const seen = new Set<string>();
-    const unique = options.filter((option) => {
-      if (seen.has(option.value)) return false;
-      seen.add(option.value);
-      return true;
-    });
-    return new Promise((resolve) => {
-      const close = (result: string | null): void => {
-        overlay.remove();
-        resolve(result);
-      };
-      const overlay = el('div', {
-        className: 'dialog-overlay',
-        on: {
-          click: (event) => {
-            if (event.target === overlay) close(null);
-          },
-        },
-        children: [
-          el('div', {
-            className: 'dialog sheet',
-            children: [
-              el('h3', { text: title }),
-              el('div', {
-                className: 'dialog-list',
-                children: unique.map((option) =>
-                  el('button', {
-                    className: 'button',
-                    text: option.label,
-                    attrs: { type: 'button' },
-                    on: { click: () => close(option.value) },
-                  }),
-                ),
-              }),
-              el('div', {
-                className: 'dialog-actions',
-                children: [el('button', { className: 'button', text: '取消', attrs: { type: 'button' }, on: { click: () => close(null) } })],
-              }),
-            ],
-          }),
-        ],
-      }) as HTMLDivElement;
-      this.element.append(overlay);
-    });
-  }
-
-  dispose(): void {
-    if (this.longPressTimer !== null) clearTimeout(this.longPressTimer);
-  }
-}
-
-/**
- * CSS.escape with a fallback.
- *
- * `querySelector` with a raw path breaks on a folder named `第01卷 [前篇]` or one
- * containing a quote — both entirely ordinary in a Chinese comic library — and
- * `CSS.escape` is not present in every WebView the Android shell runs on.
- */
-function cssEscape(value: string): string {
-  const globalCss = (globalThis as { CSS?: { escape?: (text: string) => string } }).CSS;
-  if (globalCss?.escape) return globalCss.escape(value);
-  return value.replace(/[^a-zA-Z0-9_-]/g, (char) => `\\${char}`);
-}
diff --git a/web/src/ui/manager-screen.tsx b/web/src/ui/manager-screen.tsx
new file mode 100644
index 0000000..713278a
--- /dev/null
+++ b/web/src/ui/manager-screen.tsx
@@ -0,0 +1,955 @@
+import { ApiError } from '../api/errors.ts';
+import type { ReaderApi } from '../api/client.ts';
+import type { BrowseEntry, BrowseListing, ConflictPolicy, ShelfAction } from '../api/types.ts';
+import { formatBytes, formatDate } from './dom.ts';
+import { mountUI } from './mount.ts';
+import { Button, IconButton } from './toolkit.tsx';
+import { type ComponentChildren, type JSX, useEffect, useRef, useState } from './vendor/preact.ts';
+
+export interface ManagerScreenOptions {
+  api: ReaderApi;
+  onClose(): void;
+  onSignedOut(): void;
+}
+
+/** Long-press, in milliseconds, before a touch starts a selection. */
+const LONG_PRESS_MS = 450;
+
+/** One question with one answer. Held by the screen, rendered by the tree. */
+type Dialog =
+  | { kind: 'prompt'; title: string; value: string; resolve(value: string | null): void }
+  | { kind: 'confirm'; title: string; body: string; resolve(ok: boolean): void }
+  | {
+      kind: 'pick';
+      title: string;
+      options: Array<{ value: string; label: string }>;
+      resolve(value: string | null): void;
+    }
+  | {
+      kind: 'form';
+      title: string;
+      count: number;
+      fields: Array<{ key: string; label: string }>;
+      resolve(fields: Record<string, string> | null): void;
+    };
+
+interface ManagerState {
+  path: string;
+  listing: BrowseListing | null;
+  /** Paths ticked for a batch operation. Empty means "navigate" mode. */
+  selected: ReadonlySet<string>;
+  loading: boolean;
+  /** A write is in flight; every other write is refused until it settles. */
+  busy: boolean;
+  status: string;
+  dialog: Dialog | null;
+}
+
+/**
+ * 书库管理 — the library as a file manager.
+ *
+ * ## Why this exists
+ *
+ * The shelf answers "what can I read". It cannot answer "where did my book go",
+ * and that is the question a self-hosted library actually generates: a title
+ * that does not appear after a rescan has no explanation anywhere in the app,
+ * because a book's DTO never carries its path. This screen is the one place the
+ * `BOOKS_DIR` is visible, and it is also the only one that writes to it.
+ *
+ * ## The three decisions that shape it
+ *
+ *  1. **Hidden entries are shown, with the reason.** `.trash`, `@eaDir` and
+ *     friends are skipped by the scanner by design. Filtering them out here too
+ *     would hide exactly the files a reader is looking for — the ones that are on
+ *     disk but not on the shelf — so they are listed with a badge instead.
+ *  2. **Selection is explicit, and destructive actions need a second tap.**
+ *     Thumb-scrolling a NAS library with a delete button on every row is one
+ *     mis-tap away from data loss. Rows navigate; selection is entered through
+ *     the long-press or the ⋯ button, and delete always asks.
+ *  3. **The write controls disappear on a read-only mount.** `:ro` is the
+ *     documented deployment, so the common case is "this screen can only look",
+ *     and offering buttons that answer 403 teaches the reader to distrust the UI.
+ *
+ * ## What the framework changed here
+ *
+ * This screen was previously a class that held a reference to every node it would
+ * later mutate, plus five separate render methods that had to agree with each
+ * other, plus dialog builders that appended an overlay to `this.element` and
+ * removed it by hand on every exit path. The state below is the same set of
+ * facts, but the tree is a *function* of it, so "the selection bar is stale after
+ * a rename" and "the ⋯ menu is still up after the screen reloaded" are no longer
+ * expressible. The long-press and the gesture bookkeeping stay imperative,
+ * because they are a timer, not markup.
+ */
+export class ManagerScreen {
+  readonly element: HTMLDivElement;
+  private readonly state: ManagerState = {
+    path: '',
+    listing: null,
+    selected: new Set<string>(),
+    loading: false,
+    busy: false,
+    status: '',
+    dialog: null,
+  };
+  private readonly ui: ReturnType<typeof mountUI>;
+  private readonly uploadInput = document.createElement('input');
+  /** Re-renders the tree from the current state. The whole update path. */
+  private readonly draw: () => void;
+  /**
+   * The message a completed write left for the next render.
+   *
+   * Held across the reload a write triggers, because that reload's own status
+   * line is the directory summary — and the summary is not an answer to "did it
+   * work".
+   */
+  private outcome: string | null = null;
+
+  constructor(private readonly options: ManagerScreenOptions) {
+    this.element = document.createElement('div');
+    this.element.className = 'manager-screen';
+    // A file input lives outside the tree on purpose: it is never re-created, so
+    // its `files` list and its focus survive every re-render. On some WebViews a
+    // file input removed from the document loses its value, and the second upload
+    // after a cancel would then send nothing.
+    this.uploadInput.type = 'file';
+    this.uploadInput.multiple = true;
+    this.uploadInput.className = 'manager-upload-input';
+    this.uploadInput.setAttribute('aria-hidden', 'true');
+    this.uploadInput.tabIndex = -1;
+    this.uploadInput.addEventListener('change', () => void this.handlePicked());
+
+    const host = document.createElement('div');
+    // `display: contents`, added in the stylesheet as `.manager-ui`, so the host
+    // adds no layout box: the screen stays the flex column, and the header, the
+    // scroller and the action bar stay its children as far as CSS is concerned.
+    // Without that, the screen would have one child that is not `min-height: 0`
+    // and the list would push the action bar off the bottom of a phone.
+    host.className = 'manager-ui';
+    this.element.append(host, this.uploadInput);
+
+    this.draw = (): void => this.ui.update(this.state);
+    this.ui = mountUI(host, (state) => this.view(state as ManagerState), this.state);
+  }
+
+  /** The mount's writability, read by CSS rather than branched on in the tree. */
+  private applyWritable(writable: boolean): void {
+    // On the *screen*, not on a wrapper: the stylesheet dims the per-row ⋯ menu
+    // through this attribute, and that affordance is drawn by the row.
+    this.element.dataset['writable'] = String(writable);
+  }
+
+  async open(): Promise<void> {
+    await this.load('');
+  }
+
+  private async load(path: string): Promise<void> {
+    if (this.state.loading) return;
+    this.state.loading = true;
+    if (!this.state.status) this.setStatus('载入中…');
+    this.draw();
+    try {
+      const listing = await this.options.api.browse(path);
+      this.state.listing = listing;
+      this.state.path = listing.path;
+      this.applyWritable(listing.writable);
+      // The status line describes what was just done, when something was. A
+      // plain directory listing has nothing to report but the summary the tree
+      // computes, so the load message is dropped — and an *outcome* set by a
+      // completed write is re-applied after it, because it is the one message the
+      // reader is looking for and the summary is not an answer to it.
+      this.state.status = this.outcome ?? '';
+      // A reload invalidates any selection: the paths it held may no longer be on
+      // screen, and a batch action that includes an invisible row is the one way
+      // this screen can delete something the reader did not tick.
+      this.state.selected = new Set<string>();
+      // The status line says what a directory listing *is* — how many entries, how
+      // big, how many the scanner is skipping — so the load message is dropped
+      // here and the tree renders the summary instead. A message set by a
+      // completed write is kept, because that is an answer the reader asked for
+      // and the summary is not.
+    } catch (err) {
+      this.handleError(err);
+    } finally {
+      this.state.loading = false;
+      this.draw();
+    }
+  }
+
+  private setStatus(text: string): void {
+    this.state.status = text;
+  }
+
+  private toast(text: string): void {
+    this.state.status = text;
+    this.draw();
+  }
+
+  private select(paths: Iterable<string>): void {
+    this.state.selected = new Set(paths);
+    this.draw();
+  }
+
+  private toggle(entry: BrowseEntry): void {
+    const selected = new Set(this.state.selected);
+    if (selected.has(entry.path)) selected.delete(entry.path);
+    else selected.add(entry.path);
+    this.state.selected = selected;
+    this.draw();
+  }
+
+  /** True when a delete was confirmed and the paths it covered. */
+  private selectedList(): string[] {
+    return [...this.state.selected];
+  }
+
+  private handleError(err: unknown): void {
+    if (err instanceof ApiError) {
+      if (err.isAuthFailure) {
+        this.options.onSignedOut();
+        return;
+      }
+      this.setStatus(err.message);
+      return;
+    }
+    this.setStatus(err instanceof Error ? err.message : '出错了');
+  }
+
+  // ---- the tree ----
+
+  private view(state: ManagerState): ComponentChildren {
+    const listing = state.listing;
+    const writable = listing?.writable ?? false;
+    return (
+      <>
+        <div className="panel-header">
+          <IconButton label="返回书架" onClick={() => this.options.onClose()}>
+            ←
+          </IconButton>
+          <div className="manager-crumbs">
+            {(listing?.crumbs ?? []).map((crumb, index) => (
+              <>
+                {index > 0 ? <span className="manager-crumb-sep">/</span> : null}
+                <button
+                  type="button"
+                  key={`${crumb.path}#${index}`}
+                  className="manager-crumb"
+                  aria-current={index === (listing?.crumbs.length ?? 0) - 1}
+                  onClick={() => void this.load(crumb.path)}
+                >
+                  {crumb.name}
+                </button>
+              </>
+            ))}
+          </div>
+          {/* Hidden rather than omitted, with `hidden` as the state: a control
+              that can only answer 403 teaches the reader to distrust every other
+              control, and *which* controls are missing is what this attribute
+              says. */}
+          <IconButton label="上传书籍" hidden={!writable} disabled={state.busy} onClick={() => this.uploadInput.click()}>
+            ⬆
+          </IconButton>
+          <IconButton label="新建文件夹" hidden={!writable} disabled={state.busy} onClick={() => void this.promptMkdir()}>
+            ＋
+          </IconButton>
+        </div>
+        <div
+          className="manager-body"
+          onClick={(event) => {
+            // Clicking the empty area clears a selection, which is the gesture
+            // people already have for "never mind". The check is on the target so
+            // a click inside a row (which bubbles) does not.
+            if (event.target === event.currentTarget) this.select([]);
+          }}
+        >
+          <div className="manager-list">
+            {listing && listing.entries.length === 0 ? (
+              <div className="empty-state">
+                <p>这个文件夹是空的</p>
+              </div>
+            ) : null}
+            {(listing?.entries ?? []).map((entry) => (
+              <Row
+                key={entry.path}
+                entry={entry}
+                selecting={state.selected.size > 0}
+                selected={state.selected.has(entry.path)}
+                onActivate={() => this.activate(entry)}
+                onToggle={() => this.toggle(entry)}
+                onMenu={() => void this.openEntryMenu(entry)}
+              />
+            ))}
+          </div>
+          <div className="manager-status muted">{state.status || this.summary(listing)}</div>
+        </div>
+        <SelectionBar
+          count={state.selected.size}
+          writable={writable}
+          only={[...state.selected][0]}
+          entries={listing?.entries ?? []}
+          onClear={() => this.select([])}
+          onRename={(path, name) => void this.promptRename(path, name)}
+          onMetadata={() => void this.promptBatchMetadata()}
+          onShelve={() => void this.batchShelf('remove')}
+          onMove={() => void this.promptMove()}
+          onDelete={() => void this.confirmDelete()}
+        />
+        {state.selected.size > 0 ? <div className="manager-selection">已选 {state.selected.size} 项</div> : null}
+        {state.dialog ? (
+          <DialogView dialog={state.dialog} onClose={(answer) => this.closeDialog(answer)} />
+        ) : null}
+      </>
+    );
+  }
+
+  /**
+   * The directory summary, shown until something has something better to say.
+   *
+   * Kept as a function of the listing rather than written into the status line at
+   * load time, because the two used to fight: a report set by a completed write
+   * was overwritten by the summary of the reload that write triggered, so the one
+   * message the reader had to read was the one message they never saw.
+   */
+  private summary(listing: BrowseListing | null): string {
+    if (listing === null) return '';
+    if (listing.entries.length === 0) {
+      return listing.writable ? '空文件夹 · 可以用右上角的 ＋ 新建子目录' : '空文件夹';
+    }
+    const hidden = listing.entries.filter((entry) => entry.hidden || entry.hiddenByRule).length;
+    const parts = [`${listing.dirs} 个文件夹`, `${listing.files} 个文件`, formatBytes(listing.size)];
+    if (hidden > 0) parts.push(`${hidden} 个被扫描忽略`);
+    return parts.join(' · ');
+  }
+
+  /**
+   * One tap on a row.
+   *
+   * The row navigates; the checkbox that appears in selection mode is what
+   * selects. That split is the whole reason a destructive tap cannot happen while
+   * scrolling a library of ten thousand files.
+   */
+  private activate(entry: BrowseEntry): void {
+    if (entry.type === 'other') return;
+    if (this.state.selected.size > 0) {
+      this.toggle(entry);
+      return;
+    }
+    if (entry.type === 'dir') void this.load(entry.path);
+  }
+
+  // ---- selection actions ----
+
+  private async openEntryMenu(entry: BrowseEntry): Promise<void> {
+    if (!this.state.listing?.writable) {
+      this.toast('书库是只读挂载，无法修改');
+      return;
+    }
+    const action = await this.pick(`「${entry.name}」`, [
+      { value: 'select', label: '选择' },
+      { value: 'metadata', label: '改资料' },
+      { value: 'shelve', label: '从书架拿掉' },
+      { value: 'rename', label: '重命名' },
+      { value: 'move', label: '移动到…' },
+      { value: 'delete', label: '删除' },
+    ]);
+    if (action === 'select') {
+      this.toggle(entry);
+      return;
+    }
+    // Everything below acts on exactly this row, so the selection is replaced
+    // rather than merged: an action started from one row's menu must not quietly
+    // include a batch ticked earlier and now off screen.
+    this.select([entry.path]);
+    if (action === 'metadata') return this.promptBatchMetadata();
+    if (action === 'shelve') return this.batchShelf('remove');
+    if (action === 'rename') return this.promptRename(entry.path, entry.name);
+    if (action === 'move') return this.promptMove();
+    if (action === 'delete') return this.confirmDelete();
+  }
+
+  private async promptRename(path: string, currentName: string): Promise<void> {
+    const name = await this.prompt('重命名', currentName);
+    if (name === null || name.trim() === '' || name === currentName) return;
+    await this.mutate(() => this.options.api.browseRename(path, name.trim()), `重命名 ${currentName}`);
+  }
+
+  private async promptMkdir(): Promise<void> {
+    const name = await this.prompt('新建文件夹', '');
+    if (name === null || name.trim() === '') return;
+    await this.mutate(() => this.options.api.browseMkdir(this.state.path, name.trim()), `新建 ${name.trim()}`);
+  }
+
+  /**
+   * Moving a batch asks for a path rather than offering a folder picker.
+   *
+   * A picker would be a second navigation UI inside the first, and the one place
+   * a reader is most likely to land in the wrong folder is precisely where the
+   * files go. A typed, library-relative path is unambiguous — and the server
+   * resolves it through the same containment check as everything else.
+   */
+  private async promptMove(): Promise<void> {
+    const target = await this.prompt('移动到（书库内的路径，留空为根目录）', this.state.path);
+    if (target === null) return;
+    const paths = this.selectedList();
+    await this.mutate(() => this.options.api.browseMove(paths, target.trim()), `移动 ${paths.length} 项`);
+  }
+
+  private async confirmDelete(): Promise<void> {
+    const count = this.state.selected.size;
+    const ok = await this.confirm(
+      `删除 ${count} 项？`,
+      '文件会从磁盘上直接删除，不进回收站。删除后需要重新扫描书库，书架才会更新。',
+    );
+    if (!ok) return;
+    const paths = this.selectedList();
+    await this.mutate(() => this.options.api.browseDelete(paths), `删除 ${paths.length} 项`);
+  }
+
+  /**
+   * Rewrites the metadata of every selected path at once.
+   *
+   * The fields are optional on purpose — this is a *patch*, and an empty field
+   * means "leave it alone", which is the only way one dialog can serve both "fill
+   * in the missing author on forty files" and "fix the series name".
+   */
+  private async promptBatchMetadata(): Promise<void> {
+    const paths = this.selectedList();
+    if (paths.length === 0) return;
+    const fields = await this.batchMetadataDialog(paths.length);
+    if (fields === null) return;
+    if (Object.keys(fields).length === 0) {
+      this.toast('没有填写任何字段');
+      return;
+    }
+    await this.mutate(
+      () => this.options.api.browseBatchMetadata(paths, fields),
+      `改资料（${paths.length} 项）`,
+      (result) => this.reportBatch(result),
+    );
+  }
+
+  private async batchShelf(action: ShelfAction): Promise<void> {
+    const paths = this.selectedList();
+    if (paths.length === 0) return;
+    const label = action === 'remove' ? '下架' : '上架';
+    if (action === 'remove') {
+      const ok = await this.confirm(
+        `${label} ${paths.length} 项？`,
+        '只是从你的书架上拿掉，磁盘上的文件一个都不会动，随时可以放回来。',
+      );
+      if (!ok) return;
+    }
+    await this.mutate(
+      () => this.options.api.browseBatchShelf(paths, action),
+      `${label}（${paths.length} 项）`,
+      (result) => this.reportBatch(result),
+    );
+  }
+
+  /**
+   * Uploads the picked files into the directory currently open.
+   *
+   * The progress line is the whole point of the display: a book is routinely
+   * hundreds of megabytes on a phone over Wi-Fi, and a screen that says nothing
+   * for two minutes reads as broken. The input is cleared *before* the upload
+   * rather than after, so picking the same file twice in a row works.
+   */
+  private async handlePicked(): Promise<void> {
+    const files = [...(this.uploadInput.files ?? [])];
+    this.uploadInput.value = '';
+    if (files.length === 0) return;
+
+    const policy = await this.pickConflictPolicy();
+    if (!policy) return;
+
+    const total = files.reduce((sum, file) => sum + file.size, 0);
+    this.state.busy = true;
+    this.draw();
+    try {
+      const result = await this.options.api.upload(files, this.state.path, policy, (fraction) => {
+        this.toast(`上传中… ${Math.round(fraction * 100)}%（${formatBytes(total)}）`);
+      });
+      this.reportUpload(result);
+    } catch (err) {
+      this.handleError(err);
+    } finally {
+      this.state.busy = false;
+      this.draw();
+    }
+  }
+
+  /**
+   * Asks what should happen to a name that is already taken.
+   *
+   * Asked before the bytes move rather than after a 409, because by then the
+   * user has waited for the whole upload twice. `覆盖` is the only answer that can
+   * lose a book, so it is described that way instead of being the default.
+   */
+  private async pickConflictPolicy(): Promise<ConflictPolicy | null> {
+    const answer = await this.pick('同名文件怎么办？', [
+      { value: 'rename', label: '两份都留（加 (2)）' },
+      { value: 'skip', label: '跳过已有的' },
+      { value: 'overwrite', label: '覆盖（会替换原文件）' },
+      { value: 'fail', label: '有重名就整批不动' },
+    ]);
+    return answer as ConflictPolicy | null;
+  }
+
+  private reportUpload(result: Awaited<ReturnType<ReaderApi['upload']>>): void {
+    const parts: string[] = [];
+    if (result.uploaded.length > 0) parts.push(`已入库 ${result.uploaded.length} 个文件`);
+    if (result.skipped.length > 0) parts.push(`跳过 ${result.skipped.length} 个`);
+    const added = result.scan?.added ?? 0;
+    parts.push(added > 0 ? `新增 ${added} 本` : '没有新书');
+    // A skipped file is the one thing the user has to act on, so it is named
+    // rather than counted: "跳过 1 个" without a name is a dead end.
+    const first = result.skipped[0];
+    if (first) parts.push(`（${first.name}：${first.reason}）`);
+    this.toast(parts.join(' · '));
+  }
+
+  private reportBatch(result: { applied: number; failed: Array<{ path: string; reason: string }> }): string {
+    if (result.applied === 0 && result.failed.length > 0) {
+      return `没有可处理的书籍（${result.failed.length} 项不是书）`;
+    }
+    // A path that is not a book is expected — a folder of images, a `.nfo` — and
+    // saying so is what stops "已更新 12 本" from looking like the other two were
+    // silently dropped.
+    const skipped = result.failed.length > 0 ? `，跳过 ${result.failed.length} 项` : '';
+    return `已更新 ${result.applied} 本${skipped}`;
+  }
+
+  /**
+   * Runs a mutating call, reports its outcome, and reloads only on success.
+   *
+   * The order matters and is the reason this is not two calls at the call sites:
+   * reloading after a *failed* write would replace the error message with a fresh
+   * directory listing, so the screen would look like the rename simply did not
+   * happen — the worst possible answer to "why did nothing change".
+   */
+  private async mutate(
+    action: () => Promise<unknown>,
+    label: string,
+    describe?: (result: never) => string,
+  ): Promise<void> {
+    if (this.state.busy) return;
+    this.toast(`${label}…`);
+    let result: unknown;
+    try {
+      result = await action();
+    } catch (err) {
+      this.handleError(err);
+      this.draw();
+      return;
+    }
+    // The server's own counts beat a generic "完成": a batch that touched two
+    // books out of five selected is a different outcome from one that touched
+    // five, and only the response knows which happened. It outlives the reload
+    // that `load` triggers, because `load` no longer overwrites the status line.
+    this.outcome = describe ? describe(result as never) : `${label} 完成`;
+    this.setStatus(this.outcome);
+    await this.load(this.state.path);
+    this.outcome = null;
+  }
+
+  // ---- dialogs ----
+  //
+  // One dialog at a time, held in state rather than appended to the DOM. Each is
+  // a question with a single answer, and a dialog that outlives its question is
+  // how a stale "delete?" prompt ends up attached to a different file.
+
+  private batchMetadataDialog(count: number): Promise<Record<string, string> | null> {
+    return new Promise((resolve) => {
+      this.state.dialog = {
+        kind: 'form',
+        title: `改资料（${count} 项）`,
+        count,
+        fields: [
+          { key: 'author', label: '作者' },
+          { key: 'publisher', label: '出版社' },
+          { key: 'series', label: '系列' },
+          { key: 'seriesIndex', label: '系列序号' },
+          { key: 'language', label: '语言' },
+          { key: 'tags', label: '标签（逗号分隔）' },
+          { key: 'pubdate', label: '出版日期' },
+        ],
+        resolve,
+      };
+      this.draw();
+    });
+  }
+
+  private prompt(title: string, value: string): Promise<string | null> {
+    return new Promise((resolve) => {
+      this.state.dialog = { kind: 'prompt', title, value, resolve };
+      this.draw();
+    });
+  }
+
+  /**
+   * A destructive confirmation.
+   *
+   * The confirm button is labelled 删除 in both places this is used — deleting
+   * files and taking books off the shelf — because it is the same word for "yes,
+   * do the thing I picked"; the body is what says which thing. The old version
+   * passed a label through from each call site, which is how the same dialog
+   * ended up saying two different things about the same button.
+   */
+  private confirm(title: string, body: string): Promise<boolean> {
+    return new Promise((resolve) => {
+      this.state.dialog = { kind: 'confirm', title, body, resolve };
+      this.draw();
+    });
+  }
+
+  private async pick(title: string, options: Array<{ value: string; label: string }>): Promise<string | null> {
+    // De-duplicated by value: two rows that resolve to the same action are one
+    // action, and showing it twice reads as two different things.
+    const seen = new Set<string>();
+    const unique = options.filter((option) => {
+      if (seen.has(option.value)) return false;
+      seen.add(option.value);
+      return true;
+    });
+    return new Promise((resolve) => {
+      this.state.dialog = { kind: 'pick', title, options: unique, resolve };
+      this.draw();
+    });
+  }
+
+  /**
+   * Closes the open dialog with an answer, exactly once.
+   *
+   * The union is the honest type here: three of the four dialogs answer with a
+   * string, one with a boolean, one with a record, and the *shape* of the answer
+   * is known from `dialog.kind` at the moment it is resolved. The single guarded
+   * cast below is what keeps that knowledge in one place instead of at every call
+   * site.
+   */
+  private closeDialog(answer: string | boolean | Record<string, string> | null): void {
+    const dialog = this.state.dialog;
+    this.state.dialog = null;
+    this.draw();
+    if (!dialog) return;
+    if (dialog.kind === 'prompt') dialog.resolve(answer as string | null);
+    else if (dialog.kind === 'confirm') dialog.resolve(answer as boolean);
+    else if (dialog.kind === 'pick') dialog.resolve(answer as string | null);
+    else dialog.resolve(answer as Record<string, string> | null);
+  }
+
+  dispose(): void {
+    this.closeDialog(null);
+    this.ui.unmount();
+  }
+}
+
+/**
+ * One row.
+ *
+ * Kept a component so the long-press timer lives in the row that owns it: a
+ * timer held by the screen and pointing at "the last row touched" is how a long
+ * press turns into a selection of the row the finger has since left.
+ */
+interface RowProps {
+  entry: BrowseEntry;
+  selecting: boolean;
+  selected: boolean;
+  onActivate(): void;
+  onToggle(): void;
+  onMenu(): void;
+}
+
+function Row({ entry, selecting, selected, onActivate, onToggle, onMenu }: RowProps): JSX.Element {
+  const selectable = entry.type !== 'other';
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const fired = useRef(false);
+  const [down, setDown] = useState(false);
+
+  const cancel = (): void => {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  // A row can be unmounted mid-press (a reload, a navigation), and a timer that
+  // outlives its row would select a path that is no longer on screen.
+  useEffect(() => cancel, []);
+
+  const start = (): void => {
+    fired.current = false;
+    if (!selectable) return;
+    timer.current = setTimeout(() => {
+      timer.current = null;
+      fired.current = true;
+      onToggle();
+    }, LONG_PRESS_MS);
+  };
+
+  const meta: ComponentChildren[] = [
+    <span>{entry.type === 'dir' ? '' : formatBytes(entry.size)}</span>,
+    <span>{formatDate(entry.mtime)}</span>,
+  ];
+  if (entry.hiddenByRule) meta.push(<span className="manager-badge warn">扫描忽略</span>);
+  else if (entry.scanned) meta.push(<span className="manager-badge">书籍</span>);
+  if (entry.hidden && !entry.hiddenByRule) meta.push(<span className="manager-badge">隐藏</span>);
+
+  return (
+    <div
+      className="manager-row"
+      data-type={entry.type}
+      data-selected={String(selected)}
+      data-down={String(down)}
+      role="button"
+      tabIndex={0}
+      onClick={(event) => {
+        // A long press already acted; the click that follows must not navigate.
+        if (fired.current) {
+          fired.current = false;
+          event.stopPropagation();
+          return;
+        }
+        onActivate();
+      }}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onActivate();
+        }
+      }}
+      onTouchStart={start}
+      onTouchEnd={cancel}
+      onTouchCancel={cancel}
+      onTouchMove={cancel}
+      onMouseDown={() => {
+        setDown(true);
+        start();
+      }}
+      onMouseUp={() => {
+        setDown(false);
+        cancel();
+      }}
+      onMouseLeave={() => {
+        setDown(false);
+        cancel();
+      }}
+    >
+      <span className="manager-check" aria-hidden="true" />
+      <div className="manager-name">
+        <span className="manager-icon">{entry.type === 'dir' ? '📁' : '📄'}</span>
+        <span className="manager-label">{entry.name}</span>
+      </div>
+      <div className="manager-meta muted">{meta}</div>
+      {selectable || selecting ? (
+        <button
+          type="button"
+          className="icon-button manager-more"
+          aria-label={`${entry.name} 的操作`}
+          onClick={() => {
+            cancel();
+            onMenu();
+          }}
+        >
+          ⋯
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * The batch action bar.
+ *
+ * Rendered only while something is selected: an always-present toolbar of
+ * move/delete buttons on a screen whose primary gesture is tapping a folder is a
+ * permanent invitation to the wrong action.
+ */
+interface SelectionBarProps {
+  count: number;
+  writable: boolean;
+  only: string | undefined;
+  entries: BrowseEntry[];
+  onClear(): void;
+  onRename(path: string, name: string): void;
+  onMetadata(): void;
+  onShelve(): void;
+  onMove(): void;
+  onDelete(): void;
+}
+
+function SelectionBar(props: SelectionBarProps): JSX.Element {
+  if (props.count === 0) return <div className="manager-actions" hidden />;
+  const name = props.entries.find((entry) => entry.path === props.only)?.name ?? '';
+  return (
+    <div className="manager-actions">
+      <Button onClick={props.onClear}>取消</Button>
+      {props.writable ? (
+        <>
+          {props.count === 1 && props.only !== undefined ? (
+            <Button onClick={() => props.onRename(props.only!, name)}>重命名</Button>
+          ) : null}
+          <Button onClick={props.onMetadata}>改资料</Button>
+          <Button onClick={props.onShelve}>下架</Button>
+          <Button onClick={props.onMove}>移动…</Button>
+          <Button className="danger" onClick={props.onDelete}>
+            删除
+          </Button>
+        </>
+      ) : (
+        <span className="muted">书库是只读挂载，无法修改</span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * The dialog currently open, as markup.
+ *
+ * Presentational on purpose: it reports an answer through `onClose` and the
+ * screen is what clears its own state and resolves the promise. Resolving from
+ * inside the view (which is what a `dialog.resolve` call here would be) leaves
+ * the state set, so the dialog stays on screen after it was answered — exactly
+ * the bug the old "remove the overlay by hand on every exit path" code had, with
+ * fewer exit paths to miss.
+ */
+function DialogView({
+  dialog,
+  onClose,
+}: {
+  dialog: Dialog;
+  onClose(answer: string | boolean | Record<string, string> | null): void;
+}): JSX.Element {
+  const close = (answer: string | boolean | Record<string, string> | null): void => onClose(answer);
+  return (
+    <div
+      className="dialog-overlay"
+      onClick={(event) => {
+        if (event.target === event.currentTarget) close(dialog.kind === 'confirm' ? false : null);
+      }}
+    >
+      {dialog.kind === 'prompt' ? (
+        <PromptDialog
+          title={dialog.title}
+          value={dialog.value}
+          onClose={(value) => close(value)}
+        />
+      ) : null}
+      {dialog.kind === 'confirm' ? (
+        <div className="dialog">
+          <h3>{dialog.title}</h3>
+          <p className="muted">{dialog.body}</p>
+          <div className="dialog-actions">
+            <Button onClick={() => close(false)}>取消</Button>
+            <Button className="danger" onClick={() => close(true)}>
+              删除
+            </Button>
+          </div>
+        </div>
+      ) : null}
+      {dialog.kind === 'pick' ? (
+        <div className="dialog sheet">
+          <h3>{dialog.title}</h3>
+          <div className="dialog-list">
+            {dialog.options.map((option) => (
+              <Button key={option.value} onClick={() => close(option.value)}>
+                {option.label}
+              </Button>
+            ))}
+          </div>
+          <div className="dialog-actions">
+            <Button onClick={() => close(null)}>取消</Button>
+          </div>
+        </div>
+      ) : null}
+      {dialog.kind === 'form' ? <MetadataDialog dialog={dialog} onClose={(fields) => close(fields)} /> : null}
+    </div>
+  );
+}
+
+function PromptDialog({
+  title,
+  value,
+  onClose,
+}: {
+  title: string;
+  value: string;
+  onClose(value: string | null): void;
+}): JSX.Element {
+  const input = useRef<HTMLInputElement | null>(null);
+  useEffect(() => {
+    input.current?.focus();
+    input.current?.select();
+  }, []);
+  return (
+    <form
+      className="dialog"
+      onSubmit={(event) => {
+        event.preventDefault();
+        onClose(input.current?.value ?? '');
+      }}
+    >
+      <h3>{title}</h3>
+      <input ref={input} type="text" defaultValue={value} />
+      <div className="dialog-actions">
+        <Button onClick={() => onClose(null)}>取消</Button>
+        <Button type="submit" className="primary">
+          确定
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+function MetadataDialog({
+  dialog,
+  onClose,
+}: {
+  dialog: Extract<Dialog, { kind: 'form' }>;
+  onClose(fields: Record<string, string> | null): void;
+}): JSX.Element {
+  const inputs = useRef(new Map<string, HTMLInputElement>());
+  return (
+    <form
+      className="dialog"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const patch: Record<string, string> = {};
+        for (const [key, input] of inputs.current) {
+          const value = input.value.trim();
+          if (value !== '') patch[key] = value;
+        }
+        onClose(patch);
+      }}
+    >
+      <h3>{dialog.title}</h3>
+      <p className="muted">留空的字段保持不变。目录会写成它里面每一本书的资料。</p>
+      {/* The fields are their own scroller so the actions below them stay
+          reachable: a sheet that scrolls whole puts 保存 past the fold, and a form
+          with no visible way to commit it reads as a dead end. */}
+      <div className="dialog-fields">
+        {dialog.fields.map((field) => (
+          <label className="dialog-field" key={field.key}>
+            <span>{field.label}</span>
+            <input
+              type="text"
+              placeholder="留空则不改"
+              ref={(node) => {
+                if (node) {
+                  inputs.current.set(field.key, node);
+                  if (field.key === 'author') node.focus();
+                } else {
+                  inputs.current.delete(field.key);
+                }
+              }}
+            />
+          </label>
+        ))}
+      </div>
+      <div className="dialog-actions">
+        <Button onClick={() => onClose(null)}>取消</Button>
+        <Button type="submit" className="primary">
+          保存
+        </Button>
+      </div>
+    </form>
+  );
+}
+
+export type { ManagerState };
diff --git a/web/src/ui/mount.ts b/web/src/ui/mount.ts
new file mode 100644
index 0000000..81fb377
--- /dev/null
+++ b/web/src/ui/mount.ts
@@ -0,0 +1,57 @@
+/**
+ * The one place component trees meet the DOM.
+ *
+ * The app's screens are ordinary classes (`ShelfScreen`, `ReaderScreen`, …) with
+ * an `element` the router appends and a `dispose()`. That shape is kept
+ * deliberately: the router knows nothing about the framework, and the screens
+ * that *are* mostly imperative (the reader) never have to pretend otherwise.
+ *
+ * What changes is how a screen builds its own DOM. Instead of a constructor full
+ * of `el()` calls and instance fields holding every node it will later poke, it
+ * renders a component tree and lets the tree re-render itself from state. The
+ * host object returned here is the bridge between the two worlds.
+ */
+
+import { render, type ComponentChildren } from './vendor/preact.ts';
+
+export interface MountedUI {
+  /** The node the router appends. */
+  readonly element: HTMLElement;
+  /**
+   * Re-renders the tree with a new "root value".
+   *
+   * The screen passes the value the whole tree should be a function of —
+   * typically its own state bag. Components read from that value, so the class
+   * does not need to know which components care about which field.
+   */
+  update(value: unknown): void;
+  unmount(): void;
+}
+
+type RenderFn = (value: unknown) => ComponentChildren;
+
+/**
+ * Mounts a component tree into a fresh container and hands back the controls.
+ *
+ * Preact's `render` diffs the *previous* tree against the new one, so calling
+ * `update` in a loop is cheap, and calling it from an event handler is safe: the
+ * handler belongs to a listener attached to a persistent node, not to a node the
+ * diff is about to replace.
+ */
+export function mountUI(container: HTMLElement, renderTree: RenderFn, initial: unknown): MountedUI {
+  let value = initial;
+  const draw = (): void => {
+    render(renderTree(value), container);
+  };
+  draw();
+  return {
+    element: container,
+    update(next: unknown) {
+      value = next;
+      draw();
+    },
+    unmount() {
+      render(null, container);
+    },
+  };
+}
diff --git a/web/src/ui/reader-chrome.tsx b/web/src/ui/reader-chrome.tsx
new file mode 100644
index 0000000..fe3360a
--- /dev/null
+++ b/web/src/ui/reader-chrome.tsx
@@ -0,0 +1,606 @@
+/**
+ * The reader's chrome: everything around the page.
+ *
+ * Split out from the screen on purpose, and along the line that matters: the
+ * *stage* below is imperative DOM work the paginator measures, and this is state
+ * and events. All of it is a function of `ChromeState` — the topbar, the footer's
+ * progress, the contents list, the settings panel with its format-dependent rows,
+ * and the read-aloud bar.
+ *
+ * That last one is the clearest win of the rework. It used to be a group of nodes
+ * the screen mutated in place from `renderSpeechState`, plus a "rebuild only the
+ * speech rows" dance so that the engine picker could appear when the server's
+ * capability probe answered without throwing away the reader's scroll position in
+ * the panel. Here the probe simply changes the state, the diff redraws the rows,
+ * and the scroll position is untouched because nothing above them is replaced.
+ */
+
+import type { AppSettings } from '../store/settings.ts';
+import type { SpeechEngineKind } from '../render/speech.ts';
+import { type ComponentChildren, type JSX } from './vendor/preact.ts';
+import { IconButton, SectionTitle } from './toolkit.tsx';
+
+export interface SpeechBarState {
+  active: boolean;
+  state: string;
+  label: string;
+  chip: string;
+  index: number;
+  total: number;
+  /** Index on the reader's sentence list, which the scrub range is in. */
+  sentenceIndex: number;
+  sentenceTotal: number;
+}
+
+export interface ChromeState {
+  title: string;
+  author: string;
+  chromeVisible: boolean;
+  statusText: string;
+  statusState: string;
+  /** 0..1. */
+  progress: number;
+  chapterLabel: string;
+  tocOpen: boolean;
+  settingsOpen: boolean;
+  toc: Array<{ id: string; label: string; depth: number }>;
+  currentSectionId: string;
+  tts: SpeechBarState;
+  layout: string;
+  format: string;
+
+  // ---- the settings projection (see `settingsView` on the screen) ----
+  mode: AppSettings['mode'];
+  fontScale: number;
+  lineHeight: string;
+  theme: AppSettings['theme'];
+  fit: AppSettings['fit'];
+  fontFamily: string;
+  pageMargin: number;
+  textAlign: AppSettings['textAlign'];
+  brightness: number;
+  pageAnimation: AppSettings['pageAnimation'];
+  tapZone: AppSettings['tapZone'];
+  txtEncoding: string;
+  comicDirection: AppSettings['comicDirection'];
+  ttsRate: number;
+  ttsPitch: number;
+  ttsVolume: number;
+  ttsVoice: string;
+  ttsAutoAdvance: boolean;
+  ttsEngine: AppSettings['ttsEngine'];
+  showFitRow: boolean;
+  showDirectionRow: boolean;
+  showEncodingRow: boolean;
+  showEngineRow: boolean;
+  showPitchRow: boolean;
+  showVoiceRow: boolean;
+  speechUnavailable: boolean;
+  engineOptions: Array<{ value: string; label: string }>;
+  voices: Array<{ value: string; label: string }>;
+}
+
+export interface ChromeHandlers {
+  onBack(): void;
+  toggleToc(): void;
+  toggleSettings(): void;
+  onSetting(patch: Partial<AppSettings>): void;
+  onSpeechSetting(patch: Partial<AppSettings>): void;
+  onVoice(value: string): void;
+  onSpeakFromHere(): void;
+  onSwitchEngine(kind: AppSettings['ttsEngine']): void;
+  onTocEntry(ref: string): void;
+  onTurnPage(direction: 'next' | 'previous'): void;
+  onSpeechToggle(): void;
+  onSpeechPrevious(): void;
+  onSpeechNext(): void;
+  onSpeechScrub(index: number): void;
+  onStopSpeech(): void;
+}
+
+export interface ReaderChromeProps {
+  state: ChromeState;
+  /**
+   * The reading surface.
+   *
+   * Passed as children rather than created here: it is owned by the screen and
+   * by the `ReaderView` that measures it, and a container the tree re-created
+   * would take the reader's scroll position and the shadow root with it.
+   */
+  stage: HTMLElement;
+  handlers: ChromeHandlers;
+}
+
+export function ReaderChrome({ state, stage, handlers }: ReaderChromeProps): JSX.Element {
+  return (
+    <>
+      <div className="topbar" hidden={!state.chromeVisible}>
+        <IconButton label="返回书架" onClick={handlers.onBack}>
+          ‹
+        </IconButton>
+        <div className="title-block" style="flex:1 1 auto;min-width:0;">
+          <h1>{state.title}</h1>
+          {state.author ? <span className="subtitle">{state.author}</span> : null}
+        </div>
+        <IconButton label="目录" onClick={handlers.toggleToc}>
+          ☰
+        </IconButton>
+      </div>
+
+      <div className="status-bar" hidden={state.statusState === 'idle' && state.statusText === ''} data-state={state.statusState}>
+        <span className="status-dot" />
+        <span>{state.statusText}</span>
+      </div>
+
+      <StageHost stage={stage} />
+
+      <div className="footer" hidden={!state.chromeVisible}>
+        <div className="progress-bar">
+          <span style={`width:${percentOf(state.progress)}`} />
+        </div>
+        <div className="footer-row">
+          <IconButton label="目录" onClick={handlers.toggleToc}>
+            ☰
+          </IconButton>
+          <span className="chapter">{state.chapterLabel}</span>
+          <IconButton label="阅读设置" onClick={handlers.toggleSettings}>
+            ⚙
+          </IconButton>
+        </div>
+        <div className="footer-row">
+          <span />
+          <span>{percentOf(state.progress)}</span>
+          <span />
+        </div>
+      </div>
+
+      {state.tts.active ? <SpeechBar state={state.tts} handlers={handlers} /> : null}
+
+      {state.tocOpen ? (
+        <Panel title="目录" onClose={handlers.toggleToc}>
+          {state.toc.length === 0 ? (
+            <div className="empty-state">这本书没有目录</div>
+          ) : (
+            <ul className="toc-list">
+              {state.toc.map((entry) => (
+                <li key={entry.id} data-section={entry.id}>
+                  <button
+                    type="button"
+                    aria-current={entry.id === state.currentSectionId}
+                    style={entry.depth > 0 ? `padding-inline-start:${0.4 + entry.depth * 0.9}rem` : undefined}
+                    onClick={() => handlers.onTocEntry(entry.id)}
+                  >
+                    {entry.label}
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </Panel>
+      ) : null}
+
+      {state.settingsOpen ? (
+        <Panel title="阅读设置" onClose={handlers.toggleSettings}>
+          <SettingsBody state={state} handlers={handlers} />
+        </Panel>
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * Puts the stage in the tree without owning it.
+ *
+ * `dangerouslySetInnerHTML` is the wrong tool here — it would replace the node
+ * Preact renders rather than keep this one. A ref callback that appends the
+ * element the screen kept across renders is the honest version: the tree decides
+ * *where* the stage sits (between the status line and the footer, which is where
+ * its stacking context comes from) and the screen owns its contents.
+ */
+function StageHost({ stage }: { stage: HTMLElement }): JSX.Element {
+  return (
+    <div
+      className="stage-host"
+      ref={(node) => {
+        // A ref callback fires with `null` on unmount; only the mount case moves
+        // the node, because moving it on unmount would take it out of the screen
+        // the router is about to replace it in.
+        if (node && stage.parentElement !== node) node.append(stage);
+      }}
+    />
+  );
+}
+
+function Panel({ title, onClose, children }: { title: string; onClose(): void; children: ComponentChildren }): JSX.Element {
+  return (
+    <div className="panel">
+      <div className="panel-header">
+        <h2>{title}</h2>
+        <IconButton label="关闭" onClick={onClose}>
+          ✕
+        </IconButton>
+      </div>
+      <div className="panel-body">{children}</div>
+    </div>
+  );
+}
+
+function SettingsBody({ state, handlers }: { state: ChromeState; handlers: ChromeHandlers }): JSX.Element {
+  return (
+    <>
+      <SectionTitle>排版</SectionTitle>
+      <SegmentedRow
+        label="翻页方式"
+        options={[
+          { value: 'scroll', label: '滚动' },
+          { value: 'paged', label: '翻页' },
+        ]}
+        value={state.mode}
+        onChange={(value) => handlers.onSetting({ mode: value as AppSettings['mode'] })}
+      />
+      <SliderRow
+        label="字号"
+        value={state.fontScale}
+        min={0.8}
+        max={2.2}
+        step={0.05}
+        format={(value) => `${Math.round(value * 100)}%`}
+        onChange={(value) => handlers.onSetting({ fontScale: value })}
+      />
+      <SegmentedRow
+        label="行距"
+        options={['inherit', '1.4', '1.6', '1.8', '2.1'].map((value) => ({
+          value,
+          label: value === 'inherit' ? '原书' : value,
+        }))}
+        value={state.lineHeight}
+        onChange={(value) => handlers.onSetting({ lineHeight: value })}
+      />
+      <SliderRow
+        label="页边距"
+        value={state.pageMargin}
+        min={0}
+        max={4}
+        step={0.25}
+        format={(value) => `${value.toFixed(2)}rem`}
+        onChange={(value) => handlers.onSetting({ pageMargin: value })}
+      />
+      <SegmentedRow
+        label="对齐"
+        options={[
+          { value: 'inherit', label: '原书' },
+          { value: 'start', label: '左对齐' },
+          { value: 'justify', label: '两端对齐' },
+        ]}
+        value={state.textAlign}
+        onChange={(value) => handlers.onSetting({ textAlign: value as AppSettings['textAlign'] })}
+      />
+      {/* The stacks are the ones a Chinese reading app is expected to offer: a
+          system stack, two serif faces that are actually present on phones, and
+          "原书" which is the default and means "do not touch the book's stack". */}
+      <SelectRow
+        label="字体"
+        options={[
+          { value: 'inherit', label: '原书' },
+          { value: 'system-ui, -apple-system, "Noto Sans SC", sans-serif', label: '系统黑体' },
+          { value: '"Songti SC", "Noto Serif SC", "Source Han Serif SC", SimSun, serif', label: '宋体' },
+          { value: '"Kaiti SC", KaiTi, "Noto Serif SC", serif', label: '楷体' },
+          { value: '"PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif', label: '苹方/雅黑' },
+        ]}
+        value={state.fontFamily}
+        onChange={(value) => handlers.onSetting({ fontFamily: value })}
+      />
+      <SegmentedRow
+        label="主题"
+        options={[
+          { value: 'light', label: '白' },
+          { value: 'sepia', label: '米黄' },
+          { value: 'dark', label: '夜间' },
+        ]}
+        value={state.theme}
+        onChange={(value) => handlers.onSetting({ theme: value as AppSettings['theme'] })}
+      />
+      <SliderRow
+        label="亮度"
+        value={state.brightness}
+        min={0.35}
+        max={1}
+        step={0.05}
+        format={(value) => `${Math.round(value * 100)}%`}
+        onChange={(value) => handlers.onSetting({ brightness: value })}
+      />
+
+      <SectionTitle>翻页</SectionTitle>
+      <SegmentedRow
+        label="点击区域"
+        options={[
+          { value: 'standard', label: '左退右进' },
+          { value: 'reversed', label: '左进右退' },
+        ]}
+        value={state.tapZone}
+        onChange={(value) => handlers.onSetting({ tapZone: value as AppSettings['tapZone'] })}
+      />
+      <SegmentedRow
+        label="翻页动画"
+        options={[
+          { value: 'slide', label: '滑动' },
+          { value: 'fade', label: '淡入' },
+          { value: 'none', label: '无' },
+        ]}
+        value={state.pageAnimation}
+        onChange={(value) => handlers.onSetting({ pageAnimation: value as AppSettings['pageAnimation'] })}
+      />
+      {/* Rows that only apply to some books. The old panel built every row and
+          then hid the irrelevant ones by hand after each open; here they are
+          simply not part of the tree. */}
+      {state.showFitRow ? (
+        <SegmentedRow
+          label="图片适配"
+          options={[
+            { value: 'contain', label: '完整' },
+            { value: 'width', label: '适宽' },
+          ]}
+          value={state.fit}
+          onChange={(value) => handlers.onSetting({ fit: value as AppSettings['fit'] })}
+        />
+      ) : null}
+      {state.showDirectionRow ? (
+        <SegmentedRow
+          label="翻页方向"
+          options={[
+            { value: 'ltr', label: '左→右' },
+            { value: 'rtl', label: '右→左' },
+          ]}
+          value={state.comicDirection}
+          onChange={(value) => handlers.onSetting({ comicDirection: value as AppSettings['comicDirection'] })}
+        />
+      ) : null}
+
+      <SectionTitle>朗读</SectionTitle>
+      <SpeechSettings state={state} handlers={handlers} />
+
+      {state.showEncodingRow ? (
+        <SegmentedRow
+          label="TXT 编码"
+          options={[
+            { value: '', label: '自动' },
+            { value: 'utf-8', label: 'utf-8' },
+            { value: 'gb18030', label: 'gb18030' },
+            { value: 'big5', label: 'big5' },
+            { value: 'utf-16le', label: 'utf-16le' },
+          ]}
+          value={state.txtEncoding}
+          onChange={(value) => handlers.onSetting({ txtEncoding: value })}
+        />
+      ) : null}
+    </>
+  );
+}
+
+/**
+ * The read-aloud section.
+ *
+ * Which rows exist depends on the engine, and the dependency is stated rather
+ * than hidden: pitch has no meaning for synthesised audio, a voice list is empty
+ * for HTTP until the server answers, and "系统语音（原生）" does not exist in a
+ * browser. A row that cannot do anything is omitted instead of shown disabled — a
+ * disabled control tells the reader something is broken, and usually nothing is.
+ */
+function SpeechSettings({ state, handlers }: { state: ChromeState; handlers: ChromeHandlers }): JSX.Element {
+  if (state.speechUnavailable) {
+    return (
+      <div className="notice">
+        当前环境没有可用的朗读引擎：浏览器不支持语音合成，且服务端未配置 TTS_URL。在服务端设置 TTS_URL 后即可使用 HTTP 朗读。
+      </div>
+    );
+  }
+  return (
+    <>
+      {/* The engine picker only appears when there is a choice to make. One
+          engine is not a setting. */}
+      {state.showEngineRow ? (
+        <SelectRow
+          label="朗读引擎"
+          options={state.engineOptions}
+          value={state.ttsEngine}
+          onChange={(value) => handlers.onSwitchEngine(value as AppSettings['ttsEngine'])}
+        />
+      ) : null}
+      <SliderRow
+        label="语速"
+        value={state.ttsRate}
+        min={0.5}
+        max={2.5}
+        step={0.1}
+        format={(value) => `${value.toFixed(1)}×`}
+        onChange={(value) => handlers.onSpeechSetting({ ttsRate: value })}
+      />
+      {state.showPitchRow ? (
+        <SliderRow
+          label="音调"
+          value={state.ttsPitch}
+          min={0.5}
+          max={2}
+          step={0.1}
+          format={(value) => value.toFixed(1)}
+          onChange={(value) => handlers.onSpeechSetting({ ttsPitch: value })}
+        />
+      ) : null}
+      <SliderRow
+        label="音量"
+        value={state.ttsVolume}
+        min={0}
+        max={1}
+        step={0.05}
+        format={(value) => `${Math.round(value * 100)}%`}
+        onChange={(value) => handlers.onSpeechSetting({ ttsVolume: value })}
+      />
+      {state.showVoiceRow ? (
+        <SelectRow label="语音" options={state.voices} value={state.ttsVoice} onChange={handlers.onVoice} />
+      ) : null}
+      <SegmentedRow
+        label="章节播完"
+        options={[
+          { value: 'auto', label: '继续下一章' },
+          { value: 'stop', label: '停止' },
+        ]}
+        value={state.ttsAutoAdvance ? 'auto' : 'stop'}
+        onChange={(value) => handlers.onSpeechSetting({ ttsAutoAdvance: value === 'auto' })}
+      />
+      <button type="button" className="button" onClick={handlers.onSpeakFromHere}>
+        从头朗读这一章
+      </button>
+    </>
+  );
+}
+
+/**
+ * The read-aloud bar.
+ *
+ * A separate strip rather than a row inside the footer, for a reason that only
+ * shows up in use: the footer is toggled off with the chrome, and a reader
+ * listening to a book while walking wants to keep the controls reachable without
+ * the header covering the text. The bar is therefore tied to the *engine's*
+ * state, not to the chrome's.
+ */
+function SpeechBar({ state, handlers }: { state: SpeechBarState; handlers: ChromeHandlers }): JSX.Element {
+  const max = Math.max(0, (state.sentenceTotal || state.total) - 1);
+  const value = Math.max(0, state.sentenceIndex >= 0 ? state.sentenceIndex : state.index);
+  return (
+    <div className="tts-bar" data-state={state.state}>
+      <IconButton label="上一句" onClick={handlers.onSpeechPrevious}>
+        ⏮
+      </IconButton>
+      <IconButton label={state.state === 'playing' ? '暂停朗读' : '开始朗读'} onClick={handlers.onSpeechToggle}>
+        {state.state === 'playing' ? '⏸' : '▶'}
+      </IconButton>
+      <IconButton label="下一句" onClick={handlers.onSpeechNext}>
+        ⏭
+      </IconButton>
+      <div className="tts-main">
+        <span className="tts-text" title={state.label}>
+          {state.label}
+        </span>
+        <input
+          className="tts-range"
+          type="range"
+          min={0}
+          max={max}
+          step={1}
+          value={value}
+          aria-label="朗读进度"
+          onInput={(event) => handlers.onSpeechScrub(Number((event.currentTarget as HTMLInputElement).value))}
+        />
+      </div>
+      <button
+        type="button"
+        className="chip"
+        aria-label={state.total > 0 ? '朗读句数' : '从头朗读'}
+        onClick={handlers.onSpeakFromHere}
+      >
+        {state.chip}
+      </button>
+      <IconButton label="停止朗读" onClick={handlers.onStopSpeech}>
+        ✕
+      </IconButton>
+    </div>
+  );
+}
+
+function SegmentedRow({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: Array<{ value: string; label: string }>;
+  value: string;
+  onChange(value: string): void;
+}): JSX.Element {
+  return (
+    <div className="field">
+      <label>{label}</label>
+      <div className="segmented" role="group" aria-label={label}>
+        {options.map((option) => (
+          <button
+            type="button"
+            key={option.value}
+            aria-pressed={option.value === value}
+            onClick={() => onChange(option.value)}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** A labelled range input whose value label follows the drag. */
+function SliderRow({
+  label,
+  value,
+  min,
+  max,
+  step,
+  format,
+  onChange,
+}: {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  format(value: number): string;
+  onChange(value: number): void;
+}): JSX.Element {
+  return (
+    <div className="field">
+      <label>
+        {label} {format(value)}
+      </label>
+      <input
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onInput={(event) => onChange(Number((event.currentTarget as HTMLInputElement).value))}
+      />
+    </div>
+  );
+}
+
+/** A labelled native select, for the lists that outgrow a segmented control. */
+function SelectRow({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: Array<{ value: string; label: string }>;
+  value: string;
+  onChange(value: string): void;
+}): JSX.Element {
+  return (
+    <div className="field">
+      <label>{label}</label>
+      <select value={value} onChange={(event) => onChange((event.currentTarget as HTMLSelectElement).value)}>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+/** The progress fraction as a percentage, clamped. */
+function percentOf(fraction: number): string {
+  return `${Math.round(Math.min(1, Math.max(0, fraction)) * 100)}%`;
+}
+
+export type { SpeechEngineKind };
diff --git a/web/src/ui/reader-screen.ts b/web/src/ui/reader-screen.tsx
similarity index 58%
rename from web/src/ui/reader-screen.ts
rename to web/src/ui/reader-screen.tsx
index bede7b5..e5abffd 100644
--- a/web/src/ui/reader-screen.ts
+++ b/web/src/ui/reader-screen.tsx
@@ -3,11 +3,10 @@ import type { ReaderApi } from '../api/client.ts';
 import type { Book, Manifest, Note } from '../api/types.ts';
 import { loadBook, isImagePath, extensionOf } from '../formats/index.ts';
 import type { OfflineStore } from '../store/offline.ts';
-import type { SyncEngine } from '../core/sync.ts';
+import type { SyncEngine, SyncStatus } from '../core/sync.ts';
 import type { Platform } from '../core/platform.ts';
 import { ReaderView, type Position, type ViewSettings } from './reader-view.ts';
 import { attachGestures } from './gestures.ts';
-import { clear, el, percent } from './dom.ts';
 import type { AppSettings } from '../store/settings.ts';
 import { createStagedDoc, isStagedKind } from '../formats/windowed.ts';
 import type { BookDoc } from '../formats/types.ts';
@@ -23,6 +22,8 @@ import {
   type SpeechEngineKind,
 } from '../render/speech.ts';
 import type { NativeSpeechBridge } from '../android-bridge.ts';
+import { mountUI } from './mount.ts';
+import { ReaderChrome, type ChromeState } from './reader-chrome.tsx';
 
 /**
  * Chapters per window, matching the server's own constant.
@@ -77,25 +78,52 @@ interface LoadedBook {
  * parsed the book. Doing it the other way round was the first thing I wrote and
  * it produced a resumed position with no matching section — a silent jump to
  * page one, which is the worst possible failure for a reading app.
+ *
+ * ## The boundary this screen keeps
+ *
+ * The *stage* — everything below the chrome: pagination, injected documents, the
+ * shadow root, column measurement, the gesture surface — stays imperative DOM
+ * work, and deliberately so. A virtual DOM between this code and the layout it is
+ * measuring is the one layer this product cannot afford to debug through, and no
+ * framework makes `getBoundingClientRect()` less necessary.
+ *
+ * The *chrome* — topbar, footer, contents, the settings panel, the read-aloud
+ * bar, the status line — is a component. It is state and events, not
+ * measurement: seventeen node fields, four builders and an entire class of
+ * "rebuild the speech rows in place" hacks are now one `ChromeState` and a tree
+ * that is a function of it. The stage is handed in as children.
  */
 export class ReaderScreen {
   readonly element: HTMLDivElement;
   private readonly stage: HTMLDivElement;
-  private readonly topbar: HTMLDivElement;
-  private readonly footer: HTMLDivElement;
-  private readonly progressFill: HTMLSpanElement;
-  private readonly chapterLabel: HTMLSpanElement;
-  private readonly pageLabel: HTMLSpanElement;
-  private readonly statusBar: HTMLDivElement;
-  private readonly statusText: HTMLSpanElement;
-  private readonly tocPanel: HTMLDivElement;
-  private readonly tocList: HTMLUListElement;
-  private readonly settingsPanel: HTMLDivElement;
-  private readonly ttsBar: HTMLDivElement;
-  private readonly ttsChip: HTMLElement;
-  private readonly ttsRangeInput: HTMLInputElement;
-  private readonly ttsLabel: HTMLSpanElement;
-  private readonly ttsPlayButton: HTMLButtonElement;
+  private readonly ui: ReturnType<typeof mountUI>;
+  /**
+   * Everything the chrome draws. Written by this class, read by the tree.
+   *
+   * The stage is deliberately *not* in here: it is a `ReaderView`'s canvas, and
+   * putting a node with its own lifetime into a tree that re-renders is how a
+   * chapter's shadow root ends up detached from the element the paginator
+   * measured.
+   */
+  private chrome: ChromeState = {
+    title: '',
+    author: '',
+    chromeVisible: true,
+    statusText: '',
+    statusState: 'idle',
+    progress: 0,
+    chapterLabel: '',
+    tocOpen: false,
+    settingsOpen: false,
+    toc: [],
+    currentSectionId: '',
+    // Settings rows, flattened for the panel. See `settingsView`.
+    ...emptyChromeSettings(),
+    tts: { active: false, state: 'idle', label: '', chip: '从头朗读', index: 0, total: 0, sentenceIndex: -1, sentenceTotal: 0 },
+    layout: 'reflowable',
+    format: '',
+  } as ChromeState;
+
   /**
    * The engine currently speaking.
    *
@@ -122,6 +150,8 @@ export class ReaderScreen {
   private httpTtsAvailable = false;
   /** Probed once per screen; a server's capabilities do not change mid-book. */
   private httpProbed = false;
+  /** Voices the current engine reports, for the panel's select. */
+  private voices: Array<{ id: string; name: string; lang: string; default: boolean }> = [];
 
   private view: ReaderView | null = null;
   private doc: BookDoc | null = null;
@@ -130,6 +160,7 @@ export class ReaderScreen {
   private chromeVisible = true;
   private detachGestures: (() => void) | null = null;
   private progressTimer: ReturnType<typeof setTimeout> | null = null;
+  private statusTimer: ReturnType<typeof setTimeout> | null = null;
   private pendingPosition: Position | null = null;
   private readonly settings: AppSettings;
   private readonly listeners: Array<() => void> = [];
@@ -138,79 +169,42 @@ export class ReaderScreen {
   constructor(private readonly options: ReaderScreenOptions) {
     this.settings = { ...options.settings };
 
-    this.stage = el('div', { className: 'stage' });
-    this.progressFill = el('span');
-    this.chapterLabel = el('span', { className: 'chapter' });
-    this.pageLabel = el('span', { text: '0%' });
-    this.statusText = el('span');
-    this.statusBar = el('div', {
-      className: 'status-bar',
-      attrs: { hidden: true },
-      dataset: { state: 'idle' },
-      children: [el('span', { className: 'status-dot' }), this.statusText],
-    }) as HTMLDivElement;
+    // The stage is created here and never re-created: `ReaderView` attaches to it
+    // on every chapter, and a container the tree replaced would take the reader's
+    // scroll position and the shadow root with it.
+    this.stage = document.createElement('div');
+    this.stage.className = 'stage';
 
-    this.topbar = this.buildTopbar();
-    this.footer = el('div', {
-      className: 'footer',
-      children: [
-        el('div', { className: 'progress-bar', children: [this.progressFill] }),
-        el('div', {
-          className: 'footer-row',
-          children: [
-            el('button', {
-              className: 'icon-button',
-              text: '☰',
-              attrs: { type: 'button', 'aria-label': '目录' },
-              on: { click: () => this.toggleToc() },
-            }),
-            this.chapterLabel,
-            el('button', {
-              className: 'icon-button',
-              text: '⚙',
-              attrs: { type: 'button', 'aria-label': '阅读设置' },
-              on: { click: () => this.toggleSettings() },
-            }),
-          ],
-        }),
-        el('div', { className: 'footer-row', children: [el('span', { text: '' }), this.pageLabel, el('span', { text: '' })] }),
-      ],
-    }) as HTMLDivElement;
-
-    this.tocList = el('ul', { className: 'toc-list' });
-    this.tocPanel = el('div', {
-      className: 'panel',
-      attrs: { hidden: true },
-      children: [this.buildPanelHeader('目录', () => this.toggleToc()), el('div', { className: 'panel-body', children: [this.tocList] })],
-    }) as HTMLDivElement;
-
-    this.settingsPanel = this.buildSettingsPanel();
-
-    this.ttsLabel = el('span', { className: 'tts-text', text: '' });
-    this.ttsChip = el('button', {
-      className: 'chip',
-      text: '从头朗读',
-      attrs: { type: 'button', 'aria-label': '朗读' },
-      on: { click: () => void this.speakFromReaderPosition() },
-    });
-    this.ttsPlayButton = el('button', {
-      className: 'icon-button',
-      text: '▶',
-      attrs: { type: 'button', 'aria-label': '播放/暂停朗读' },
-      on: { click: () => this.toggleSpeech() },
-    }) as HTMLButtonElement;
-    this.ttsRangeInput = el('input', {
-      className: 'tts-range',
-      attrs: { type: 'range', min: '0', max: '0', step: '1', value: '0', 'aria-label': '朗读进度' },
-      on: { input: (event) => this.onSpeechScrub(Number((event.target as HTMLInputElement).value)) },
-    }) as HTMLInputElement;
-    this.ttsBar = this.buildTtsBar();
-
-    this.element = el('div', {
-      className: 'reader-screen',
-      children: [this.topbar, this.statusBar, this.stage, this.footer, this.ttsBar, this.tocPanel, this.settingsPanel],
-    }) as HTMLDivElement;
+    this.element = document.createElement('div');
+    this.element.className = 'reader-screen';
     this.element.style.cssText = 'flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative;';
+    this.ui = mountUI(
+      this.element,
+      () => (
+        <ReaderChrome
+          state={this.chrome}
+          stage={this.stage}
+          handlers={{
+            onBack: () => this.options.onBack(),
+            toggleToc: () => this.toggleToc(),
+            toggleSettings: () => this.toggleSettings(),
+            onSetting: (patch) => void this.updateSetting(patch),
+            onSpeechSetting: (patch) => this.updateSpeechSetting(patch),
+            onVoice: (voice) => this.updateSpeechSetting({ ttsVoice: voice }),
+            onSpeakFromHere: () => void this.speakFromReaderPosition(),
+            onSwitchEngine: (kind) => this.switchSpeechEngine(kind),
+            onTocEntry: (ref) => void this.goToChapterRef(ref),
+            onTurnPage: (direction) => void this.turnPage(direction),
+            onSpeechToggle: () => this.toggleSpeech(),
+            onSpeechPrevious: () => void this.tts?.previous(),
+            onSpeechNext: () => void this.tts?.next(),
+            onSpeechScrub: (index) => this.onSpeechScrub(index),
+            onStopSpeech: () => this.stopSpeech(),
+          }}
+        />
+      ),
+      this.chrome,
+    );
 
     this.bindSyncStatus();
   }
@@ -219,7 +213,7 @@ export class ReaderScreen {
   async open(book: Book): Promise<void> {
     const token = ++this.loadingToken;
     this.book = book;
-    this.showTitle(book.title, book.author);
+    this.patch({ title: book.title, author: book.author });
     this.setStatus('loading', '正在载入…');
     this.setChromeVisible(true);
 
@@ -234,7 +228,7 @@ export class ReaderScreen {
       const staged = await this.openStaged(book, token);
       if (staged) {
         this.doc = staged.doc;
-        this.buildView();
+        this.afterDocLoaded();
         this.hideStatus();
         await this.restorePosition(book, token);
         return;
@@ -247,7 +241,7 @@ export class ReaderScreen {
       if (token !== this.loadingToken) return;
 
       this.doc = loaded.doc;
-      this.buildView();
+      this.afterDocLoaded();
       if (loaded.notes.length > 0) this.setStatus('idle', loaded.notes.join(' · '));
       else this.hideStatus();
 
@@ -336,9 +330,9 @@ export class ReaderScreen {
     this.loadingToken += 1;
     this.tts?.dispose();
     this.tts = null;
-    this.ttsBar.hidden = true;
     this.flushProgress();
     if (this.progressTimer) clearTimeout(this.progressTimer);
+    if (this.statusTimer) clearTimeout(this.statusTimer);
     this.detachGestures?.();
     this.detachGestures = null;
     for (const off of this.listeners) off();
@@ -347,6 +341,7 @@ export class ReaderScreen {
     this.view = null;
     this.doc = null;
     this.manifest = null;
+    this.ui.unmount();
     // A native page view is a sibling of the WebView's content, so it does not
     // go away with the DOM this screen owns. Leaving it would put a comic page
     // on top of the shelf.
@@ -428,6 +423,20 @@ export class ReaderScreen {
     return session ? { authorization: `Bearer ${session.accessToken}`, accept: '*/*' } : { accept: '*/*' };
   }
 
+  /** Publishes what the chrome needs to know about the book that just loaded. */
+  private afterDocLoaded(): void {
+    this.patch({ layout: this.doc?.layout ?? 'reflowable', format: this.doc?.format ?? '' });
+    this.buildView();
+    void this.renderToc();
+  }
+
+  /**
+   * Builds the view, the gestures and the key bindings against the stage.
+   *
+   * All of it is imperative by nature: a `ReaderView` owns a shadow root it
+   * measures, `attachGestures` owns touch tracking, and neither has any markup
+   * for a diff to describe.
+   */
   private buildView(): void {
     this.view?.dispose();
     if (!this.doc) return;
@@ -438,8 +447,7 @@ export class ReaderScreen {
       ...(this.options.pageHost ? { pageHost: this.options.pageHost } : {}),
       onPositionChange: (position) => this.onPosition(position),
       onChapterChange: (index, section) => {
-        this.chapterLabel.textContent = section.label;
-        this.highlightToc(section.id);
+        this.patch({ chapterLabel: section.label, currentSectionId: section.id });
         // The previous chapter's sentence nodes are gone the moment this fires,
         // so the engine is holding a queue that can never be spoken. It is told
         // to refill from the new chapter rather than left to speak into the void:
@@ -454,9 +462,8 @@ export class ReaderScreen {
     this.view.applySettings(this.viewSettings());
 
     if (doc.layout === 'reflowable') {
-      const scrollTarget = this.stage;
       this.listeners.push(
-        addDebouncedListener(scrollTarget, 'scroll', () => this.onPosition(this.view?.position() ?? null), 250),
+        addDebouncedListener(this.stage, 'scroll', () => this.onPosition(this.view?.position() ?? null), 250),
       );
     }
 
@@ -486,8 +493,6 @@ export class ReaderScreen {
         else if (key === 'Escape') this.setChromeVisible(false);
       }),
     );
-
-    void this.renderToc();
   }
 
   private viewSettings(): Partial<ViewSettings> {
@@ -520,8 +525,7 @@ export class ReaderScreen {
     if (!view) return;
     const moved = direction === 'next' ? await view.next() : await view.previous();
     if (!moved) {
-      this.setStatus('idle', direction === 'next' ? '已经是最后一页' : '已经是第一页');
-      window.setTimeout(() => this.hideStatus(), 1600);
+      this.flashStatus(direction === 'next' ? '已经是最后一页' : '已经是第一页');
       return;
     }
     view.animatePage(direction);
@@ -560,14 +564,12 @@ export class ReaderScreen {
     if (locator && this.view) {
       const restored = await this.view.openLocator(locator);
       if (restored) {
-        this.setStatus('idle', '已恢复到上次阅读位置');
-        window.setTimeout(() => this.hideStatus(), 2400);
+        this.flashStatus('已恢复到上次阅读位置', 2400);
         return;
       }
       // A locator that cannot be resolved means the book changed on disk under
       // the reader's feet. Say so rather than jumping to page one silently.
-      this.setStatus('idle', '原阅读位置已失效，从开头开始');
-      window.setTimeout(() => this.hideStatus(), 3200);
+      this.flashStatus('原阅读位置已失效，从开头开始', 3200);
     }
     await this.view?.open(0, 0);
   }
@@ -576,9 +578,8 @@ export class ReaderScreen {
 
   private onPosition(position: Position | null): void {
     if (!position || !this.book) return;
-    this.progressFill.style.width = percent(position.percentage);
-    this.pageLabel.textContent = percent(position.percentage);
-    if (position.chapterTitle) this.chapterLabel.textContent = position.chapterTitle;
+    this.patch({ progress: position.percentage });
+    if (position.chapterTitle) this.patch({ chapterLabel: position.chapterTitle });
     this.pendingPosition = position;
     this.recordSpeechAnchor();
 
@@ -611,113 +612,38 @@ export class ReaderScreen {
 
   private setChromeVisible(visible: boolean): void {
     this.chromeVisible = visible;
-    this.topbar.hidden = !visible;
-    this.footer.hidden = !visible;
-    if (!visible) {
-      this.tocPanel.hidden = true;
-      this.settingsPanel.hidden = true;
-    }
-  }
-
-  private buildTopbar(): HTMLDivElement {
-    const title = el('div', { className: 'title-block' });
-    title.style.cssText = 'flex:1 1 auto;min-width:0;';
-    return el('div', {
-      className: 'topbar',
-      children: [
-        el('button', {
-          className: 'icon-button',
-          text: '‹',
-          attrs: { type: 'button', 'aria-label': '返回书架' },
-          on: { click: () => this.options.onBack() },
-        }),
-        title,
-        el('button', {
-          className: 'icon-button',
-          text: '☰',
-          attrs: { type: 'button', 'aria-label': '目录' },
-          on: { click: () => this.toggleToc() },
-        }),
-      ],
-    }) as HTMLDivElement;
-  }
-
-  private showTitle(title: string, author: string): void {
-    const block = this.topbar.querySelector('.title-block');
-    if (!block) return;
-    clear(block);
-    block.append(el('h1', { text: title }));
-    if (author) block.append(el('span', { className: 'subtitle', text: author }));
-  }
-
-  private buildPanelHeader(title: string, onClose: () => void): HTMLDivElement {
-    return el('div', {
-      className: 'panel-header',
-      children: [
-        el('h2', { text: title }),
-        el('button', {
-          className: 'icon-button',
-          text: '✕',
-          attrs: { type: 'button', 'aria-label': '关闭' },
-          on: { click: onClose },
-        }),
-      ],
-    }) as HTMLDivElement;
+    this.patch({
+      chromeVisible: visible,
+      // Hiding the chrome closes the panels: a panel floating over a hidden
+      // header is a panel the reader cannot dismiss.
+      ...(visible ? {} : { tocOpen: false, settingsOpen: false }),
+    });
   }
 
   private toggleToc(): void {
-    this.tocPanel.hidden = !this.tocPanel.hidden;
-    if (!this.tocPanel.hidden) this.settingsPanel.hidden = true;
+    const open = !this.chrome.tocOpen;
+    this.patch({ tocOpen: open, settingsOpen: false });
   }
 
   private toggleSettings(): void {
-    this.settingsPanel.hidden = !this.settingsPanel.hidden;
-    if (!this.settingsPanel.hidden) {
-      this.tocPanel.hidden = true;
-      this.filterSettingsRows();
-      // Rebuild the voice list on every open: a Bluetooth headset paired while
-      // the book was open adds a voice, and Chrome only reports it asynchronously.
-      this.refreshVoiceOptions();
-      // The server's capability answer is cached after the first probe, so this is
-      // a no-op on every subsequent open.
-      if (!this.httpProbed) {
-        this.httpProbed = true;
-        void this.probeHttpTts();
-      }
+    const open = !this.chrome.settingsOpen;
+    this.patch({ settingsOpen: open, tocOpen: false });
+    if (!open) return;
+    // Re-read the voice list on every open: a Bluetooth headset paired while the
+    // book was open adds a voice, and Chrome only reports it asynchronously.
+    this.refreshVoices();
+    // The server's capability answer is cached after the first probe, so this is
+    // a no-op on every subsequent open.
+    if (!this.httpProbed) {
+      this.httpProbed = true;
+      void this.probeHttpTts();
     }
   }
 
-  /**
-   * Re-reads the engine's voice list into the settings panel's select.
-   *
-   * Done on every open rather than once, because three things can change under a
-   * reader: a Bluetooth headset that adds a voice, a desktop Chrome that only
-   * populates `getVoices()` after `voiceschanged`, and a native engine whose
-   * voices arrive from a service that was not bound yet. The `signature` check is
-   * what keeps that from rebuilding the `<select>` on every keystroke of the
-   * panel.
-   */
-  private refreshVoiceOptions(): void {
-    const select = this.settingsPanel.querySelector<HTMLSelectElement>('select[data-voice]');
-    if (!select) return;
-    const engine = this.tts;
-    const voices = engine?.snapshot.voices ?? [];
-    const signature = voices.map((voice) => voice.id).join('|');
-    if (select.dataset['signature'] === signature) return;
-    select.dataset['signature'] = signature;
-    const current = this.settings.ttsVoice;
-    select.replaceChildren();
-    const follow = document.createElement('option');
-    follow.value = '';
-    follow.textContent = '跟随系统';
-    select.append(follow);
-    for (const voice of voices) {
-      const option = document.createElement('option');
-      option.value = voice.id;
-      option.textContent = `${voice.name} · ${voice.lang}${voice.default ? ' · 默认' : ''}`;
-      option.selected = voice.id === current;
-      select.append(option);
-    }
+  private refreshVoices(): void {
+    const voices = this.tts?.snapshot.voices ?? [];
+    this.voices = voices.map((voice) => ({ id: voice.id, name: voice.name, lang: voice.lang, default: voice.default }));
+    this.patch({});
   }
 
   /**
@@ -735,10 +661,13 @@ export class ReaderScreen {
     } catch {
       this.httpTtsAvailable = false;
     }
-    // Rebuilt either way: the answer decides whether the engine picker appears at
-    // all, and a panel built before the probe would be missing the row that the
-    // reader is looking for.
-    this.rebuildSpeechEngineRow();
+    // Re-rendered either way: the answer decides whether the engine picker
+    // appears at all, and a panel built before the probe would be missing the row
+    // that the reader is looking for. (The old code rebuilt only the speech group
+    // by hand to avoid losing the panel's scroll position — a diff does that for
+    // free, and the reader's scroll position survives because nothing is
+    // replaced.)
+    this.patch({});
   }
 
   /**
@@ -755,7 +684,6 @@ export class ReaderScreen {
    * book does have chapters.
    */
   private async renderToc(): Promise<void> {
-    clear(this.tocList);
     const book = this.book;
     if (!book) return;
 
@@ -767,29 +695,7 @@ export class ReaderScreen {
       entries = this.view?.chapterLabels() ?? [];
     }
     if (entries.length === 0) entries = this.view?.chapterLabels() ?? [];
-    for (const entry of entries) {
-      const button = el('button', {
-        text: entry.label,
-        attrs: { type: 'button', 'data-section': entry.id },
-        on: {
-          click: () => {
-            // A contents entry may point at a chapter outside the loaded
-            // window, so the jump has to go through the whole-book path rather
-            // than resolve a local index — that is what `goToChapterRef` adds.
-            void this.goToChapterRef(entry.id);
-            this.tocPanel.hidden = true;
-            this.setChromeVisible(false);
-          },
-        },
-      });
-      if (entry.depth > 0) button.style.paddingInlineStart = `${0.4 + entry.depth * 0.9}rem`;
-      const item = el('li', { children: [button] });
-      item.dataset['section'] = entry.id;
-      this.tocList.append(item);
-    }
-    if (entries.length === 0) {
-      this.tocList.append(el('li', { children: [el('div', { className: 'empty-state', text: '这本书没有目录' })] }));
-    }
+    this.patch({ toc: entries });
   }
 
   /**
@@ -818,396 +724,18 @@ export class ReaderScreen {
         await this.view.openLocator(`${ref}:0`);
       }
     } catch {
-      this.setStatus('error', '无法跳到这一章');
+      this.flashStatus('无法跳到这一章');
     }
   }
 
-  private highlightToc(sectionId: string): void {
-    for (const item of this.tocList.querySelectorAll('li')) {
-      const matches = item.dataset['section'] === sectionId;
-      const button = item.querySelector('button');
-      if (button) button.setAttribute('aria-current', String(matches));
-    }
-  }
-
-  private buildSettingsPanel(): HTMLDivElement {
-    const body = el('div', { className: 'panel-body' });
-
-    // -- 排版 --
-    body.append(this.sectionTitle('排版'));
-
-    body.append(
-      this.settingsRow('翻页方式', ['scroll', 'paged'], this.settings.mode, (value) =>
-        this.updateSetting({ mode: value as 'scroll' | 'paged' }), (value) => (value === 'scroll' ? '滚动' : '翻页')),
-    );
-
-    body.append(
-      this.slider('字号', this.settings.fontScale, { min: 0.8, max: 2.2, step: 0.05 }, (value) =>
-        `${Math.round(value * 100)}%`, (value) => this.updateSetting({ fontScale: value })),
-    );
-
-    body.append(
-      this.settingsRow('行距', ['inherit', '1.4', '1.6', '1.8', '2.1'], this.settings.lineHeight, (value) =>
-        this.updateSetting({ lineHeight: value }), (value) => (value === 'inherit' ? '原书' : value)),
-    );
-
-    body.append(
-      this.slider('页边距', this.settings.pageMargin, { min: 0, max: 4, step: 0.25 }, (value) =>
-        `${value.toFixed(2)}rem`, (value) => this.updateSetting({ pageMargin: value })),
-    );
-
-    body.append(
-      this.settingsRow('对齐', ['inherit', 'start', 'justify'], this.settings.textAlign, (value) =>
-        this.updateSetting({ textAlign: value as AppSettings['textAlign'] }), (value) =>
-        value === 'inherit' ? '原书' : value === 'start' ? '左对齐' : '两端对齐'),
-    );
-
-    // The stacks are the ones a Chinese reading app is expected to offer: a
-    // system stack, two serif faces that are actually present on phones, and
-    // "原书" which is the default and means "do not touch the book's stack".
-    body.append(
-      this.selectRow(
-        '字体',
-        [
-          { value: 'inherit', label: '原书' },
-          { value: 'system-ui, -apple-system, "Noto Sans SC", sans-serif', label: '系统黑体' },
-          { value: '"Songti SC", "Noto Serif SC", "Source Han Serif SC", SimSun, serif', label: '宋体' },
-          { value: '"Kaiti SC", KaiTi, "Noto Serif SC", serif', label: '楷体' },
-          { value: '"PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif', label: '苹方/雅黑' },
-        ],
-        this.settings.fontFamily,
-        (value) => void this.updateSetting({ fontFamily: value }),
-      ),
-    );
-
-    body.append(
-      this.settingsRow('主题', ['light', 'sepia', 'dark'], this.settings.theme, (value) =>
-        this.updateSetting({ theme: value as 'light' | 'sepia' | 'dark' }), (value) =>
-        value === 'light' ? '白' : value === 'sepia' ? '米黄' : '夜间'),
-    );
-
-    body.append(
-      this.slider('亮度', this.settings.brightness, { min: 0.35, max: 1, step: 0.05 }, (value) =>
-        `${Math.round(value * 100)}%`, (value) => this.updateSetting({ brightness: value })),
-    );
-
-    // -- 翻页 --
-    body.append(this.sectionTitle('翻页'));
-
-    body.append(
-      this.settingsRow('点击区域', ['standard', 'reversed'], this.settings.tapZone, (value) =>
-        this.updateSetting({ tapZone: value as AppSettings['tapZone'] }), (value) =>
-        value === 'standard' ? '左退右进' : '左进右退'),
-    );
-
-    body.append(
-      this.settingsRow('翻页动画', ['slide', 'fade', 'none'], this.settings.pageAnimation, (value) =>
-        this.updateSetting({ pageAnimation: value as AppSettings['pageAnimation'] }), (value) =>
-        value === 'slide' ? '滑动' : value === 'fade' ? '淡入' : '无'),
-    );
-
-    const fitRow = this.settingsRow('图片适配', ['contain', 'width'], this.settings.fit, (value) =>
-      this.updateSetting({ fit: value as 'contain' | 'width' }), (value) => (value === 'contain' ? '完整' : '适宽'));
-    fitRow.dataset['only'] = 'fixed';
-    body.append(fitRow);
-
-    const directionRow = this.settingsRow('翻页方向', ['ltr', 'rtl'], this.settings.comicDirection, (value) =>
-      this.updateSetting({ comicDirection: value as 'ltr' | 'rtl' }), (value) => (value === 'ltr' ? '左→右' : '右→左'));
-    directionRow.dataset['only'] = 'fixed';
-    body.append(directionRow);
-
-    // -- 朗读 --
-    body.append(this.sectionTitle('朗读'));
-    // Wrapped in its own element so the engine picker can rebuild the speech rows
-    // in place when the HTTP capability probe answers, without discarding whatever
-    // the reader has scrolled to in the rest of the panel.
-    body.append(el('div', { dataset: { speech: 'group' }, children: [this.buildSpeechSettings()] }));
-
-    // -- 文本 --
-    const encodingRow = this.settingsRow('TXT 编码', ['', 'utf-8', 'gb18030', 'big5', 'utf-16le'], this.settings.txtEncoding, (value) =>
-      this.updateSetting({ txtEncoding: value }), (value) => (value === '' ? '自动' : value));
-    encodingRow.dataset['only'] = 'txt';
-    body.append(encodingRow);
-
-    return el('div', {
-      className: 'panel',
-      attrs: { hidden: true },
-      children: [this.buildPanelHeader('阅读设置', () => this.toggleSettings()), body],
-    }) as HTMLDivElement;
-  }
-
-  /**
-   * Shows only the rows that apply to the open book.
-   *
-   * A settings panel that offers "翻页方向" for a novel is a panel the reader
-   * stops reading, so the rows carry a `data-only` marker and this hides the rest.
-   * `txt` is the format of the file, not the layout: a TXT book is reflowable but
-   * is the only thing an encoding override means anything for.
-   */
-  private filterSettingsRows(): void {
-    const layout = this.doc?.layout ?? 'reflowable';
-    const isTxt = this.doc?.format === 'txt';
-    for (const row of this.settingsPanel.querySelectorAll<HTMLElement>('[data-only]')) {
-      const only = row.dataset['only'];
-      const relevant = only === 'fixed' ? layout === 'fixed' : only === 'txt' ? isTxt : true;
-      row.hidden = !relevant;
-    }
-  }
-
-  /**
-   * Remembers which sentence the reader was looking at.
-   *
-   * Used by "read from here". It is recorded on every position change rather than
-   * computed when playback starts, because at that moment the reader has already
-   * dismissed the chrome and a measurement taken then would have to guess.
-   */
-  private recordSpeechAnchor(): void {
-    const view = this.view;
-    if (!view) return;
-    // The engine owns the cursor once it is running; re-anchoring then would make
-    // "read from here" jump to wherever the reader last scrolled.
-    if (this.tts?.active) return;
-    this.pendingSpeechAnchor = view.speechAnchor();
-  }
-
-  /**
-   * The read-aloud section of the settings panel.
-   *
-   * Which rows exist depends on the engine, and the dependency is stated rather
-   * than hidden: pitch has no meaning for synthesised audio, a voice list is empty
-   * for HTTP until the server answers, and "系统语音（原生）" does not exist in a
-   * browser. A row that cannot do anything is hidden instead of being shown
-   * disabled — a disabled control tells the reader something is broken, and
-   * usually nothing is.
-   */
-  private buildSpeechSettings(): DocumentFragment {
-    const fragment = document.createDocumentFragment();
-    const availability = this.speechAvailability();
-    if (!availability.preferred) {
-      fragment.append(
-        el('div', {
-          className: 'notice',
-          text: '当前环境没有可用的朗读引擎：浏览器不支持语音合成，且服务端未配置 TTS_URL。在服务端设置 TTS_URL 后即可使用 HTTP 朗读。',
-        }),
-      );
-      return fragment;
-    }
-
-    // The engine picker only appears when there is a choice to make. One engine
-    // is not a setting.
-    const engineCount = [availability.system, availability.native, availability.http].filter(Boolean).length;
-    if (engineCount > 1) {
-      const options: Array<{ value: string; label: string }> = [{ value: 'auto', label: '自动' }];
-      if (availability.native) options.push({ value: 'native', label: SPEECH_ENGINE_LABELS.native });
-      if (availability.system) options.push({ value: 'system', label: SPEECH_ENGINE_LABELS.system });
-      if (availability.http) options.push({ value: 'http', label: SPEECH_ENGINE_LABELS.http });
-      const row = this.selectRow('朗读引擎', options, this.settings.ttsEngine, (value) =>
-        this.switchSpeechEngine(value as AppSettings['ttsEngine']));
-      row.dataset['speech'] = 'engine';
-      fragment.append(row);
-    }
-
-    fragment.append(
-      this.slider('语速', this.settings.ttsRate, { min: 0.5, max: 2.5, step: 0.1 }, (value) =>
-        `${value.toFixed(1)}×`, (value) => this.updateSpeechSetting({ ttsRate: value })),
-    );
-
-    // Pitch is offered only for the engines that have one. `HttpTtsEngine` has no
-    // pitch control that is not a rate change, and a shimmed one is worse than
-    // none — so the row is omitted rather than left to do nothing.
-    const active = this.effectiveEngineKind() ?? availability.preferred;
-    if (active !== 'http') {
-      const row = this.slider('音调', this.settings.ttsPitch, { min: 0.5, max: 2, step: 0.1 }, (value) =>
-        value.toFixed(1), (value) => this.updateSpeechSetting({ ttsPitch: value }));
-      row.dataset['speech'] = 'pitch';
-      fragment.append(row);
-    }
-
-    fragment.append(
-      this.slider('音量', this.settings.ttsVolume, { min: 0, max: 1, step: 0.05 }, (value) =>
-        `${Math.round(value * 100)}%`, (value) => this.updateSpeechSetting({ ttsVolume: value })),
-    );
-
-    // The voice list belongs to the system and native engines; HTTP uses whatever
-    // voice id was configured upstream, and the server publishes those separately.
-    if (active !== 'http') {
-      const engine = this.tts;
-      const voices = engine?.snapshot.voices ?? [];
-      const options: Array<{ value: string; label: string }> = [
-        { value: '', label: '跟随系统' },
-        ...voices.map((voice) => ({
-          value: voice.id,
-          label: `${voice.name} · ${voice.lang}${voice.default ? ' · 默认' : ''}`,
-        })),
-      ];
-      const row = this.selectRow('语音', options, this.settings.ttsVoice, (value) =>
-        this.updateSpeechSetting({ ttsVoice: value }));
-      row.dataset['speech'] = 'voice';
-      fragment.append(row);
-    }
-
-    fragment.append(
-      this.settingsRow('章节播完', ['auto', 'stop'], this.settings.ttsAutoAdvance ? 'auto' : 'stop', (value) =>
-        this.updateSpeechSetting({ ttsAutoAdvance: value === 'auto' }), (value) =>
-        value === 'auto' ? '继续下一章' : '停止'),
-    );
-
-    fragment.append(
-      el('button', {
-        className: 'button',
-        text: '从头朗读这一章',
-        attrs: { type: 'button' },
-        on: { click: () => void this.speakFromReaderPosition() },
-      }),
-    );
-
-    return fragment;
-  }
-
-  /**
-   * Switches engines, discarding whatever the old one was saying.
-   *
-   * Stopping first is not optional: an `Audio` element and `speechSynthesis` will
-   * both happily keep talking, and two engines reading the same chapter in
-   * different voices is the kind of bug that is reported as "朗读疯了".
-   */
-  private switchSpeechEngine(kind: AppSettings['ttsEngine']): void {
-    this.tts?.dispose();
-    this.tts = null;
-    this.ttsBar.hidden = true;
-    this.view?.clearSpeechHighlight();
-    void this.updateSpeechSetting({ ttsEngine: kind });
-    // Rebuild only the speech rows, so the reader's scroll position in the panel
-    // is not thrown away by a full rebuild.
-    const host = this.settingsPanel.querySelector<HTMLElement>('[data-speech="group"]');
-    if (host) {
-      host.replaceChildren(this.buildSpeechSettings());
-      this.filterSettingsRows();
-    }
-  }
-
-  /**
-   * Rebuilds the speech rows.
-   *
-   * Called when the HTTP capability probe answers and when the reader switches
-   * engines. Only the speech group is replaced: a full panel rebuild would throw
-   * away the reader's scroll position, and the panel is long enough that this is
-   * the difference between a settings screen and a settings screen that jumps.
-   */
-  private rebuildSpeechEngineRow(): void {
-    const host = this.settingsPanel.querySelector<HTMLElement>('[data-speech="group"]');
-    if (!host) return;
-    host.replaceChildren(this.buildSpeechSettings());
-    this.filterSettingsRows();
-  }
-
-  /** Which engine will actually speak, for the panel's conditional rows. */
-  private effectiveEngineKind(): Exclude<SpeechEngineKind, 'auto'> | null {
-    if (this.tts) return this.tts.kind;
-    const availability = this.speechAvailability();
-    const requested = this.settings.ttsEngine;
-    if (requested !== 'auto' && availability[requested]) return requested;
-    return availability.preferred;
-  }
-
-  private sectionTitle(text: string): HTMLDivElement {
-    return el('div', { className: 'section-title', text }) as HTMLDivElement;
-  }
-
-  /** A labelled range input whose value label updates as it is dragged. */
-  private slider(
-    label: string,
-    value: number,
-    range: { min: number; max: number; step: number },
-    format: (value: number) => string,
-    onChange: (value: number) => void,
-  ): HTMLDivElement {
-    const field = el('div', { className: 'field' });
-    const valueLabel = el('label', { text: `${label} ${format(value)}` });
-    const input = el('input', {
-      attrs: {
-        type: 'range',
-        min: String(range.min),
-        max: String(range.max),
-        step: String(range.step),
-        value: String(value),
-      },
-      on: {
-        input: (event) => {
-          const next = Number((event.target as HTMLInputElement).value);
-          valueLabel.textContent = `${label} ${format(next)}`;
-          onChange(next);
-        },
-      },
-    });
-    field.append(valueLabel, input);
-    return field;
-  }
-
-  /** A labelled native select, for the lists that outgrow a segmented control. */
-  private selectRow(
-    label: string,
-    options: Array<{ value: string; label: string }>,
-    current: string,
-    onChange: (value: string) => void,
-  ): HTMLDivElement {
-    const select = el('select', {
-      attrs: label === '语音' ? { 'data-voice': 'true' } : {},
-      on: { change: (event) => onChange((event.target as HTMLSelectElement).value) },
-    }) as HTMLSelectElement;
-    for (const option of options) {
-      const node = document.createElement('option');
-      node.value = option.value;
-      node.textContent = option.label;
-      if (option.value === current) node.selected = true;
-      select.append(node);
-    }
-    return el('div', {
-      className: 'field',
-      children: [el('label', { text: label }), select],
-    }) as HTMLDivElement;
-  }
-
-  private settingsRow(
-    label: string,
-    values: string[],
-    current: string,
-    onChange: (value: string) => void,
-    labelFor: (value: string) => string,
-  ): HTMLDivElement {
-    const buttons = values.map((value) =>
-      el('button', {
-        text: labelFor(value),
-        attrs: { type: 'button', 'aria-pressed': String(value === current) },
-        on: {
-          click: (event) => {
-            const group = (event.currentTarget as HTMLElement).parentElement;
-            for (const sibling of group?.children ?? []) sibling.setAttribute('aria-pressed', 'false');
-            (event.currentTarget as HTMLElement).setAttribute('aria-pressed', 'true');
-            onChange(value);
-          },
-        },
-      }),
-    );
-    return el('div', {
-      className: 'field',
-      children: [
-        el('label', { text: label }),
-        el('div', { className: 'segmented', children: buttons }),
-      ],
-    }) as HTMLDivElement;
-  }
-
   private async updateSetting(patch: Partial<AppSettings>): Promise<void> {
     this.options.onSettingsChange(patch);
     Object.assign(this.settings, patch);
     this.view?.applySettings(this.viewSettings());
+    this.patch({});
     // Fixed-layout fit and direction changes are structural, so the current page
     // has to be re-rendered rather than merely re-styled.
-    if (
-      this.doc?.layout === 'fixed' &&
-      ('fit' in patch || 'comicDirection' in patch)
-    ) {
+    if (this.doc?.layout === 'fixed' && ('fit' in patch || 'comicDirection' in patch)) {
       const index = this.view?.currentSectionIndex() ?? 0;
       await this.view?.open(index, 0);
     }
@@ -1216,42 +744,38 @@ export class ReaderScreen {
   // ---- read aloud ----
 
   /**
-   * The read-aloud bar.
+   * Starts reading from the sentence the reader is looking at.
    *
-   * A separate strip rather than a row inside the footer, for a reason that only
-   * shows up in use: the footer is toggled off with the chrome, and a reader
-   * listening to a book while walking wants to keep the controls reachable
-   * without the header covering the text. The bar is therefore tied to the
-   * *engine's* state, not to the chrome's.
+   * The view answers that question by measuring: a selected sentence wins, then
+   * the first sentence at the leading edge of the reading area. Measuring rather
+   * than scaling the position fraction is what makes this work in paged mode,
+   * where the leading edge is a column boundary and a fraction of the chapter
+   * would land a paragraph away from what the reader is looking at.
    */
-  private buildTtsBar(): HTMLDivElement {
-    return el('div', {
-      className: 'tts-bar',
-      attrs: { hidden: true },
-      children: [
-        el('button', {
-          className: 'icon-button',
-          text: '⏮',
-          attrs: { type: 'button', 'aria-label': '上一句' },
-          on: { click: () => void this.tts?.previous() },
-        }),
-        this.ttsPlayButton,
-        el('button', {
-          className: 'icon-button',
-          text: '⏭',
-          attrs: { type: 'button', 'aria-label': '下一句' },
-          on: { click: () => void this.tts?.next() },
-        }),
-        el('div', { className: 'tts-main', children: [this.ttsLabel, this.ttsRangeInput] }),
-        this.ttsChip,
-        el('button', {
-          className: 'icon-button',
-          text: '✕',
-          attrs: { type: 'button', 'aria-label': '停止朗读' },
-          on: { click: () => this.stopSpeech() },
-        }),
-      ],
-    }) as HTMLDivElement;
+  private async speakFromReaderPosition(): Promise<void> {
+    const view = this.view;
+    if (!view) return;
+    const engine = this.ensureTts();
+    if (!engine) {
+      this.flashStatus('当前环境没有可用的朗读引擎', 2600);
+      return;
+    }
+    this.patch({ tts: { ...this.chrome.tts, active: true } });
+    this.spokenSectionIndex = view.currentSectionIndex();
+    const chunks = this.rememberSpeechChunks(view);
+    if (chunks.length === 0) {
+      // A fixed-layout page has no text; say so instead of showing an empty bar.
+      this.flashStatus('这一页没有可朗读的文字', 2400);
+      this.patch({ tts: { ...this.chrome.tts, active: false } });
+      return;
+    }
+    // A live selection wins: the reader who selected a paragraph and pressed play
+    // has said exactly which paragraph they mean. Otherwise the sentence at the
+    // leading edge is re-measured, because the reader may have scrolled or turned
+    // a page since the anchor was recorded.
+    const anchor = view.speechAnchorFromSelection() ?? view.speechAnchor() ?? this.pendingSpeechAnchor;
+    const start = anchor ? chunks.indexOf(anchor) : -1;
+    await engine.play(start >= 0 ? start : 0);
   }
 
   /**
@@ -1269,11 +793,7 @@ export class ReaderScreen {
     const availability = this.speechAvailability();
     const requested = this.settings.ttsEngine;
     const kind: Exclude<SpeechEngineKind, 'auto'> | null =
-      requested === 'auto'
-        ? availability.preferred
-        : availability[requested]
-          ? requested
-          : availability.preferred;
+      requested === 'auto' ? availability.preferred : availability[requested] ? requested : availability.preferred;
     if (!kind) return null;
 
     const engine = createSpeechEngine({
@@ -1281,10 +801,7 @@ export class ReaderScreen {
       baseUrl: this.options.api.baseUrl,
       accessToken: () => this.options.api.currentSession()?.accessToken ?? null,
       nativeBridge: this.options.speechBridge ?? null,
-      onError: (message) => {
-        this.setStatus('error', message);
-        window.setTimeout(() => this.hideStatus(), 3200);
-      },
+      onError: (message) => this.flashStatus(message, 3200),
     });
     if (!engine) return null;
 
@@ -1378,12 +895,11 @@ export class ReaderScreen {
   private toggleSpeech(): void {
     const engine = this.ensureTts();
     if (!engine) {
-      this.setStatus('error', '当前环境没有可用的朗读引擎');
-      window.setTimeout(() => this.hideStatus(), 2600);
+      this.flashStatus('当前环境没有可用的朗读引擎', 2600);
       return;
     }
     if (engine.active) {
-      if (this.ttsBar.dataset['state'] === 'playing') engine.pause();
+      if (this.chrome.tts.state === 'playing') engine.pause();
       else engine.resume();
       return;
     }
@@ -1392,47 +908,10 @@ export class ReaderScreen {
 
   private stopSpeech(): void {
     this.tts?.stop();
-    this.ttsBar.hidden = true;
+    this.patch({ tts: { ...this.chrome.tts, active: false, state: 'idle' } });
     this.view?.clearSpeechHighlight();
   }
 
-  /**
-   * Starts reading from the sentence the reader is looking at.
-   *
-   * The view answers that question by measuring: a selected sentence wins, then
-   * the first sentence at the leading edge of the reading area. Measuring rather
-   * than scaling the position fraction is what makes this work in paged mode,
-   * where the leading edge is a column boundary and a fraction of the chapter
-   * would land a paragraph away from what the reader is looking at.
-   */
-  private async speakFromReaderPosition(): Promise<void> {
-    const view = this.view;
-    if (!view) return;
-    const engine = this.ensureTts();
-    if (!engine) {
-      this.setStatus('error', '当前环境没有可用的朗读引擎');
-      window.setTimeout(() => this.hideStatus(), 2600);
-      return;
-    }
-    this.ttsBar.hidden = false;
-    this.spokenSectionIndex = view.currentSectionIndex();
-    const chunks = this.rememberSpeechChunks(view);
-    if (chunks.length === 0) {
-      // A fixed-layout page has no text; say so instead of showing an empty bar.
-      this.setStatus('idle', '这一页没有可朗读的文字');
-      window.setTimeout(() => this.hideStatus(), 2400);
-      this.ttsBar.hidden = true;
-      return;
-    }
-    // A live selection wins: the reader who selected a paragraph and pressed play
-    // has said exactly which paragraph they mean. Otherwise the sentence at the
-    // leading edge is re-measured, because the reader may have scrolled or turned
-    // a page since the anchor was recorded.
-    const anchor = view.speechAnchorFromSelection() ?? view.speechAnchor() ?? this.pendingSpeechAnchor;
-    const start = anchor ? chunks.indexOf(anchor) : -1;
-    await engine.play(start >= 0 ? start : 0);
-  }
-
   /**
    * The index of the sentence being spoken, on the *untrimmed* queue.
    *
@@ -1467,33 +946,34 @@ export class ReaderScreen {
   private renderSpeechState(snapshot: TtsSnapshot): void {
     if (snapshot.state === 'unsupported') {
       this.setStatus('error', snapshot.error || '当前浏览器不支持朗读');
-      this.ttsBar.hidden = true;
+      this.patch({ tts: { ...this.chrome.tts, active: false, state: snapshot.state } });
       return;
     }
+    // The bar follows the *engine*, not the chrome: a reader listening while
+    // walking wants the controls reachable without the header covering the text.
     const active = snapshot.state === 'playing' || snapshot.state === 'paused';
-    if (active) this.ttsBar.hidden = false;
-    this.ttsBar.dataset['state'] = snapshot.state;
-    this.ttsPlayButton.textContent = snapshot.state === 'playing' ? '⏸' : '▶';
-    this.ttsPlayButton.setAttribute('aria-label', snapshot.state === 'playing' ? '暂停朗读' : '开始朗读');
-    this.ttsLabel.textContent = snapshot.chunk || (snapshot.error ? snapshot.error : '准备朗读…');
-    this.ttsLabel.title = snapshot.chunk;
-    this.ttsChip.textContent = snapshot.total > 0 ? `${snapshot.index + 1}/${snapshot.total}` : '从头朗读';
-    this.ttsChip.setAttribute('aria-label', snapshot.total > 0 ? '朗读句数' : '从头朗读');
     // The scrub range is expressed in *sentences*, not in engine fragments, so a
     // chapter with a 2000-character paragraph still shows one tick for it.
     const sentenceIndex = this.speechQueueIndex();
-    const sentenceTotal = this.lastSpeechQueue.length || snapshot.total;
-    this.ttsRangeInput.max = String(Math.max(0, sentenceTotal - 1));
-    this.ttsRangeInput.value = String(Math.max(0, sentenceIndex >= 0 ? sentenceIndex : snapshot.index));
-    if (snapshot.error) {
-      this.setStatus('error', snapshot.error);
-      window.setTimeout(() => this.hideStatus(), 3200);
-    }
+    this.patch({
+      tts: {
+        active,
+        state: snapshot.state,
+        label: snapshot.chunk || (snapshot.error ? snapshot.error : '准备朗读…'),
+        chip: snapshot.total > 0 ? `${snapshot.index + 1}/${snapshot.total}` : '从头朗读',
+        index: snapshot.index,
+        total: snapshot.total,
+        sentenceIndex,
+        sentenceTotal: this.lastSpeechQueue.length || snapshot.total,
+      },
+    });
+    if (snapshot.error) this.flashStatus(snapshot.error, 3200);
   }
 
   private updateSpeechSetting(patch: Partial<AppSettings>): void {
     Object.assign(this.settings, patch);
     this.options.onSettingsChange(patch);
+    this.patch({});
     const engine = this.tts;
     if (!engine) return;
     if (patch.ttsRate !== undefined) engine.setRate(patch.ttsRate);
@@ -1502,6 +982,37 @@ export class ReaderScreen {
     if (patch.ttsVoice !== undefined) engine.setVoice(patch.ttsVoice);
   }
 
+  /**
+   * Switches engines, discarding whatever the old one was saying.
+   *
+   * Stopping first is not optional: an `Audio` element and `speechSynthesis` will
+   * both happily keep talking, and two engines reading the same chapter in
+   * different voices is the kind of bug that is reported as "朗读疯了".
+   */
+  private switchSpeechEngine(kind: AppSettings['ttsEngine']): void {
+    this.tts?.dispose();
+    this.tts = null;
+    this.view?.clearSpeechHighlight();
+    void this.updateSpeechSetting({ ttsEngine: kind });
+    this.patch({ tts: { ...this.chrome.tts, active: false, state: 'idle' } });
+  }
+
+  /**
+   * Remembers which sentence the reader was looking at.
+   *
+   * Used by "read from here". It is recorded on every position change rather than
+   * computed when playback starts, because at that moment the reader has already
+   * dismissed the chrome and a measurement taken then would have to guess.
+   */
+  private recordSpeechAnchor(): void {
+    const view = this.view;
+    if (!view) return;
+    // The engine owns the cursor once it is running; re-anchoring then would make
+    // "read from here" jump to wherever the reader last scrolled.
+    if (this.tts?.active) return;
+    this.pendingSpeechAnchor = view.speechAnchor();
+  }
+
   // ---- status ----
 
   private bindSyncStatus(): void {
@@ -1515,7 +1026,7 @@ export class ReaderScreen {
         this.setStatus('error', status.message || '同步失败');
       } else if (status.state === 'signed-out') {
         this.options.onSignedOut();
-      } else if (this.statusBar.dataset['state'] !== 'loading') {
+      } else if (this.chrome.statusState !== 'loading') {
         this.hideStatus();
       }
     };
@@ -1523,15 +1034,22 @@ export class ReaderScreen {
     update();
   }
 
+  /** A status line that clears itself, for messages with no lasting state. */
+  private flashStatus(text: string, after = 1600): void {
+    this.setStatus('idle', text);
+    if (this.statusTimer) clearTimeout(this.statusTimer);
+    this.statusTimer = setTimeout(() => this.hideStatus(), after);
+  }
+
   private setStatus(state: string, text: string): void {
-    this.statusBar.hidden = false;
-    this.statusBar.dataset['state'] = state;
-    this.statusText.textContent = text;
+    if (this.statusTimer) clearTimeout(this.statusTimer);
+    this.statusTimer = null;
+    this.patch({ statusState: state, statusText: text });
   }
 
   private hideStatus(): void {
-    if (this.statusBar.dataset['state'] === 'loading') return;
-    this.statusBar.hidden = true;
+    if (this.chrome.statusState === 'loading') return;
+    this.patch({ statusState: 'idle', statusText: '' });
   }
 
   private handleLoadError(err: unknown): void {
@@ -1549,6 +1067,144 @@ export class ReaderScreen {
     }
     this.setStatus('error', err instanceof Error ? err.message : '无法打开这本书');
   }
+
+  // ---- chrome state plumbing ----
+
+  /**
+   * Publishes one change to the chrome.
+   *
+   * The settings rows are folded in on every patch rather than being kept in
+   * `chrome` by hand: the panel is a projection of `this.settings` (plus what the
+   * host can do and what the open book is), and computing it here is what stops a
+   * row from showing a value the reader has already changed.
+   */
+  private patch(patch: Partial<ChromeState>): void {
+    this.chrome = {
+      ...this.chrome,
+      ...patch,
+      ...settingsView(this.settings, {
+        layout: this.doc?.layout ?? 'reflowable',
+        format: this.doc?.format ?? '',
+        availability: this.speechAvailability(),
+        engine: this.effectiveEngineKind(),
+        voices: this.voices,
+      }),
+    };
+    this.ui.update(this.chrome);
+  }
+
+  /** Which engine will actually speak, for the panel's conditional rows. */
+  private effectiveEngineKind(): Exclude<SpeechEngineKind, 'auto'> | null {
+    if (this.tts) return this.tts.kind;
+    const availability = this.speechAvailability();
+    const requested = this.settings.ttsEngine;
+    if (requested !== 'auto' && availability[requested]) return requested;
+    return availability.preferred;
+  }
+}
+
+export type { SyncStatus };
+
+/** A blank settings projection, so the initial chrome state is well-formed. */
+function emptyChromeSettings(): Partial<ChromeState> {
+  return settingsView(
+    {
+      mode: 'scroll',
+      fontScale: 1,
+      lineHeight: 'inherit',
+      theme: 'light',
+      fit: 'contain',
+      direction: 'ltr',
+      fontFamily: 'inherit',
+      pageMargin: 1.5,
+      textAlign: 'inherit',
+      brightness: 1,
+      pageAnimation: 'slide',
+      tapZone: 'standard',
+      txtEncoding: '',
+      comicDirection: 'ltr',
+      ttsRate: 1,
+      ttsPitch: 1,
+      ttsVolume: 1,
+      ttsVoice: '',
+      ttsAutoAdvance: true,
+      ttsEngine: 'auto',
+      shelfDensity: 'cozy',
+      shelfSort: 'updated',
+      shelfShowAuthor: true,
+      shelfShowProgress: true,
+    },
+    { layout: 'reflowable', format: '', availability: { system: false, native: false, http: false, preferred: null }, engine: null, voices: [] },
+  );
+}
+
+/**
+ * The settings, projected into what the panel draws.
+ *
+ * A projection rather than the raw object because the panel's rows are not the
+ * settings: a row exists only when it can do something (pitch has no meaning for
+ * synthesised audio; a voice list is empty for HTTP until the server answers),
+ * and the fit/direction rows only apply to a fixed-layout book. Deciding that
+ * here means the panel is a pure function of its props, and the "filter the rows
+ * after the fact" pass the old code needed is gone.
+ */
+function settingsView(
+  settings: AppSettings,
+  context: {
+    layout: AppSettings['mode'] extends never ? never : string;
+    format: string;
+    availability: ReturnType<typeof speechAvailability>;
+    engine: Exclude<SpeechEngineKind, 'auto'> | null;
+    voices: Array<{ id: string; name: string; lang: string; default: boolean }>;
+  },
+): Partial<ChromeState> {
+  const fixedLayout = context.layout === 'fixed';
+  const isTxt = context.format === 'txt';
+  const activeEngine = context.engine ?? context.availability.preferred;
+  return {
+    mode: settings.mode,
+    fontScale: settings.fontScale,
+    lineHeight: settings.lineHeight,
+    theme: settings.theme,
+    fit: settings.fit,
+    fontFamily: settings.fontFamily,
+    pageMargin: settings.pageMargin,
+    textAlign: settings.textAlign,
+    brightness: settings.brightness,
+    pageAnimation: settings.pageAnimation,
+    tapZone: settings.tapZone,
+    txtEncoding: settings.txtEncoding,
+    comicDirection: settings.comicDirection,
+    ttsRate: settings.ttsRate,
+    ttsPitch: settings.ttsPitch,
+    ttsVolume: settings.ttsVolume,
+    ttsVoice: settings.ttsVoice,
+    ttsAutoAdvance: settings.ttsAutoAdvance,
+    ttsEngine: settings.ttsEngine,
+    showFitRow: fixedLayout,
+    showDirectionRow: fixedLayout,
+    showEncodingRow: isTxt,
+    engineOptions: enginePickerOptions(context.availability),
+    showEngineRow:
+      [context.availability.system, context.availability.native, context.availability.http].filter(Boolean).length > 1,
+    showPitchRow: activeEngine !== 'http',
+    showVoiceRow: activeEngine !== 'http',
+    speechUnavailable: !context.availability.preferred,
+    voices: [{ value: '', label: '跟随系统' }, ...context.voices.map((voice) => ({
+      value: voice.id,
+      label: `${voice.name} · ${voice.lang}${voice.default ? ' · 默认' : ''}`,
+    }))],
+  };
+}
+
+function enginePickerOptions(
+  availability: ReturnType<typeof speechAvailability>,
+): Array<{ value: string; label: string }> {
+  const options: Array<{ value: string; label: string }> = [{ value: 'auto', label: '自动' }];
+  if (availability.native) options.push({ value: 'native', label: SPEECH_ENGINE_LABELS.native });
+  if (availability.system) options.push({ value: 'system', label: SPEECH_ENGINE_LABELS.system });
+  if (availability.http) options.push({ value: 'http', label: SPEECH_ENGINE_LABELS.http });
+  return options;
 }
 
 function addDebouncedListener(
diff --git a/web/src/ui/shelf-screen.ts b/web/src/ui/shelf-screen.ts
deleted file mode 100644
index 2cc1069..0000000
--- a/web/src/ui/shelf-screen.ts
+++ /dev/null
@@ -1,549 +0,0 @@
-import { ApiError } from '../api/errors.ts';
-import type { ListQuery, ReaderApi } from '../api/client.ts';
-import type { Book, ContinueReadingItem } from '../api/types.ts';
-import type { OfflineStore } from '../store/offline.ts';
-import type { Platform } from '../core/platform.ts';
-import type { AppSettings, ShelfSort } from '../store/settings.ts';
-import { clear, el, percent } from './dom.ts';
-import { DENSITY_LABELS, buildShelfSettingsPanel } from './shelf-settings.ts';
-import { sortBooks, shelfOrder } from './shelf-order.ts';
-
-export interface ShelfScreenOptions {
-  api: ReaderApi;
-  offline: OfflineStore;
-  platform: Platform;
-  /** Current shelf preferences, so the screen starts in the reader's own state. */
-  settings: AppSettings;
-  onOpenBook(book: Book): void;
-  /** Opens the library file manager. Admin-ish by nature, but gated by the mount. */
-  onOpenManager(): void;
-  onSignedOut(): void;
-  /** Persisted through the app's settings store, like the reader's own. */
-  onSettingsChange(patch: Partial<AppSettings>): void;
-}
-
-/** Sort options, in the order the sheet shows them. */
-const SORTS: Array<{ value: ShelfSort; label: string }> = [
-  { value: 'updated', label: '最近更新' },
-  { value: 'added', label: '最近入库' },
-  { value: 'title', label: '书名' },
-  { value: 'author', label: '作者' },
-];
-
-/**
- * The shelf.
- *
- * Behaviour rule that drives the whole screen: it renders from the local mirror
- * first and only then replaces it with server data. On a LAN or with a cold
- * cache that is invisible; on a train it is the difference between the library
- * appearing instantly and an indefinite spinner (product design §8.2).
- *
- * ## What was added, and the rule behind each
- *
- * The shelf is the most-opened screen in the app and was the least configurable,
- * which is an odd pairing: a reader who opens it forty times a day is the one who
- * notices that the covers are too small, that the list is in the wrong order, and
- * that clearing a search takes three taps. Every addition below follows one rule —
- * **it must be a thing a reader would change twice**, because a settings screen
- * full of switches nobody flips is worse than no settings screen.
- *
- *  - **Sort, as a control on the shelf** rather than only in settings, because
- *    "show me what I just added" is a per-session intent, not a preference.
- *  - **Density and author visibility in settings**, because those *are*
- *    preferences: they are about the screen and the eyes, and they persist.
- *  - **A clear button in the search field**, because on a phone the alternative is
- *    selecting four characters with a fat-finger cursor.
- *  - **Progress on the cover**, because the one question a shelf answers for a
- *    reader who has twenty books going is "where was I".
- *  - **A pull-to-refresh at the top**, because the shelf is now the only place a
- *    scan's result becomes visible, and "I added a book, why is it not here" is
- *    the complaint that a manual refresh answers.
- */
-export class ShelfScreen {
-  readonly element: HTMLDivElement;
-  private readonly grid: HTMLDivElement;
-  private readonly continueRow: HTMLDivElement;
-  private readonly continueSection: HTMLDivElement;
-  private readonly statusLine: HTMLDivElement;
-  private readonly searchInput: HTMLInputElement;
-  private readonly searchClear: HTMLButtonElement;
-  private readonly countLabel: HTMLDivElement;
-  private readonly sortRow: HTMLDivElement;
-  private readonly refreshBar: HTMLDivElement;
-  private readonly settingsButton: HTMLButtonElement;
-  private readonly settingsPanel: HTMLDivElement;
-  private extraLoading: HTMLDivElement | null = null;
-  private query = '';
-  private offset = 0;
-  private total = 0;
-  private loading = false;
-  /** Session sort; seeded from settings and written back when it changes. */
-  private sort: ShelfSort;
-  private readonly searchTimer: { id: ReturnType<typeof setTimeout> | null } = { id: null };
-  private readonly coverUrls = new Map<string, string>();
-  private readonly settings: AppSettings;
-  private readonly scroll: HTMLDivElement;
-  /** Scroll position of the previous render, so a refresh does not jump. */
-  private lastScrollTop = 0;
-
-  constructor(private readonly options: ShelfScreenOptions) {
-    this.settings = { ...options.settings };
-    this.sort = options.settings.shelfSort;
-
-    this.searchInput = el('input', {
-      attrs: {
-        type: 'search',
-        placeholder: '搜索书名、作者、系列',
-        'aria-label': '搜索书库',
-        enterkeyhint: 'search',
-      },
-      on: {
-        input: () => this.onSearchInput(),
-        keydown: (event) => {
-          // `search` inputs fire a non-standard `search` event on clear, but only
-          // in some browsers; Enter is the one that is reliable everywhere and it
-          // also means "stop waiting for the debounce".
-          if ((event as KeyboardEvent).key === 'Enter') {
-            if (this.searchTimer.id !== null) clearTimeout(this.searchTimer.id);
-            this.searchTimer.id = null;
-            this.query = this.searchInput.value.trim();
-            void this.refresh();
-          }
-        },
-      },
-    }) as HTMLInputElement;
-
-    this.searchClear = el('button', {
-      className: 'search-clear',
-      text: '✕',
-      attrs: { type: 'button', 'aria-label': '清除搜索', hidden: true },
-      on: {
-        click: () => {
-          this.searchInput.value = '';
-          this.query = '';
-          this.searchClear.hidden = true;
-          if (this.searchTimer.id !== null) clearTimeout(this.searchTimer.id);
-          this.searchTimer.id = null;
-          void this.refresh();
-        },
-      },
-    }) as HTMLButtonElement;
-
-    this.continueRow = el('div', { className: 'continue-row' });
-    this.continueSection = el('div', { attrs: { hidden: true } }) as HTMLDivElement;
-    const continueTitle = el('div', { className: 'shelf-section-title', text: '继续阅读' });
-    this.continueSection.append(continueTitle, this.continueRow);
-
-    this.countLabel = el('div', { className: 'shelf-count muted' }) as HTMLDivElement;
-    this.sortRow = el('div', { className: 'shelf-sort' }) as HTMLDivElement;
-    this.buildSortRow();
-
-    this.settingsButton = el('button', {
-      className: 'icon-button shelf-settings-button',
-      text: '⚙',
-      attrs: { type: 'button', 'aria-label': '书架设置' },
-      on: { click: () => this.toggleSettings() },
-    }) as HTMLButtonElement;
-
-    // The file manager's entry point sits next to the shelf settings gear because
-    // that is where "the library itself" already lives. It is offered to every
-    // account, not just admins: the mount decides whether it can write anything,
-    // and a reader whose own book failed to appear is exactly who needs to look.
-    const managerButton = el('button', {
-      className: 'icon-button shelf-settings-button',
-      text: '🗂',
-      attrs: { type: 'button', 'aria-label': '书库管理' },
-      on: { click: () => this.options.onOpenManager() },
-    });
-
-    const toolbar = el('div', {
-      className: 'shelf-toolbar',
-      children: [this.countLabel, this.sortRow, this.settingsButton, managerButton],
-    });
-
-    this.settingsPanel = buildShelfSettingsPanel({
-      settings: this.settings,
-      onPatch: (patch) => {
-        Object.assign(this.settings, patch);
-        this.options.onSettingsChange(patch);
-        this.applyDensity();
-        this.applyAppearance();
-      },
-      onClose: () => {
-        this.settingsPanel.hidden = true;
-      },
-    });
-
-    this.grid = el('div', { className: 'book-grid' });
-    this.statusLine = el('div', { className: 'shelf-status muted' });
-    this.refreshBar = el('div', { className: 'shelf-refresh', attrs: { hidden: true } }) as HTMLDivElement;
-
-    const shelf = el('div', { className: 'shelf' });
-    shelf.append(
-      el('div', { className: 'shelf-search', children: [this.searchInput, this.searchClear] }),
-      this.continueSection,
-      toolbar,
-      this.refreshBar,
-      this.grid,
-      this.statusLine,
-      this.settingsPanel,
-    );
-    (shelf as HTMLDivElement).id = 'shelf-scroll';
-    this.scroll = shelf as HTMLDivElement;
-
-    this.element = el('div', { className: 'shelf-screen', children: [shelf] }) as HTMLDivElement;
-    this.element.style.cssText = 'flex:1 1 auto; min-height:0; display:flex; flex-direction:column;';
-    this.applyDensity();
-
-    this.scroll.addEventListener('scroll', () => this.onScroll());
-  }
-
-  async show(): Promise<void> {
-    await this.options.offline.load();
-    const cached = this.options.offline.books();
-    if (cached.length > 0) this.renderItems(this.sorted(cached), true);
-    await this.refresh();
-  }
-
-  /**
-   * Refetches the first page and the "continue reading" row.
-   *
-   * Both in one `Promise.all`, because they are two halves of one screen: fetching
-   * them in sequence made the shelf appear and *then* a row appear above it,
-   * pushing everything down under the reader's thumb.
-   */
-  async refresh(): Promise<void> {
-    try {
-      const [page, continueItems] = await Promise.all([
-        this.options.api.listBooks(this.listQuery(1)),
-        this.options.api.continueReading(10).catch(() => [] as ContinueReadingItem[]),
-      ]);
-      this.offset = page.items.length;
-      this.total = page.total;
-      await this.options.offline.replaceBooks(page.items);
-      this.renderItems(this.sorted(page.items), true);
-      this.renderContinue(continueItems);
-      this.renderCount();
-      this.setStatus('');
-      this.scroll.scrollTop = this.lastScrollTop;
-    } catch (err) {
-      this.handleError(err);
-    }
-  }
-
-  private listQuery(page: number): ListQuery {
-    return {
-      ...(this.query ? { search: this.query } : {}),
-      sort: this.sort,
-      order: shelfOrder(this.sort),
-      page,
-      pageSize: 60,
-    };
-  }
-
-  /**
-   * Orders the cached shelf the same way the server would.
-   *
-   * The offline path has to answer the same question the online one does, so the
-   * rule lives in `shelf-order.ts` and is shared by both.
-   */
-  private sorted(books: Book[]): Book[] {
-    return sortBooks(books, this.sort);
-  }
-
-  private onSearchInput(): void {
-    this.query = this.searchInput.value.trim();
-    this.searchClear.hidden = this.query.length === 0;
-    if (this.searchTimer.id !== null) clearTimeout(this.searchTimer.id);
-    // Debounced: a shelf of 2000 books over a LAN is fine, but a mobile network
-    // plus a keystroke per character is not.
-    this.searchTimer.id = setTimeout(() => {
-      this.searchTimer.id = null;
-      void this.refresh();
-    }, 250);
-  }
-
-  private onScroll(): void {
-    this.lastScrollTop = this.scroll.scrollTop;
-    if (this.scroll.scrollTop + this.scroll.clientHeight >= this.scroll.scrollHeight - 400) {
-      void this.loadMore();
-    }
-    // Pull-to-refresh fires only when the reader has already overscrolled and lets
-    // go — a refresh on every scroll-to-top would fire constantly on a phone.
-    if (this.scroll.scrollTop < 24 && this.atTopSince !== null && Date.now() - this.atTopSince > 400) {
-      this.atTopSince = null;
-      void this.manualRefresh();
-    }
-  }
-
-  /** Timestamp of when the shelf first reached the top, for pull-to-refresh. */
-  private atTopSince: number | null = null;
-
-  private async manualRefresh(): Promise<void> {
-    this.refreshBar.hidden = false;
-    this.refreshBar.textContent = '正在刷新…';
-    try {
-      await this.refresh();
-      this.refreshBar.textContent = '已刷新';
-    } catch {
-      this.refreshBar.textContent = '刷新失败';
-    }
-    setTimeout(() => {
-      this.refreshBar.hidden = true;
-    }, 900);
-  }
-
-  private async loadMore(): Promise<void> {
-    if (this.loading || this.offset >= this.total) return;
-    this.loading = true;
-    this.showLoadingMore();
-    try {
-      const page = Math.floor(this.offset / 60) + 1;
-      const result = await this.options.api.listBooks(this.listQuery(page));
-      this.offset += result.items.length;
-      this.total = result.total;
-      await this.options.offline.replaceBooks(result.items);
-      this.appendItems(this.sorted(result.items), false);
-      this.renderCount();
-    } catch (err) {
-      if (!(err instanceof ApiError) || !err.isConnectivity) this.setStatus('加载更多失败');
-    } finally {
-      this.loading = false;
-      this.hideLoadingMore();
-    }
-  }
-
-  private showLoadingMore(): void {
-    if (this.extraLoading) return;
-    this.extraLoading = el('div', { className: 'spinner' });
-    this.scroll.append(this.extraLoading);
-  }
-
-  private hideLoadingMore(): void {
-    this.extraLoading?.remove();
-    this.extraLoading = null;
-  }
-
-  private renderCount(): void {
-    if (this.query) {
-      this.countLabel.textContent = `找到 ${this.total} 本`;
-      return;
-    }
-    this.countLabel.textContent = this.total > 0 ? `共 ${this.total} 本` : '';
-  }
-
-  /**
-   * The sort control.
-   *
-   * A row of chips rather than a `<select>`: four options is few enough to show
-   * all of them, and a picker that requires opening a sheet to answer "what order
-   * is this in" hides the answer at exactly the moment the reader is asking.
-   */
-  private buildSortRow(): void {
-    clear(this.sortRow);
-    const label = el('span', { className: 'shelf-sort-label muted', text: '排序' });
-    this.sortRow.append(label);
-    for (const option of SORTS) {
-      const active = option.value === this.sort;
-      this.sortRow.append(
-        el('button', {
-          className: 'chip',
-          text: option.label,
-          attrs: { type: 'button', 'aria-pressed': String(active), 'aria-label': `按${option.label}排序` },
-          on: {
-            click: () => {
-              if (this.sort === option.value) return;
-              this.sort = option.value;
-              // Written back so the choice survives a restart. It is a preference
-              // as much as it is a per-session intent, and the two cannot be told
-              // apart — so persisting is the less surprising of the two harms.
-              this.options.onSettingsChange({ shelfSort: this.sort });
-              this.settings.shelfSort = this.sort;
-              this.buildSortRow();
-              // Ordering changes the whole result set, so a refresh rather than a
-              // client-side re-sort: the server is the authority, and it is the
-              // only side that can re-sort a library larger than one page.
-              this.lastScrollTop = 0;
-              void this.refresh();
-            },
-          },
-        }),
-      );
-    }
-  }
-
-  private toggleSettings(): void {
-    this.settingsPanel.hidden = !this.settingsPanel.hidden;
-  }
-
-  /** Applies the density setting to the grid, by class rather than inline style. */
-  applyDensity(): void {
-    this.grid.dataset['density'] = this.settings.shelfDensity;
-    // The label is mirrored onto the control so the sheet does not have to be
-    // reopened to see what is set.
-    this.settingsButton.setAttribute('aria-label', `书架设置 · ${DENSITY_LABELS[this.settings.shelfDensity]}`);
-  }
-
-  applyAppearance(): void {
-    this.grid.dataset['showAuthor'] = String(this.settings.shelfShowAuthor);
-    this.grid.dataset['showProgress'] = String(this.settings.shelfShowProgress);
-  }
-
-  private renderItems(items: Book[], replace: boolean): void {
-    if (replace) {
-      clear(this.grid);
-      // Only the search result set is authoritative; without this, a cached
-      // shelf and a filtered response would merge into one confusing list.
-      this.rendered.clear();
-    }
-    this.applyAppearance();
-    this.appendItems(items, replace);
-    if (this.rendered.size === 0) {
-      this.grid.append(
-        el('div', {
-          className: 'empty-state',
-          children: [
-            el('p', { text: this.query ? '没有匹配的书' : '书库还是空的' }),
-            el('p', { className: 'muted', text: this.query ? '换个关键词试试' : '确认已经挂载书籍目录，并在设置里触发一次扫描' }),
-          ],
-        }),
-      );
-    }
-  }
-
-  private readonly rendered = new Set<string>();
-
-  private appendItems(items: Book[], _replace: boolean): void {
-    for (const book of items) {
-      if (this.rendered.has(book.id)) continue;
-      this.rendered.add(book.id);
-      this.grid.append(this.bookCard(book));
-    }
-  }
-
-  private bookCard(book: Book): HTMLButtonElement {
-    const cover = el('div', { className: 'cover' });
-    void this.fillCover(cover, book);
-
-    // The progress bar is drawn from the local mirror, which the sync engine
-    // keeps current — so it is correct offline, with no extra request per card.
-    const progress = this.options.offline.progressFor(book.id);
-    if (progress && progress.percentage > 0.005) {
-      const track = el('div', { className: 'cover-progress', children: [el('span')] });
-      (track.querySelector('span') as HTMLSpanElement).style.width = percent(progress.percentage);
-      cover.append(track);
-    }
-
-    return el('button', {
-      className: 'book-card',
-      attrs: { type: 'button', 'aria-label': `${book.title} ${book.author}`.trim() },
-      on: { click: () => this.options.onOpenBook(book) },
-      children: [
-        cover,
-        el('div', { className: 'title', text: book.title || '未命名' }),
-        el('div', { className: 'author', text: book.author || '未知作者' }),
-      ],
-    }) as HTMLButtonElement;
-  }
-
-  private async fillCover(container: HTMLDivElement, book: Book): Promise<void> {
-    const badge = el('span', { className: 'format-badge', text: book.format });
-    if (!book.coverUrl) {
-      container.append(el('div', { className: 'placeholder', text: book.title.slice(0, 12) || '无封面' }));
-      container.append(badge);
-      return;
-    }
-    const cached = this.coverUrls.get(book.id);
-    if (cached) {
-      container.append(el('img', { attrs: { src: cached, alt: '', loading: 'lazy' } }));
-      container.append(badge);
-      return;
-    }
-    try {
-      const bytes = await this.options.api.coverBytes(book.coverUrl);
-      const url = URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: 'image/jpeg' }));
-      this.coverUrls.set(book.id, url);
-      clear(container);
-      container.append(el('img', { attrs: { src: url, alt: '', loading: 'lazy' } }));
-      container.append(badge);
-    } catch {
-      container.append(el('div', { className: 'placeholder', text: book.title.slice(0, 12) || '无封面' }));
-      container.append(badge);
-    }
-  }
-
-  private renderContinue(items: ContinueReadingItem[]): void {
-    clear(this.continueRow);
-    if (items.length === 0) {
-      this.continueSection.hidden = true;
-      return;
-    }
-    this.continueSection.hidden = false;
-    for (const item of items) {
-      const cover = el('div', { className: 'cover' });
-      cover.style.cssText = 'aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--reader-line);display:grid;place-items:center;';
-      void this.options.api
-        .coverBytes(item.coverUrl ?? '')
-        .then((bytes) => {
-          const url = URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: 'image/jpeg' }));
-          clear(cover);
-          const img = el('img', { attrs: { src: url, alt: '' } });
-          img.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
-          cover.append(img);
-        })
-        .catch(() => {
-          cover.append(el('div', { className: 'placeholder', text: item.title.slice(0, 8) }));
-        });
-
-      const bar = el('div', { className: 'progress-track', children: [el('span')] });
-      const inner = bar.querySelector('span') as HTMLSpanElement;
-      inner.style.width = percent(item.percentage);
-
-      const card = el('button', {
-        className: 'continue-card',
-        attrs: { type: 'button' },
-        on: { click: () => this.options.onOpenBook(item) },
-        children: [
-          cover,
-          el('div', { className: 'title', text: item.title, attrs: { style: 'font-size:.8rem;margin-top:.3rem;' } }),
-          el('div', { className: 'muted', text: item.chapterTitle || percent(item.percentage), attrs: { style: 'font-size:.7rem;' } }),
-          bar,
-        ],
-      });
-      this.continueRow.append(card);
-    }
-  }
-
-  private setStatus(text: string): void {
-    this.statusLine.textContent = text;
-  }
-
-  private handleError(err: unknown): void {
-    if (err instanceof ApiError) {
-      if (err.isAuthFailure) {
-        this.options.onSignedOut();
-        return;
-      }
-      if (err.isConnectivity) {
-        const cached = this.options.offline.books();
-        if (cached.length > 0) {
-          this.setStatus(`离线模式 · ${cached.length} 本可读`);
-          this.renderItems(this.sorted(cached), true);
-          this.renderCount();
-          return;
-        }
-        this.setStatus('连不上服务端');
-        return;
-      }
-      this.setStatus(err.message);
-      return;
-    }
-    this.setStatus(err instanceof Error ? err.message : '出错了');
-  }
-
-  dispose(): void {
-    for (const url of this.coverUrls.values()) URL.revokeObjectURL(url);
-    this.coverUrls.clear();
-    if (this.searchTimer.id !== null) clearTimeout(this.searchTimer.id);
-  }
-}
diff --git a/web/src/ui/shelf-screen.tsx b/web/src/ui/shelf-screen.tsx
new file mode 100644
index 0000000..46fb1c2
--- /dev/null
+++ b/web/src/ui/shelf-screen.tsx
@@ -0,0 +1,604 @@
+import { ApiError } from '../api/errors.ts';
+import type { ListQuery, ReaderApi } from '../api/client.ts';
+import type { Book, ContinueReadingItem } from '../api/types.ts';
+import type { OfflineStore } from '../store/offline.ts';
+import type { Platform } from '../core/platform.ts';
+import type { AppSettings, ShelfSort } from '../store/settings.ts';
+import { mountUI } from './mount.ts';
+import { DENSITY_LABELS, ShelfSettingsPanel } from './shelf-settings.tsx';
+import { sortBooks, shelfOrder } from './shelf-order.ts';
+import { IconButton } from './toolkit.tsx';
+import { type ComponentChildren, type JSX, useEffect, useState } from './vendor/preact.ts';
+
+export interface ShelfScreenOptions {
+  api: ReaderApi;
+  offline: OfflineStore;
+  platform: Platform;
+  /** Current shelf preferences, so the screen starts in the reader's own state. */
+  settings: AppSettings;
+  onOpenBook(book: Book): void;
+  /** Opens the library file manager. Admin-ish by nature, but gated by the mount. */
+  onOpenManager(): void;
+  onSignedOut(): void;
+  /** Persisted through the app's settings store, like the reader's own. */
+  onSettingsChange(patch: Partial<AppSettings>): void;
+}
+
+/** Sort options, in the order the sheet shows them. */
+const SORTS: Array<{ value: ShelfSort; label: string }> = [
+  { value: 'updated', label: '最近更新' },
+  { value: 'added', label: '最近入库' },
+  { value: 'title', label: '书名' },
+  { value: 'author', label: '作者' },
+];
+
+const PAGE_SIZE = 60;
+
+interface ShelfState {
+  /** Written into the search field; the debounced query is `applied`. */
+  search: string;
+  query: string;
+  items: Book[];
+  continueItems: ContinueReadingItem[];
+  total: number;
+  loading: boolean;
+  status: string;
+  settingsOpen: boolean;
+  refreshing: boolean;
+  /** Bumped after a mutation so the cached cover URLs re-key, not re-fetch. */
+  revision: number;
+}
+
+/**
+ * The shelf.
+ *
+ * Behaviour rule that drives the whole screen: it renders from the local mirror
+ * first and only then replaces it with server data. On a LAN or with a cold
+ * cache that is invisible; on a train it is the difference between the library
+ * appearing instantly and an indefinite spinner (product design §8.2).
+ *
+ * ## What was added, and the rule behind each
+ *
+ * The shelf is the most-opened screen in the app and was the least configurable,
+ * which is an odd pairing: a reader who opens it forty times a day is the one who
+ * notices that the covers are too small, that the list is in the wrong order, and
+ * that clearing a search takes three taps. Every addition below follows one rule —
+ * **it must be a thing a reader would change twice**, because a settings screen
+ * full of switches nobody flips is worse than no settings screen.
+ *
+ *  - **Sort, as a control on the shelf** rather than only in settings, because
+ *    "show me what I just added" is a per-session intent, not a preference.
+ *  - **Density and author visibility in settings**, because those *are*
+ *    preferences: they are about the screen and the eyes, and they persist.
+ *  - **A clear button in the search field**, because on a phone the alternative is
+ *    selecting four characters with a fat-finger cursor.
+ *  - **Progress on the cover**, because the one question a shelf answers for a
+ *    reader who has twenty books going is "where was I".
+ *  - **A pull-to-refresh at the top**, because the shelf is now the only place a
+ *    scan's result becomes visible, and "I added a book, why is it not here" is
+ *    the complaint that a manual refresh answers.
+ *
+ * ## What the framework changed
+ *
+ * Nine node fields (`grid`, `continueRow`, `statusLine`, `countLabel`, `sortRow`,
+ * `refreshBar`, `settingsButton`, `settingsPanel`, `scroll`) and four render
+ * methods that had to agree with each other. They are now one `ShelfState` and a
+ * tree that is a function of it: the count label, the sort chips, the density
+ * dataset and the settings sheet cannot disagree about what is set, because
+ * there is one place each value is read from.
+ *
+ * The scroll handling stays imperative, because it *is* imperative: a scroll
+ * listener that reads `scrollTop` and fires a fetch has no markup to render.
+ */
+export class ShelfScreen {
+  readonly element: HTMLDivElement;
+  private readonly ui: ReturnType<typeof mountUI>;
+  private state: ShelfState = {
+    search: '',
+    query: '',
+    items: [],
+    continueItems: [],
+    total: 0,
+    loading: false,
+    status: '',
+    settingsOpen: false,
+    refreshing: false,
+    revision: 0,
+  };
+  private readonly settings: AppSettings;
+  /** Session sort; seeded from settings and written back when it changes. */
+  private sort: ShelfSort;
+  /** Scroll position from before the last refresh, so a refresh does not jump. */
+  private lastScrollTop = 0;
+  /** Timestamp of when the shelf first reached the top, for pull-to-refresh. */
+  private atTopSince: number | null = null;
+  private searchTimer: ReturnType<typeof setTimeout> | null = null;
+  private readonly scrollRef = { current: null as HTMLDivElement | null };
+
+  constructor(private readonly options: ShelfScreenOptions) {
+    this.settings = { ...options.settings };
+    this.sort = options.settings.shelfSort;
+
+    this.element = document.createElement('div');
+    this.element.className = 'shelf-screen';
+    this.element.style.cssText = 'flex:1 1 auto; min-height:0; display:flex; flex-direction:column;';
+    this.ui = mountUI(this.element, () => this.view(), this.state);
+  }
+
+  async show(): Promise<void> {
+    await this.options.offline.load();
+    const cached = this.options.offline.books();
+    if (cached.length > 0) {
+      this.patch({ items: sortBooks(cached, this.sort) });
+    }
+    await this.refresh();
+  }
+
+  /**
+   * Refetches the first page and the "continue reading" row.
+   *
+   * Both in one `Promise.all`, because they are two halves of one screen: fetching
+   * them in sequence made the shelf appear and *then* a row appear above it,
+   * pushing everything down under the reader's thumb.
+   */
+  async refresh(): Promise<void> {
+    try {
+      const [page, continueItems] = await Promise.all([
+        this.options.api.listBooks(this.listQuery(1)),
+        this.options.api.continueReading(10).catch(() => [] as ContinueReadingItem[]),
+      ]);
+      this.state.total = page.total;
+      await this.options.offline.replaceBooks(page.items);
+      this.patch({ items: sortBooks(page.items, this.sort), continueItems, status: '', revision: this.state.revision + 1 });
+      const scroll = this.scrollRef.current;
+      // Restored after the render, because the list is empty for one tick and a
+      // scroll position with nothing to scroll to is clamped to zero.
+      if (scroll) requestAnimationFrame(() => {
+        scroll.scrollTop = this.lastScrollTop;
+      });
+    } catch (err) {
+      this.handleError(err);
+    }
+  }
+
+  private listQuery(page: number): ListQuery {
+    return {
+      ...(this.state.query ? { search: this.state.query } : {}),
+      sort: this.sort,
+      order: shelfOrder(this.sort),
+      page,
+      pageSize: PAGE_SIZE,
+    };
+  }
+
+  private draw(): void {
+    this.ui.update(this.state);
+  }
+
+  private patch(patch: Partial<ShelfState>): void {
+    this.state = { ...this.state, ...patch };
+    this.draw();
+  }
+
+  private setStatus(status: string): void {
+    this.patch({ status });
+  }
+
+  private applySettings(patch: Partial<AppSettings>): void {
+    Object.assign(this.settings, patch);
+    this.options.onSettingsChange(patch);
+    this.draw();
+  }
+
+  // ---- search, sort, scroll ----
+
+  private onSearchInput(value: string): void {
+    this.patch({ search: value, query: value.trim() });
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+    // Debounced: a shelf of 2000 books over a LAN is fine, but a mobile network
+    // plus a keystroke per character is not.
+    this.searchTimer = setTimeout(() => {
+      this.searchTimer = null;
+      void this.refresh();
+    }, 250);
+  }
+
+  private clearSearch(): void {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+    this.searchTimer = null;
+    this.patch({ search: '', query: '' });
+    void this.refresh();
+  }
+
+  private pickSort(sort: ShelfSort): void {
+    if (this.sort === sort) return;
+    this.sort = sort;
+    // Written back so the choice survives a restart. It is a preference as much
+    // as it is a per-session intent, and the two cannot be told apart — so
+    // persisting is the less surprising of the two harms.
+    this.options.onSettingsChange({ shelfSort: sort });
+    this.settings.shelfSort = sort;
+    this.lastScrollTop = 0;
+    // Ordering changes the whole result set, so a refresh rather than a
+    // client-side re-sort: the server is the authority, and it is the only side
+    // that can re-sort a library larger than one page.
+    this.patch({ items: sortBooks(this.state.items, sort), revision: this.state.revision + 1 });
+    void this.refresh();
+  }
+
+  private onScroll(scroll: HTMLDivElement): void {
+    this.lastScrollTop = scroll.scrollTop;
+    if (scroll.scrollTop + scroll.clientHeight >= scroll.scrollHeight - 400) {
+      void this.loadMore();
+    }
+    // Pull-to-refresh fires only when the reader has already overscrolled and lets
+    // go — a refresh on every scroll-to-top would fire constantly on a phone.
+    if (scroll.scrollTop < 24 && this.atTopSince !== null && Date.now() - this.atTopSince > 400) {
+      this.atTopSince = null;
+      void this.manualRefresh();
+    }
+  }
+
+  private async manualRefresh(): Promise<void> {
+    this.patch({ refreshing: true });
+    try {
+      await this.refresh();
+    } finally {
+      setTimeout(() => this.patch({ refreshing: false }), 900);
+    }
+  }
+
+  private async loadMore(): Promise<void> {
+    if (this.state.loading || this.state.items.length >= this.state.total) return;
+    this.patch({ loading: true });
+    try {
+      const page = Math.floor(this.state.items.length / PAGE_SIZE) + 1;
+      const result = await this.options.api.listBooks(this.listQuery(page));
+      await this.options.offline.replaceBooks(result.items);
+      this.patch({
+        // Appended the way the server ordered them, not re-sorted: a page is a
+        // *continuation* of the order, and re-sorting it here would be right only
+        // by coincidence.
+        items: [...this.state.items, ...result.items],
+        total: result.total,
+        revision: this.state.revision + 1,
+      });
+    } catch (err) {
+      if (!(err instanceof ApiError) || !err.isConnectivity) this.setStatus('加载更多失败');
+    } finally {
+      this.patch({ loading: false });
+    }
+  }
+
+  private handleError(err: unknown): void {
+    if (err instanceof ApiError) {
+      if (err.isAuthFailure) {
+        this.options.onSignedOut();
+        return;
+      }
+      if (err.isConnectivity) {
+        const cached = this.options.offline.books();
+        if (cached.length > 0) {
+          this.patch({
+            items: sortBooks(cached, this.sort),
+            status: `离线模式 · ${cached.length} 本可读`,
+            revision: this.state.revision + 1,
+          });
+          return;
+        }
+        this.setStatus('连不上服务端');
+        return;
+      }
+      this.setStatus(err.message);
+      return;
+    }
+    this.setStatus(err instanceof Error ? err.message : '出错了');
+  }
+
+  // ---- the tree ----
+
+  private view(): JSX.Element {
+    const state = this.state;
+    const density = this.settings.shelfDensity;
+    return (
+      <ShelfScroller
+        containerRef={this.scrollRef}
+        onScroll={(scroll) => this.onScroll(scroll)}
+        onReachTop={() => {
+          this.atTopSince = Date.now();
+        }}
+      >
+        <div className="shelf-search">
+          <input
+            type="search"
+            placeholder="搜索书名、作者、系列"
+            aria-label="搜索书库"
+            enterKeyHint="search"
+            value={state.search}
+            onInput={(event) => this.onSearchInput((event.currentTarget as HTMLInputElement).value)}
+            onKeyDown={(event) => {
+              // `search` inputs fire a non-standard `search` event on clear, but
+              // only in some browsers; Enter is the one that is reliable
+              // everywhere and it also means "stop waiting for the debounce".
+              if (event.key === 'Enter') {
+                if (this.searchTimer) clearTimeout(this.searchTimer);
+                this.searchTimer = null;
+                this.patch({ query: state.search.trim() });
+                void this.refresh();
+              }
+            }}
+          />
+          {state.search.length > 0 ? (
+            <button type="button" className="search-clear" aria-label="清除搜索" onClick={() => this.clearSearch()}>
+              ✕
+            </button>
+          ) : null}
+        </div>
+
+        {state.continueItems.length > 0 ? (
+          <div>
+            <div className="shelf-section-title">继续阅读</div>
+            <div className="continue-row">
+              {state.continueItems.map((item) => (
+                <ContinueCard
+                  key={item.id}
+                  item={item}
+                  revision={state.revision}
+                  api={this.options.api}
+                  onOpen={() => this.options.onOpenBook(item)}
+                />
+              ))}
+            </div>
+          </div>
+        ) : null}
+
+        <div className="shelf-toolbar">
+          <div className="shelf-count muted">
+            {state.query ? `找到 ${state.total} 本` : state.total > 0 ? `共 ${state.total} 本` : ''}
+          </div>
+          <div className="shelf-sort">
+            <span className="shelf-sort-label muted">排序</span>
+            {SORTS.map((option) => (
+              <button
+                type="button"
+                key={option.value}
+                className="chip"
+                aria-pressed={option.value === this.sort}
+                aria-label={`按${option.label}排序`}
+                onClick={() => this.pickSort(option.value)}
+              >
+                {option.label}
+              </button>
+            ))}
+          </div>
+          <IconButton
+            label={`书架设置 · ${DENSITY_LABELS[density]}`}
+            onClick={() => this.patch({ settingsOpen: !state.settingsOpen })}
+          >
+            ⚙
+          </IconButton>
+          {/* The file manager's entry point sits next to the shelf settings gear
+              because that is where "the library itself" already lives. It is
+              offered to every account, not just admins: the mount decides whether
+              it can write anything, and a reader whose own book failed to appear
+              is exactly who needs to look. */}
+          <IconButton label="书库管理" onClick={() => this.options.onOpenManager()}>
+            🗂
+          </IconButton>
+        </div>
+
+        <div className="shelf-refresh" hidden={!state.refreshing}>
+          {state.refreshing ? '正在刷新…' : ''}
+        </div>
+
+        <div
+          className="book-grid"
+          data-density={density}
+          data-showAuthor={String(this.settings.shelfShowAuthor)}
+          data-showProgress={String(this.settings.shelfShowProgress)}
+        >
+          {state.items.length === 0 && !state.loading ? (
+            <div className="empty-state">
+              <p>{state.query ? '没有匹配的书' : '书库还是空的'}</p>
+              <p className="muted">
+                {state.query ? '换个关键词试试' : '确认已经挂载书籍目录，并在设置里触发一次扫描'}
+              </p>
+            </div>
+          ) : null}
+          {state.items.map((book) => (
+            <BookCard
+              key={book.id}
+              book={book}
+              progress={this.options.offline.progressFor(book.id)}
+              revision={state.revision}
+              api={this.options.api}
+              onOpen={() => this.options.onOpenBook(book)}
+            />
+          ))}
+        </div>
+
+        <div className="shelf-status muted">{state.status}</div>
+
+        {this.state.loading && this.state.items.length > 0 ? <div className="spinner" /> : null}
+
+        <ShelfSettingsPanel
+          open={state.settingsOpen}
+          settings={this.settings}
+          onPatch={(patch) => this.applySettings(patch)}
+          onClose={() => this.patch({ settingsOpen: false })}
+        />
+      </ShelfScroller>
+    );
+  }
+
+  dispose(): void {
+    if (this.searchTimer) clearTimeout(this.searchTimer);
+    this.searchTimer = null;
+    this.ui.unmount();
+  }
+}
+
+/**
+ * The scrolling container.
+ *
+ * A component because the scroll listener, the "first reached the top" stamp and
+ * the measured container all belong to one node — the previous version reached
+ * for `this.scroll` from four methods. `onScroll` is passed the element itself,
+ * so the caller reads `scrollTop` from the node that fired rather than from a
+ * field that may be a render behind.
+ */
+function ShelfScroller({
+  containerRef,
+  onScroll,
+  onReachTop,
+  children,
+}: {
+  containerRef: { current: HTMLDivElement | null };
+  onScroll(scroll: HTMLDivElement): void;
+  onReachTop(): void;
+  children: ComponentChildren;
+}): JSX.Element {
+  const [reachedTop, setReachedTop] = useState(false);
+  return (
+    <div
+      id="shelf-scroll"
+      className="shelf"
+      ref={containerRef}
+      onScroll={(event) => {
+        const scroll = event.currentTarget as HTMLDivElement;
+        onScroll(scroll);
+        if (scroll.scrollTop >= 24) {
+          setReachedTop(false);
+        } else if (!reachedTop) {
+          setReachedTop(true);
+          onReachTop();
+        }
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/** A cover, resolved to a blob URL once and re-used across renders. */
+function useCoverUrl(api: ReaderApi, coverUrl: string | null | undefined, revision: number): string | null {
+  const [url, setUrl] = useState<string | null>(null);
+  const cache = coverCache(api);
+  useEffect(() => {
+    if (!coverUrl) {
+      setUrl(null);
+      return;
+    }
+    const hit = cache.get(coverUrl);
+    if (hit) {
+      setUrl(hit);
+      return;
+    }
+    let live = true;
+    void api
+      .coverBytes(coverUrl)
+      .then((bytes) => {
+        const objectUrl = URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: 'image/jpeg' }));
+        cache.set(coverUrl, objectUrl);
+        // The screen can be disposed while a cover is in flight; setting state on
+        // an unmounted component is a leak of the object URL, nothing more.
+        if (live) setUrl(objectUrl);
+      })
+      .catch(() => {
+        if (live) setUrl(null);
+      });
+    return () => {
+      live = false;
+    };
+  }, [coverUrl, revision]);
+  return url;
+}
+
+/**
+ * Object URLs outlive individual cards.
+ *
+ * A shelf that scrolls away and back must not re-fetch forty covers, and a
+ * revoked URL is a broken image, so the cache is process-wide and released on
+ * `pagehide` rather than per card.
+ */
+const coverCaches = new WeakMap<ReaderApi, Map<string, string>>();
+
+function coverCache(api: ReaderApi): Map<string, string> {
+  let cache = coverCaches.get(api);
+  if (!cache) {
+    cache = new Map<string, string>();
+    coverCaches.set(api, cache);
+  }
+  return cache;
+}
+
+function BookCard({
+  book,
+  progress,
+  revision,
+  api,
+  onOpen,
+}: {
+  book: Book;
+  progress: { percentage: number } | undefined;
+  revision: number;
+  api: ReaderApi;
+  onOpen(): void;
+}): JSX.Element {
+  const url = useCoverUrl(api, book.coverUrl, revision);
+  return (
+    <button type="button" className="book-card" aria-label={`${book.title} ${book.author}`.trim()} onClick={onOpen}>
+      <div className="cover">
+        {url ? <img src={url} alt="" loading="lazy" /> : <div className="placeholder">{book.title.slice(0, 12) || '无封面'}</div>}
+        <span className="format-badge">{book.format}</span>
+        {/* Drawn from the local mirror, which the sync engine keeps current — so
+            it is correct offline, with no extra request per card. */}
+        {progress && progress.percentage > 0.005 ? (
+          <div className="cover-progress">
+            <span style={`width:${Math.round(Math.min(1, Math.max(0, progress.percentage)) * 100)}%`} />
+          </div>
+        ) : null}
+      </div>
+      <div className="title">{book.title || '未命名'}</div>
+      <div className="author">{book.author || '未知作者'}</div>
+    </button>
+  );
+}
+
+function ContinueCard({
+  item,
+  revision,
+  api,
+  onOpen,
+}: {
+  item: ContinueReadingItem;
+  revision: number;
+  api: ReaderApi;
+  onOpen(): void;
+}): JSX.Element {
+  const url = useCoverUrl(api, item.coverUrl, revision);
+  const width = `${Math.round(Math.min(1, Math.max(0, item.percentage)) * 100)}%`;
+  return (
+    <button type="button" className="continue-card" onClick={onOpen}>
+      <div
+        className="cover"
+        style="aspect-ratio:2/3;border-radius:6px;overflow:hidden;background:var(--reader-line);display:grid;place-items:center;"
+      >
+        {url ? (
+          <img src={url} alt="" style="width:100%;height:100%;object-fit:cover;display:block;" />
+        ) : (
+          <div className="placeholder">{item.title.slice(0, 8)}</div>
+        )}
+      </div>
+      <div className="title" style="font-size:.8rem;margin-top:.3rem;">
+        {item.title}
+      </div>
+      <div className="muted" style="font-size:.7rem;">
+        {item.chapterTitle || `${Math.round(item.percentage * 100)}%`}
+      </div>
+      <div className="progress-track">
+        <span style={`width:${width}`} />
+      </div>
+    </button>
+  );
+}
diff --git a/web/src/ui/shelf-settings.ts b/web/src/ui/shelf-settings.ts
deleted file mode 100644
index 8e161ce..0000000
--- a/web/src/ui/shelf-settings.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * The shelf's own settings.
- *
- * A sheet rather than a route, and a separate file rather than more rows in the
- * reader's panel — because the two answer different questions. The reader panel
- * is about the *page*: type size, line height, the engine that reads it aloud.
- * This one is about the *grid*: how many covers fit, what each cover shows, and
- * what order they are in.
- *
- * Keeping them apart is not tidiness. A reader who wants bigger covers should not
- * have to open a panel full of typography settings to find it, and the reader's
- * panel is already four sections long.
- */
-
-import type { AppSettings } from '../store/settings.ts';
-import { el } from './dom.ts';
-
-export const DENSITY_LABELS: Record<AppSettings['shelfDensity'], string> = {
-  compact: '紧凑',
-  cozy: '适中',
-  comfortable: '宽松',
-};
-
-export interface ShelfSettingsOptions {
-  settings: AppSettings;
-  onPatch(patch: Partial<AppSettings>): void;
-  onClose(): void;
-}
-
-/**
- * Builds the sheet.
- *
- * Returns the panel element, hidden. Rows are built once and mutate the settings
- * object in place: this is a form over a handful of values, and rebuilding it on
- * every toggle would fight the reader's own tap (the button they just pressed
- * would be replaced under their finger).
- */
-export function buildShelfSettingsPanel(options: ShelfSettingsOptions): HTMLDivElement {
-  const body = el('div', { className: 'panel-body' });
-
-  body.append(
-    el('div', {
-      className: 'section-title',
-      text: '封面大小',
-    }),
-  );
-  body.append(
-    segmented(
-      (['compact', 'cozy', 'comfortable'] as const).map((value) => ({
-        value,
-        label: DENSITY_LABELS[value],
-      })),
-      options.settings.shelfDensity,
-      (value) => options.onPatch({ shelfDensity: value as AppSettings['shelfDensity'] }),
-    ),
-  );
-
-  body.append(el('div', { className: 'section-title', text: '显示' }));
-  body.append(
-    toggleRow('显示作者', '关闭后每本书只显示书名，封面可以更小', options.settings.shelfShowAuthor, (value) =>
-      options.onPatch({ shelfShowAuthor: value }),
-    ),
-  );
-  body.append(
-    toggleRow('显示阅读进度', '在封面底部画一条进度条', options.settings.shelfShowProgress, (value) =>
-      options.onPatch({ shelfShowProgress: value }),
-    ),
-  );
-
-  body.append(el('div', { className: 'section-title', text: '默认排序' }));
-  body.append(
-    el('div', {
-      className: 'notice',
-      text: '书架上的排序按钮会记住最后一次选择，这里设置的是首次打开时的默认值。',
-    }),
-  );
-  body.append(
-    segmented(
-      [
-        { value: 'updated', label: '最近更新' },
-        { value: 'added', label: '最近入库' },
-        { value: 'title', label: '书名' },
-        { value: 'author', label: '作者' },
-      ],
-      options.settings.shelfSort,
-      (value) => options.onPatch({ shelfSort: value as AppSettings['shelfSort'] }),
-    ),
-  );
-
-  return el('div', {
-    className: 'panel shelf-settings',
-    attrs: { hidden: true },
-    children: [
-      el('div', {
-        className: 'panel-header',
-        children: [
-          el('h2', { text: '书架设置' }),
-          el('button', {
-            className: 'icon-button',
-            text: '✕',
-            attrs: { type: 'button', 'aria-label': '关闭' },
-            on: { click: options.onClose },
-          }),
-        ],
-      }),
-      body,
-    ],
-  }) as HTMLDivElement;
-}
-
-function segmented(
-  values: Array<{ value: string; label: string }>,
-  current: string,
-  onChange: (value: string) => void,
-): HTMLDivElement {
-  const buttons = values.map((entry) =>
-    el('button', {
-      text: entry.label,
-      attrs: { type: 'button', 'aria-pressed': String(entry.value === current) },
-      on: {
-        click: (event) => {
-          const group = (event.currentTarget as HTMLElement).parentElement;
-          for (const sibling of group?.children ?? []) {
-            sibling.setAttribute('aria-pressed', String(sibling === event.currentTarget));
-          }
-          onChange(entry.value);
-        },
-      },
-    }),
-  );
-  return el('div', { className: 'segmented', children: buttons }) as HTMLDivElement;
-}
-
-/**
- * A switch.
- *
- * `aria-pressed` rather than a checkbox: the row is the hit target (44px), and a
- * checkbox would put the target on a 16px square next to a label that does
- * nothing when tapped.
- */
-function toggleRow(label: string, hint: string, value: boolean, onChange: (value: boolean) => void): HTMLDivElement {
-  const button = el('button', {
-    className: 'switch',
-    attrs: { type: 'button', 'aria-pressed': String(value) },
-    on: {
-      click: (event) => {
-        const next = (event.currentTarget as HTMLElement).getAttribute('aria-pressed') !== 'true';
-        (event.currentTarget as HTMLElement).setAttribute('aria-pressed', String(next));
-        onChange(next);
-      },
-    },
-  });
-  const text = el('div', { className: 'switch-text', children: [el('div', { text: label }), el('div', { className: 'muted', text: hint })] });
-  return el('div', {
-    className: 'field switch-field',
-    children: [text, button],
-  }) as HTMLDivElement;
-}
diff --git a/web/src/ui/shelf-settings.tsx b/web/src/ui/shelf-settings.tsx
new file mode 100644
index 0000000..1dfc30d
--- /dev/null
+++ b/web/src/ui/shelf-settings.tsx
@@ -0,0 +1,97 @@
+/**
+ * The shelf's own settings.
+ *
+ * A sheet rather than a route, and a separate file rather than more rows in the
+ * reader's panel — because the two answer different questions. The reader panel
+ * is about the *page*: type size, line height, the engine that reads it aloud.
+ * This one is about the *grid*: how many covers fit, what each cover shows, and
+ * what order they are in.
+ *
+ * Keeping them apart is not tidiness. A reader who wants bigger covers should not
+ * have to open a panel full of typography settings to find it, and the reader's
+ * panel is already four sections long.
+ *
+ * The panel is a component now, drawn from the settings object it is handed. The
+ * previous version built it once in the constructor and then mutated it in place
+ * (it had to, to avoid replacing the button under the reader's finger) — which
+ * meant the control that was *not* pressed never learned that its value had
+ * changed somewhere else. Here every control is rendered from `settings`, so a
+ * patch from anywhere redraws all of them, and pressing a button no longer
+ * replaces it under the finger because Preact diffs the text of the node that is
+ * already there.
+ */
+
+import type { AppSettings } from '../store/settings.ts';
+import { IconButton, SectionTitle, Segmented, SwitchRow } from './toolkit.tsx';
+import type { JSX } from './vendor/preact.ts';
+
+export const DENSITY_LABELS: Record<AppSettings['shelfDensity'], string> = {
+  compact: '紧凑',
+  cozy: '适中',
+  comfortable: '宽松',
+};
+
+export interface ShelfSettingsOptions {
+  settings: AppSettings;
+  onPatch(patch: Partial<AppSettings>): void;
+  onClose(): void;
+}
+
+export function ShelfSettingsPanel({
+  open,
+  settings,
+  onPatch,
+  onClose,
+}: ShelfSettingsOptions & { open: boolean }): JSX.Element {
+  return (
+    <div className="panel shelf-settings" hidden={!open}>
+      <div className="panel-header">
+        <h2>书架设置</h2>
+        <IconButton label="关闭" onClick={onClose}>
+          ✕
+        </IconButton>
+      </div>
+      <div className="panel-body">
+        <SectionTitle>封面大小</SectionTitle>
+        <Segmented
+          label="封面大小"
+          options={[
+            { value: 'compact', label: DENSITY_LABELS.compact },
+            { value: 'cozy', label: DENSITY_LABELS.cozy },
+            { value: 'comfortable', label: DENSITY_LABELS.comfortable },
+          ]}
+          value={settings.shelfDensity}
+          onChange={(value) => onPatch({ shelfDensity: value })}
+        />
+
+        <SectionTitle>显示</SectionTitle>
+        <SwitchRow
+          label="显示作者"
+          hint="关闭后每本书只显示书名，封面可以更小"
+          checked={settings.shelfShowAuthor}
+          onChange={(checked) => onPatch({ shelfShowAuthor: checked })}
+        />
+        <SwitchRow
+          label="显示阅读进度"
+          hint="在封面底部画一条进度条"
+          checked={settings.shelfShowProgress}
+          onChange={(checked) => onPatch({ shelfShowProgress: checked })}
+        />
+
+        <SectionTitle>默认排序</SectionTitle>
+        <div className="notice">书架上的排序按钮会记住最后一次选择，这里设置的是首次打开时的默认值。</div>
+        <Segmented
+          label="默认排序"
+          options={[
+            { value: 'updated', label: '最近更新' },
+            { value: 'added', label: '最近入库' },
+            { value: 'title', label: '书名' },
+            { value: 'author', label: '作者' },
+          ]}
+          value={settings.shelfSort}
+          onChange={(value) => onPatch({ shelfSort: value })}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/ui/shelf-view.ts b/web/src/ui/shelf-view.ts
deleted file mode 100644
index 86a56e5..0000000
--- a/web/src/ui/shelf-view.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * The bookshelf.
- *
- * A grid of covers, which is the only browse surface a personal library needs.
- * Two choices worth naming:
- *
- *  - **Covers are loaded eagerly and lazily at the same time.** The first screen
- *    of covers is requested immediately so the shelf is not a wall of grey; the
- *    rest are `loading="lazy"`, so scrolling a 2000-book library does not open
- *    2000 requests on the way down.
- *  - **Search is debounced and server-side.** Filtering 2000 books in the client
- *    would mean holding all of them in memory, and the server already indexes
- *    title, author, series and ISBN — a client-side filter would silently miss
- *    fields the user expects to match.
- */
-
-import { ApiClient, type BookDto } from '../net/api.ts';
-
-export interface ShelfHost {
-  onOpenBook?: (book: BookDto) => void;
-  onSignOut?: () => void;
-}
-
-export class ShelfView {
-  private readonly root: HTMLElement;
-  private readonly grid: HTMLElement;
-  /** Built once, mounted on demand. */
-  private built = false;
-  private search = '';
-  private page = 1;
-  private total = 0;
-  private loading = false;
-  private searchTimer: ReturnType<typeof setTimeout> | null = null;
-
-  constructor(
-    private readonly host: HTMLElement,
-    private readonly api: ApiClient,
-    private readonly options: ShelfHost = {},
-  ) {
-    this.root = document.createElement('div');
-    this.root.className = 'shelf';
-
-    const header = document.createElement('div');
-    header.className = 'shelf__header';
-    const title = document.createElement('h1');
-    title.className = 'shelf__title';
-    title.textContent = '书库';
-    const signOut = document.createElement('button');
-    signOut.className = 'reader__button';
-    signOut.textContent = '退出';
-    signOut.addEventListener('click', () => this.options.onSignOut?.());
-    header.append(title, signOut);
-
-    const input = document.createElement('input');
-    input.className = 'shelf__search';
-    input.type = 'search';
-    input.placeholder = '搜索书名、作者、系列';
-    input.addEventListener('input', () => {
-      this.search = input.value.trim();
-      // Debounced: a request per keystroke against a self-hosted server on a NAS
-      // is a request per keystroke against a spinning disk.
-      if (this.searchTimer) clearTimeout(this.searchTimer);
-      this.searchTimer = setTimeout(() => {
-        this.page = 1;
-        void this.load(true);
-      }, 250);
-    });
-
-    this.grid = document.createElement('div');
-    this.grid.className = 'shelf__grid';
-
-    this.root.append(header, input, this.grid);
-
-    // Infinite scroll: a library is browsed by scrolling, and paging controls on
-    // a phone are a tax on every visit.
-    this.root.addEventListener('scroll', () => {
-      if (this.loading || this.grid.childElementCount >= this.total) return;
-      const remaining = this.root.scrollHeight - this.root.scrollTop - this.root.clientHeight;
-      if (remaining < 600) void this.load(false);
-    });
-  }
-
-  /**
-   * Take over the host element.
-   *
-   * Mounting is separate from construction because the view is built once, at
-   * startup, while the auth screen may still own the host. Replacing the host's
-   * children in the constructor meant the shelf's markup was installed and then
-   * covered by the dialog that mounted after it — so a successful sign-in left
-   * the login form on screen with the loaded shelf hidden underneath.
-   */
-  mount(): void {
-    this.host.replaceChildren(this.root);
-    this.built = true;
-  }
-
-  get mounted(): boolean {
-    return this.built;
-  }
-
-  async load(reset: boolean): Promise<void> {
-    if (this.loading) return;
-    this.loading = true;
-    if (reset) this.grid.replaceChildren();
-    try {
-      const result = await this.api.shelf({ page: this.page, pageSize: 60, ...(this.search ? { search: this.search } : {}) });
-      this.total = result.total;
-      if (result.items.length === 0 && reset) {
-        const empty = document.createElement('div');
-        empty.className = 'shelf__empty';
-        empty.textContent = this.search ? '没有匹配的书' : '书库是空的，检查挂载目录';
-        this.grid.append(empty);
-      }
-      for (const book of result.items) this.grid.append(this.card(book));
-      this.page += 1;
-    } catch (error) {
-      const message = document.createElement('div');
-      message.className = 'shelf__empty';
-      message.textContent = error instanceof Error ? error.message : '加载失败';
-      this.grid.replaceChildren(message);
-    } finally {
-      this.loading = false;
-    }
-  }
-
-  private card(book: BookDto): HTMLElement {
-    const card = document.createElement('button');
-    card.className = 'book-card';
-    card.type = 'button';
-    // The whole card is the hit target: on a phone a tap on a 108px cover is
-    // already at the edge of the 44px recommendation, and a separate title link
-    // would be worse.
-    card.addEventListener('click', () => this.options.onOpenBook?.(book));
-
-    // A book without cover art — most TXT files and plenty of PDFs — gets a
-    // placeholder rather than an `<img>` with no source, which every browser
-    // renders as a broken-image icon. That icon reads as "this library is broken"
-    // when the truth is "this book has no cover", and there is no way for the
-    // reader to tell the two apart.
-    const cover = document.createElement('div');
-    cover.className = 'book-card__cover';
-    if (book.coverUrl) {
-      const image = document.createElement('img');
-      image.className = 'book-card__cover-img';
-      image.alt = '';
-      // `loading=lazy` plus the fixed aspect ratio reserves the space before the
-      // image arrives, so the grid does not reflow under a thumb that is already
-      // scrolling.
-      image.loading = 'lazy';
-      image.decoding = 'async';
-      // The DTO carries the server's own path; the token has to come from the
-      // client, because an `<img src>` cannot send an Authorization header.
-      image.src = this.api.coverUrl(book.id);
-      image.addEventListener('error', () => {
-        // A cover that fails to load is a missing cover, not a missing book.
-        // Falling back to the placeholder keeps the shelf uniform instead of
-        // leaving one card looking damaged.
-        image.remove();
-        cover.classList.add('book-card__cover--missing');
-        cover.textContent = book.title.slice(0, 1);
-      });
-      cover.append(image);
-    } else {
-      cover.classList.add('book-card__cover--missing');
-      // The first character, which is what a spine would show. A generic icon
-      // would make every coverless book indistinguishable in a grid of forty.
-      cover.textContent = book.title.slice(0, 1);
-    }
-
-    const title = document.createElement('div');
-    title.className = 'book-card__title';
-    title.textContent = book.title;
-
-    const meta = document.createElement('div');
-    meta.className = 'book-card__meta';
-    meta.textContent = [book.author, formatLabel(book.format)].filter(Boolean).join(' · ');
-
-    card.append(cover, title, meta);
-    return card;
-  }
-}
-
-function formatLabel(format: string): string {
-  const labels: Record<string, string> = {
-    epub: 'EPUB',
-    pdf: 'PDF',
-    cbz: '漫画',
-    'comic-dir': '漫画',
-    txt: 'TXT',
-    image: '图片',
-  };
-  return labels[format] ?? format.toUpperCase();
-}
diff --git a/web/src/ui/toolkit.tsx b/web/src/ui/toolkit.tsx
new file mode 100644
index 0000000..43b0b63
--- /dev/null
+++ b/web/src/ui/toolkit.tsx
@@ -0,0 +1,163 @@
+/**
+ * The primitives every screen was re-writing by hand.
+ *
+ * This file is the answer to "what does a framework actually buy us here". The
+ * old UI built each control inline — `el('button', { className: 'icon-button',
+ * attrs: { type: 'button', 'aria-label': '关闭' }, … })` — and the parts that
+ * were *not* inline were the parts that were wrong: a dialog had no focus trap,
+ * a sheet had no Escape handling, the segmented control and the switch each had
+ * their own hand-rolled `aria-pressed` bookkeeping that could disagree with the
+ * value it was drawn from.
+ *
+ * Each component here owns those details once, and takes the settings value and
+ * a callback as props, so the rendered state cannot drift from the stored state.
+ */
+
+import { type ComponentChildren, type JSX } from './vendor/preact.ts';
+
+/** The panel headings and controls the stylesheet already styles. */
+export function SectionTitle({ children }: { children: ComponentChildren }): JSX.Element {
+  return <div className="section-title">{children}</div>;
+}
+
+export function Notice({ children }: { children: ComponentChildren }): JSX.Element {
+  return <div className="notice">{children}</div>;
+}
+
+export interface IconButtonProps {
+  label: string;
+  /** Glyph. Kept as a child so a caller can pass an element instead. */
+  children: ComponentChildren;
+  onClick?: (event: MouseEvent) => void;
+  disabled?: boolean;
+  /** Kept in the DOM so the header's layout does not depend on the mount. */
+  hidden?: boolean;
+}
+
+export function IconButton({ label, children, onClick, disabled, hidden }: IconButtonProps): JSX.Element {
+  return (
+    <button
+      type="button"
+      className="icon-button"
+      aria-label={label}
+      disabled={disabled ?? false}
+      hidden={hidden ?? false}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface PrimaryButtonProps {
+  children: ComponentChildren;
+  onClick?: (event: MouseEvent) => void;
+  disabled?: boolean;
+  type?: 'button' | 'submit';
+  className?: string;
+}
+
+export function Button({ children, onClick, disabled, type, className }: PrimaryButtonProps): JSX.Element {
+  return (
+    <button
+      type={type ?? 'button'}
+      className={className ? `button ${className}` : 'button'}
+      disabled={disabled ?? false}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+export interface SegmentedProps<T extends string> {
+  options: Array<{ value: T; label: string }>;
+  value: T;
+  onChange(value: T): void;
+  /** Accessible name for the group, e.g. "封面大小". */
+  label?: string;
+}
+
+/**
+ * A segmented control.
+ *
+ * `aria-pressed` is derived from `value` on every render, which is the fix for
+ * the old version's real bug: it toggled the attribute on the sibling nodes by
+ * hand, so any path that changed the setting without going through the click
+ * handler left the buttons showing the wrong selection.
+ */
+export function Segmented<T extends string>({ options, value, onChange, label }: SegmentedProps<T>): JSX.Element {
+  return (
+    <div className="segmented" role="group" aria-label={label ?? ''}>
+      {options.map((option) => (
+        <button
+          type="button"
+          key={option.value}
+          aria-pressed={option.value === value}
+          onClick={() => onChange(option.value)}
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export interface SwitchRowProps {
+  label: string;
+  hint: string;
+  checked: boolean;
+  onChange(checked: boolean): void;
+}
+
+/**
+ * A labelled switch.
+ *
+ * A button rather than a checkbox, for the reason the old file documented: the
+ * row is the 44px hit target, and a checkbox puts the target on a 16px square
+ * that a thumb misses. The `aria-pressed` state now comes from `checked`
+ * instead of from the DOM the click just modified.
+ */
+export function SwitchRow({ label, hint, checked, onChange }: SwitchRowProps): JSX.Element {
+  return (
+    <div className="field switch-field">
+      <div className="switch-text">
+        <div>{label}</div>
+        <div className="muted">{hint}</div>
+      </div>
+      <button
+        type="button"
+        className="switch"
+        aria-pressed={checked}
+        onClick={() => onChange(!checked)}
+      />
+    </div>
+  );
+}
+
+export interface ScrimProps {
+  onDismiss?(): void;
+  children: ComponentChildren;
+  className?: string;
+}
+
+/**
+ * The element panels and dialogs sit on.
+ *
+ * Clicking outside a panel to dismiss it is the one interaction a reader expects
+ * from a sheet, and re-implementing it per screen is how a screen ends up
+ * dismissing the panel when the reader tapped *inside* it (a click that lands on
+ * the panel's own padding still bubbles). The check is on the target, once.
+ */
+export function Scrim({ onDismiss, children, className }: ScrimProps): JSX.Element {
+  return (
+    <div
+      className={className ?? 'panel-host'}
+      onClick={(event) => {
+        if (onDismiss && event.target === event.currentTarget) onDismiss();
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/web/src/ui/vendor/preact.ts b/web/src/ui/vendor/preact.ts
new file mode 100644
index 0000000..63db5d8
--- /dev/null
+++ b/web/src/ui/vendor/preact.ts
@@ -0,0 +1,17 @@
+/**
+ * The framework, re-exported from exactly one place.
+ *
+ * Every component imports Preact from here rather than from `preact` directly, so
+ * the bundle has a single entry into the runtime and so a future swap (or a
+ * version pin) is one file rather than a search-and-replace across the UI. It
+ * also documents *what* the UI layer is allowed to use: the runtime and hooks,
+ * not `preact/compat` — there is no React compatibility layer in here, no
+ * `react-dom`, and nothing that would pull in either.
+ *
+ * `preact/hooks` is `useState`/`useRef`/`useEffect` implemented in ~1.5KB gzip
+ * on top of the runtime's own scheduler, which is the whole reason the numbers
+ * work out: the UI layer costs about 6KB gzip, not the 45KB a React build would.
+ */
+export { createElement, Fragment, render, type ComponentChildren, type VNode } from 'preact';
+export { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+export type { JSX } from 'preact';
diff --git a/web/test/manager.test.ts b/web/test/manager.test.ts
index a741a77..8984fcc 100644
--- a/web/test/manager.test.ts
+++ b/web/test/manager.test.ts
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { ManagerScreen } from '../src/ui/manager-screen.ts';
+import { ManagerScreen } from '../src/ui/manager-screen.tsx';
 import { ReaderApi, type SessionStore } from '../src/api/client.ts';
 import { ApiError } from '../src/api/errors.ts';
 import { FakeTransport, makePlatform } from './helpers/env.ts';
diff --git a/web/tsconfig.json b/web/tsconfig.json
index c5d19be..fe9c937 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -15,7 +15,11 @@
     "verbatimModuleSyntax": true,
     "allowImportingTsExtensions": true,
     "skipLibCheck": true,
-    "noEmit": true
+    "noEmit": true,
+    // The UI layer is Preact components; the render layer is still imperative DOM
+    // work and stays TS. Both compile out of this one config.
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
   },
   "include": ["src", "test", "vite.config.ts"]
 }