Add 心经 as a second planted book, with a real bookshelf

APP_NOTES.md

@@ -1,16 +1,25 @@
-# 老树 · 我的树
+# 老树 · 我的树 & 首页书架
 
-The **我的树** (My Tree) personal-archive page from the 老树 design commission,
-implemented as a real React + Vite + TypeScript app.
+The **我的树** (My Tree) personal-archive page and the **首页书架** (Bookshelf)
+timeline page from the 老树 design commission, implemented as a real React +
+Vite + TypeScript app.
 
-It's a port of the Claude Design prototype at `design/project/老树 · 我的树.dc.html`,
-recreated pixel-for-pixel outside the proprietary `dc-runtime` format.
+我的树 is a port of the Claude Design prototype at
+`design/project/老树 · 我的树.dc.html`, recreated pixel-for-pixel outside the
+proprietary `dc-runtime` format. 首页书架 is a port of
+`design/project/老树 · 首页书架.dc.html`. 我的树 was originally hardcoded to a
+single book (道德经); it's now generic over a `Book` (see `src/books/`), driven
+by the `/tree/:bookId` route, so the shelf can link into any planted book's
+tree. A second book, **《心经》** (the Buddhist Heart Sutra), was added this way
+end to end: shelf entry, five annotated branches, and its own 周年回声.
 
 ## What the page is
 
 Each reader grows an abstract tree:
 
-- **枝 (branches)** — chapters read, labelled with their number (十一, 八, 四十四…).
+- **枝 (branches)** — chapters/passages read, labelled either by chapter number
+  (道德经: 十一, 八, 四十四…) or a two-character theme tag for a book with no
+  chapters (心经: 色空, 五蕴, 空相…).
 - **叶 (leaves)** — annotations left. A **朱砂 (cinnabar)** leaf is 入木 — enshrined,
   set alongside the ancients. A **青绿 (verdigris)** leaf is 青芽 — a sprout still
   awaiting time and peers.
@@ -35,8 +44,18 @@ Design notes, all inside the 禁则 (no counts, no gradients, no glow, cinnabar
 
 - Quantity is shown by **form** (branches, leaves, rings), never a number badge.
 - **Cinnabar** marks the human hand: signatures, the active/hovered branch, genre badges.
-- The 四十四 sprout's annotation is the same one echoed in **周年回声** below — the tree and
-  the memory are one story.
+- The tree's one 青芽 sprout's annotation is the same one echoed in **周年回声** below — the
+  tree and the memory are one story. (道德经: 第四十四章; 心经: 「诸法空相」句.)
+
+## 首页书架 (Bookshelf)
+
+`/` lays every book on a horizontal timeline positioned by the age of its text
+(`MIN=-600` to `MAX=2026`), not a grid — a book from 400 BCE sits far from one
+from 1980. Planked spines grow up from the timeline on load (`growUp`); a live
+book is an `<a>` into `/tree/:bookId`, a not-yet-planted one is an inert span
+with lowered opacity. Hovering any plank raises a caption card with its teaser
+line and a "已生长约 N 年 · M 层年轮" meta line, matching the same 无计数原则 as
+我的树 — these are decorative age/rings, not user-facing counts of anything.
 
 ## Run
 
@@ -51,9 +70,15 @@ npm run preview  # serve the production build
 
 | File | Purpose |
 | --- | --- |
-| `src/MyTree.tsx` | The page component and its branch data |
-| `src/MyTree.css` | Page layout + hover affordances |
+| `src/main.tsx` | Router: `/` → Bookshelf, `/tree/:bookId` → MyTree |
+| `src/Bookshelf.tsx` / `.css` | The 首页书架 timeline page |
+| `src/MyTree.tsx` / `.css` | The 我的树 page, generic over a `Book` |
+| `src/books/types.ts` | `Book` / `Branch` / `ShelfEntry` data model |
+| `src/books/daodejing.ts`, `src/books/xinjing.ts` | Per-book data |
+| `src/books/index.ts` | `BOOKS`, `PLACEHOLDER_BOOKS`, `getBook()` |
 | `src/theme.css` | Design tokens (墨字朱批 palette), day/night themes, keyframes |
 
-Sibling links (回到阅读, 回去看看, 接续一年前的自己) point at routes for pages that
-are elsewhere in the commission and not built in this project.
+Sibling links (回到阅读, 回去看看, 接续一年前的自己, 考据) point at routes for pages
+that are elsewhere in the commission and not built in this project. Visiting
+`/tree/:bookId` for a placeholder (not-yet-planted) book id shows a small
+"这本书还没有种下" state with a link back to the shelf, instead of a blank tree.

README.md

@@ -4,10 +4,23 @@
 
 不是读书 App,不是笔记工具,不是 AI 聊天产品 —— 更接近一座**可以走进去的、还在生长的碑林**。
 
-This repository holds the 老树 product front-end. The first page implemented is
+This repository holds the 老树 product front-end. The pages implemented so far are
+**首页书架 (Bookshelf)** — a timeline of every planted book — and, per book,
 **我的树 (My Tree)** — a reader's personal archive, rendered as an abstract, slowly
 growing tree.
 
+## 首页书架 (Bookshelf)
+
+The home page (`/`) lays every book on a timeline by the age of its text, not a
+grid. Two books are planted (live) and walkable:
+
+- **《道德经》** (Taoism, ~5th century BCE)
+- **《心经》** (Buddhism, the Heart Sutra, Xuanzang's 7th-century translation)
+
+论语 and 庄子 sit on the same timeline as **即将种下** (soon to be planted)
+placeholders — ghosts of a growing library, not yet clickable. Hovering any plank
+shows a teaser card; clicking a live one walks into that book's 我的树.
+
 ## 我的树 (My Tree)
 
 Each reader grows a tree:
@@ -42,15 +55,29 @@ npm run preview  # serve the production build
 
 | Path | What |
 | --- | --- |
-| `src/MyTree.tsx` | The 我的树 page component + its branch/annotation data |
+| `src/Bookshelf.tsx` | The 首页书架 (`/`) timeline page |
+| `src/Bookshelf.css` | Its layout, timeline ticks, plank hover cards |
+| `src/MyTree.tsx` | The 我的树 (`/tree/:bookId`) page — generic, driven by a `Book` |
 | `src/MyTree.css` | Page layout, the SVG tree, hover reveal, growth rings |
+| `src/books/types.ts` | Shared `Book` / `Branch` / `ShelfEntry` data model |
+| `src/books/daodejing.ts` | 《道德经》's branches, annotations, shelf entry |
+| `src/books/xinjing.ts` | 《心经》's branches, annotations, shelf entry |
+| `src/books/index.ts` | Book registry (`BOOKS`, `PLACEHOLDER_BOOKS`, `getBook`) |
 | `src/theme.css` | Design tokens (墨字朱批 palette), day/night themes, keyframes |
-| `APP_NOTES.md` | Detailed notes on this page |
+| `APP_NOTES.md` | Detailed notes on these pages |
 | `design/` | The original Claude Design handoff bundle — chat transcript + all page prototypes. The source of truth for the pages not yet built. |
 
+## Adding a book
+
+A book is just an entry in `src/books/`: a `Book` (title, reader, planted date,
+branches with their annotations, the anniversary echo, and a shelf entry for the
+timeline) registered in `src/books/index.ts`. A book without a real tree yet can
+be added to `PLACEHOLDER_BOOKS` instead — it shows on the shelf as **即将种下**
+and isn't clickable until it has real branch data.
+
 ## Not yet built
 
-`design/project/` holds prototypes for the rest of the product: 首页书架, 书籍详情页,
+`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.

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",