Add 金剛經 (Diamond Sutra) as a fully-implemented themed book

README.md

@@ -4,9 +4,22 @@
 
 不是读书 App,不是笔记工具,不是 AI 聊天产品 —— 更接近一座**可以走进去的、还在生长的碑林**。
 
-This repository holds the 老树 product front-end. The first page implemented is
-**我的树 (My Tree)** — a reader's personal archive, rendered as an abstract, slowly
-growing tree.
+This repository holds the 老树 product front-end: a shelf of books (`/`), each with
+its own biography (`/book/:id`) and one cultivated chapter to actually read
+(`/book/:id/read`), plus a reader's personal archive (`/my-tree`).
+
+Two books are live:
+
+- **道德經** — ported from the design handoff, at `/book/daodejing`.
+- **金剛經** — the 佛家 (Buddhist) book added alongside it: Kumārajīva's 402
+  translation, the Sixth Patriarch's awakening at "应无所住而生其心", the 868
+  Dunhuang scroll (the earliest dated complete printed book known to survive),
+  and Kerouac copying its closing gāthā into his notebooks. At
+  `/book/diamondSutra`, reading chapter 第三十二分 · 应化非真分.
+
+`论语`, `庄子`, `Meditations`, and `源氏物語` sit on the shelf as honest "待种下"
+ghosts — not yet cultivated, per the product's own rule that emptiness should
+read as room to grow, not a bug to hide.
 
 ## 我的树 (My Tree)
 
@@ -44,13 +57,21 @@ npm run preview  # serve the production build
 | --- | --- |
 | `src/MyTree.tsx` | The 我的树 page component + its branch/annotation data |
 | `src/MyTree.css` | Page layout, the SVG tree, hover reveal, growth rings |
+| `src/books/types.ts` | Shared `Book` shape: shelf card, biography timeline, one cultivated reading chapter |
+| `src/books/daodejing.ts`, `src/books/diamondSutra.ts` | The two live books' full content |
+| `src/books/registry.ts` | `books` + `comingSoon` (the shelf's "待种下" ghosts) |
+| `src/pages/Bookshelf.tsx` | `/` — 千年书架, books on a shared historical axis |
+| `src/pages/BookDetail.tsx` | `/book/:id` — 书籍详情页, a book's biography timeline |
+| `src/pages/Reading.tsx` | `/book/:id/read` — 阅读页, the time slider + sentence-strata drawer |
+| `src/components/Header.tsx`, `src/hooks/useNightMode.ts` | Shared brand/nav bar and 夜读/昼读 toggle |
 | `src/theme.css` | Design tokens (墨字朱批 palette), day/night themes, keyframes |
-| `APP_NOTES.md` | Detailed notes on this page |
-| `design/` | The original Claude Design handoff bundle — chat transcript + all page prototypes. The source of truth for the pages not yet built. |
+| `APP_NOTES.md` | Detailed notes on 我的树 specifically |
+| `design/` | The original Claude Design handoff bundle — chat transcript + all page prototypes. |
 
 ## Not yet built
 
-`design/project/` holds prototypes for the rest of the product: 首页书架, 书籍详情页,
-阅读页 (the design's stated priority — its "signature" screen with the time-slider),
-落笔流程, 句子房间, 考据, 分享卡, 守树人. `我的树` links out to `/read` and `/inscribe`
-as placeholders for those routes.
+`design/project/` also holds prototypes for 落笔流程 (writing an annotation),
+考据, 分享卡, and 守树人 (the AI companion). Their entry points in the built
+pages (抄录本章, 在此落笔, 与守树人细究此节, 留下名字…) are present as honest,
+inert stubs — clicking them reveals the "读是自由的,落笔需要一个名字" prompt
+rather than a fake flow.

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.12",

src/MyTree.css

@@ -56,26 +56,6 @@ body[data-night='1']::before {
   color: var(--ink-light);
 }
 
-/* Quiet links that warm to full ink on hover. */
-.link-muted {
-  color: var(--ink-light);
-  text-decoration: none;
-  cursor: pointer;
-  transition: color 0.3s ease;
-}
-.link-muted:hover {
-  color: var(--ink);
-}
-
-.link-cinnabar {
-  color: var(--cinnabar);
-  text-decoration: none;
-  transition: color 0.3s ease;
-}
-.link-cinnabar:hover {
-  color: var(--seal);
-}
-
 .stage {
   max-width: 640px;
   margin: 0 auto;

src/MyTree.tsx

@@ -178,7 +178,7 @@ export default function MyTree() {
           <span className="brand-name">老树</span>
         </a>
         <nav className="nav">
-          <a className="link-muted" href="/read">
+          <a className="link-muted" href="/book/daodejing/read">
             回到阅读
           </a>
           <span
@@ -302,7 +302,7 @@ export default function MyTree() {
           <div className="echo-quote">辞掉第二份工作的那晚我写:知道停在哪里,比知道去哪里难。</div>
           <div className="echo-ask">现在的你,还这么读吗?</div>
           <div className="echo-actions">
-            <a className="link-cinnabar" href="/read">
+            <a className="link-cinnabar" href="/book/daodejing/read">
               回去看看 →
             </a>
             <a className="link-muted" href="/inscribe">