hd-garden 0.10.3 → 0.11.0

package/.agents/skills/garden-ui/SKILL.md

@@ -2,8 +2,8 @@
 name: garden-ui
 description: >-
   Compiles the `garden` idea blocks in one Garden post into garden components
-  (garden interactive, or card / stat / compare / ... , or prose, or garden
-  html), fixes broken garden interactive blocks, and suggests where a post could
+  (garden compose, or card / stat / compare / ... , or prose, or garden
+  html), fixes broken garden compose blocks, and suggests where a post could
   use interaction. Older intent / ui blocks are handled the same way. Use when
   the user says 编译这篇 / 编译想法 / 重编译 <id> / 这篇哪里适合交互, or pastes a
   garden ui check fix prompt.
@@ -11,7 +11,7 @@ description: >-
 
 # 编译 Garden 交互块
 
-作者在稿里用不带名字的 `garden` 围栏写一句想法，这个 skill 把它变成 `garden interactive` 或别的 `garden` 组件。交互组件和设计规则在 `npx garden ui prompt` 的输出里，12 个 `garden` 组件的用途和示例在 `node_modules/hd-garden/templates/garden-blocks.md`（在引擎仓库里是 `templates/garden-blocks.md`），以这两份为准，不凭记忆写组件。
+作者在稿里用不带名字的 `garden` 围栏写一句想法，这个 skill 把它变成 `garden compose`、`garden compose` 或别的 `garden` 组件。`garden compose` 若还是白话，就在同一围栏里填 YAML 树，不要改围栏类型。交互组件和设计规则在 `npx garden ui prompt` 的输出里，各 `garden` 组件的用途和示例在 `node_modules/hd-garden/templates/garden-blocks.md`（在引擎仓库里是 `templates/garden-blocks.md`），以这两份为准，不凭记忆写组件。
 
 作者提交时，提交前钩子跑的是同一个 `npx garden ui check`。你用来找块、写回、自查的命令，和拦住作者提交的命令是同一套。
 
@@ -34,7 +34,7 @@ description: >-
    npx garden ui scan content/posts/路径.md
    ```
 
-   stdout 是 JSON。`lang` 是 `garden-idea`（想法）、`garden-interactive`，或旧写法的 `intent` / `ui`。每块有 `lang`、`id`、`status`、`startLine`、`hash`（整段围栏的哈希，写回时当 `--base`）、`intentHash`（原话的哈希）、`intent`（原话）、`caption`、`section`（所在小节标题）和 `diagnostics`。不要自己用正则找围栏。
+   stdout 是 JSON。`lang` 是 `garden-idea`（想法）、`garden-compose`、`garden-interactive`，或旧写法的 `intent` / `ui`。每块有 `lang`、`id`、`status`、`startLine`、`hash`（整段围栏的哈希，写回时当 `--base`）、`intentHash`（原话的哈希）、`intent`（原话）、`caption`、`section`（所在小节标题）和 `diagnostics`。不要自己用正则找围栏。
 
 2. 读规则：
 
@@ -46,13 +46,14 @@ description: >-
 
 3. 每块读原话和所在小节，三选一：
    - **写回正文**：一句话、一张表或一张 Mermaid 就能说清时。
-   - **写 `garden interactive`**：读者需要拖、点、翻才能看懂时。
+   - **写 `garden compose`**：读者需要拖、点、翻才能看懂时。
    - **写一段 `diff`**：想法紧跟在一段完整代码后面，说的是「和上一版比改了什么」时。按原话写出 diff，用一段普通 Markdown 写回（只有这一个 `diff` 围栏）。写回后它紧挨着那段代码，页面会合成「代码 / 对比上一版」切换；diff 里的新行要和上面的完整代码一致。
-   - **写别的 `garden` 组件**：一张或多张资源卡（`card` / `cards`）、几个指标（`stat`）、两种做法并排或好坏对照（`compare` / `verdict: good|bad`）、一条时间线（`timeline`）、一张静态图表（`chart`）、一张分区结构图（`figure`）、一份下载文件（`file`）、3～6 个要素的关系图（`relations`）、紧凑图标列表或分步列表（`list`）、两三个选项的选择卡（`choice`）。字段与校验约束见 `npx garden ui prompt` 与 `templates/garden-blocks.md`。
+   - **写别的 `garden` 组件**：一张或多张资源卡（`card` / `cards`）、几个指标（`stat`）、两种做法并排或好坏对照（`compare` / `verdict: good|bad`）、一条时间线（`timeline`）、一张静态图表（`chart`）、一张说明图（`compose`）、一份下载文件（`file`）、3～6 个要素的关系图（`relations`）、紧凑图标列表或分步列表（`list`）、两三个选项的选择卡（`choice`）。字段与校验约束见 `npx garden ui prompt` 与 `templates/garden-blocks.md`。
+   - **编译 `garden compose`**：`lang` 是 `garden-compose` 且 `status` 是 `uncompiled` 时，围栏头保持 `garden compose`。把扫描到的原话原样放进 `intent`，正文写成 YAML 树（`steps` + `notes`，或 `tree`）。不要改成 interactive，不要写 HTML、SVG 或脚本。配方在 `npx garden ui prompt` 的说明图一节。
    - **写 `garden html`**：目录表达不了的画布动画、音频、物理模拟等。按 [garden-interactive-chart](../garden-interactive-chart/SKILL.md) 在同名目录写 HTML，用 `title` 写下判断。
 
-4. 写 `garden interactive` 时：
-   - 格式：围栏头写 `garden interactive #<id>`；`---` 上面是 `caption`、`intent`、可选的 `expect`；`---` 下面是 `npx garden ui prompt` 里的组件树。
+4. 写 `garden compose` 时：
+   - 格式：围栏头写 `garden compose #<id>`；`---` 上面是 `caption`、`intent`、可选的 `expect`；`---` 下面是 `npx garden ui prompt` 里的组件树。
    - 原话原样放进 `intent`，一个字都不改。
    - `caption` 摘原话里的判断。原话没有判断句，就根据小节内容补一句，并在回复里说明。
    - 原话里有已知点（"batch 1 时是 512 MiB"），写进 `expect`。
@@ -63,7 +64,7 @@ description: >-
 
    ````bash
    npx garden ui apply content/posts/路径.md --id <id> --base <hash> <<'GARDEN_UI'
-   ```garden interactive #id
+   ```garden compose #id
    caption: ...
    intent: |
      ...
@@ -95,7 +96,7 @@ description: >-
 
    | id | 选择 | 配方 | 假设 | expect |
    | --- | --- | --- | --- | --- |
-   | kv-memory | garden interactive | 参数台 | 默认序列取 4K | batch 1 时 512 MiB |
+   | kv-memory | garden compose | 参数台 | 默认序列取 4K | batch 1 时 512 MiB |
 
    "假设"写原话没说、你替作者定下的东西（默认值、范围、补的 caption）。没有就写"无"。
 

package/README.en.md

@@ -17,9 +17,46 @@ npm install
 make dev
 ```
 
-The published npm package is `hd-garden`; once installed inside a site, you can run `npx garden` (do not run `npx garden init` directly, as `garden` on npm is an unrelated package). Running `make dev` for the first time creates `.env.local`, installs the three AI skills under `.agents/skills/`, installs the pre-commit check in `.git/hooks/pre-commit`, and starts the dev server at `http://localhost:3000` (with the built-in handbook at `http://localhost:3000/garden/en`).
+The published npm package is `hd-garden`; once installed inside a site, you can run `npx garden` (do not run `npx garden init` directly, as `garden` on npm is an unrelated package). `init` copies the VS Code / Cursor and Typora Intelligent UI plugins into the site and, in an interactive terminal, asks whether to install each one (see the next section). Running `make dev` for the first time creates `.env.local`, installs the three AI skills under `.agents/skills/`, installs the pre-commit check in `.git/hooks/pre-commit`, and starts the dev server at `http://localhost:3000` (with the built-in handbook at `http://localhost:3000/garden/en`).
 
-## 2. Describe components in plain language (humans and Agents share the same CLI)
+## 2. Write interactives in VS Code, Cursor, and Typora
+
+The Intelligent UI plugins ship inside `hd-garden`. You do not compile them in the site. They insert a one-sentence idea, preview the rendered component in the editor, open the component catalog, and hand the post to the `garden-ui` skill to compile.
+
+`npx hd-garden init` copies the files to `.garden/editors/` (a `.vsix` for VS Code / Cursor, and the Typora plugin). In an interactive terminal it asks about VS Code / Cursor first, then Typora. The first `npx garden sync` (`make dev` syncs first) asks again if that prompt has not happened yet. `y` installs; pressing Enter skips.
+
+With no TTY (a pipe or a CI log), with `CI=1`, or with `GARDEN_SKIP_EDITORS=1`, the command does not wait for input. It prints the install command below. You can run it later, and running it again is safe:
+
+```bash
+npx garden editors install                 # Ask again about VS Code and Typora
+npx garden editors install --yes           # Install both, without asking
+npx garden editors install --vscode        # VS Code / Cursor only
+npx garden editors install --typora        # Typora only
+```
+
+### VS Code / Cursor
+
+- **Insert an idea**: `Cmd+Alt+I` on macOS, `Ctrl+Alt+I` on Windows and Linux. The Command Palette and the editor context menu have the same Garden command. It inserts a plain `garden` fence: a short brief for the `garden-ui` skill, which compiles it later. In Typora, type `/` and choose `/garden`; the next list gives each component a small preview image.
+- **Preview**: Open the Markdown preview. A `ui` fence renders the same component as the blog. An `intent` fence renders as an idea card. The extension reads sidecar data files next to the post.
+- **Check**: Errors show up in the Problems panel and as squiggles in the source. A CodeLens above each block says whether it is ok, broken, stale, or not compiled yet.
+- **Catalog**: The Garden catalog command inserts a recipe at the cursor when you choose to start from it. The same catalog from the terminal is `npx garden ui catalog` (it writes `.garden/ui-catalog.html`).
+- **Compile**: Copy the compile prompt. On an English site (`locale: en_US`) it is `Compile this post:` plus the path. Paste that to an Agent that has the `garden-ui` skill. The skill runs `npx garden ui scan`, reads `npx garden ui prompt`, and writes the fence back with `npx garden ui apply`. The plugin does not call a model and does not store a key.
+
+When `code` or `cursor` is on `PATH`, `garden editors install` runs `--install-extension`. If both commands exist, it installs into both. Without a CLI, open the Extensions view, choose the `...` menu, then **Install from VSIX**, and select the file under `.garden/editors/vscode/`.
+
+### Typora
+
+Typora has no official plugin API. Install [typora-community-plugin](https://github.com/typora-community-plugin/typora-community-plugin/blob/main/docs/en-us/user-guide/1a-installation.md) first (on macOS it patches `index.html` inside `Typora.app`). `garden editors install` looks in the usual locations. If the framework is missing, it still copies the plugin and prints that prerequisite.
+
+The plugin is copied to `~/.typora/community-plugins/plugins/hedon954.garden-intelligent-ui/`. On macOS it is also copied to `~/Library/Application Support/abnerworks.Typora/plugins/plugins/hedon954.garden-intelligent-ui/`, which is the directory the Installed Plugins list reads. Open Typora and enable Garden Intelligent UI under Settings, Installed plugins.
+
+Use it the same way as VS Code: leaving a fence previews `ui` / `intent` (as with Mermaid, click into the fence to edit the source; clicks on sliders and buttons stay in the preview). Type `/`, choose `/garden`, or use the insert command (`Ctrl+Alt+I` on Windows and Linux; on macOS, Option rewrites the key, so record a shortcut under Settings, Keyboard Shortcuts). Copy compile prompt hands the post to the `garden-ui` skill.
+
+A Typora upgrade overwrites the community framework inside the app. Reinstall typora-community-plugin, then enable this plugin again. The fences stay in the Markdown, and `make dev` still previews them.
+
+The Obsidian plugin is not installed by this command.
+
+## 3. Describe components in plain language (humans and Agents share the same CLI)
 
 Where you want a component or interactive calculation, write an unnamed `garden` fence describing what the reader should adjust and see:
 
@@ -29,9 +66,9 @@ Where you want a component or interactive calculation, write an unnamed `garden`
 ```
 ````
 
-Ask your Agent to compile the post using the bundled `garden-ui` skill: it runs `npx garden ui scan` to locate uncompiled or broken blocks, reads the component catalog from `npx garden ui prompt`, generates a `garden interactive` block (or `card`, `stat`, `compare`, `timeline`, `chart`, `figure`, `html`, `file`, `relations`, `list`, `choice`, or a `diff` block right below a code snippet), and writes only that fence back via `npx garden ui apply`. If you run `git commit` before compiling, the pre-commit hook runs `npx --no-install garden ui check --staged --quiet`, stops the commit, and prints a ready-to-paste fix prompt for your AI.
+Ask your Agent to compile the post using the bundled `garden-ui` skill: it runs `npx garden ui scan` to locate uncompiled or broken blocks, reads the component catalog from `npx garden ui prompt`, generates a `garden compose` block (or `card`, `stat`, `compare`, `timeline`, `chart`, `figure`, `html`, `file`, `relations`, `list`, `choice`, or a `diff` block right below a code snippet), and writes only that fence back via `npx garden ui apply`. If you run `git commit` before compiling, the pre-commit hook runs `npx --no-install garden ui check --staged --quiet`, stops the commit, and prints a ready-to-paste fix prompt for your AI.
 
-## 3. Common commands
+## 4. Common commands
 
 ```bash
 make new SLUG=writing-pace TITLE="Writing Pace" # Create a draft post in content/posts/
@@ -42,9 +79,10 @@ make update MESSAGE="Add writing-pace post"     # Check, commit, and push to ori
 npx garden check content/posts/writing-pace.md  # Validate front matter, components, and assets
 npx garden ui check --staged                    # Check staged posts for uncompiled ideas or UI errors
 npx garden ui catalog                           # Generate an offline component gallery at .garden/ui-catalog.html
+npx garden editors install --yes                # Install the Intelligent UI plugins into VS Code / Cursor and Typora
 ```
 
-## 4. Excalidraw
+## 5. Excalidraw
 
 Point a Markdown image at the `.excalidraw` source. `garden build` exports one light flat SVG beside that file, with a transparent background, and embeds that SVG in the article so its text can be selected. No separate export command.
 
@@ -54,7 +92,7 @@ Point a Markdown image at the `.excalidraw` source. `garden build` exports one l
 
 The first page that references `.excalidraw` downloads the exporter (Chromium is not required; fonts are embedded in the SVG). See [Local Image](docs/handbook/en/components/image.md).
 
-## 5. Handbook and reference docs
+## 6. Handbook and reference docs
 
 Start `make dev` and open `/garden/en` (Chinese at `/garden`), or read the markdown sources directly:
 

package/README.md

@@ -17,11 +17,48 @@ npm install
 make dev
 ```
 
-公开包名是 `hd-garden`，装进站点后可使用 `npx garden`（不要直接运行未安装的 `npx garden init`，npm 上的 `garden` 是另一个包）。首次运行 `make dev` 会生成 `.env.local`、补齐 `.agents/skills/` 下的三个 AI skill，并在 `.git/hooks/pre-commit` 安装提交前检查，默认预览地址是 `http://localhost:3000`（使用说明在 `http://localhost:3000/garden`）。
+公开包名是 `hd-garden`，装进站点后可使用 `npx garden`（不要直接运行未安装的 `npx garden init`，npm 上的 `garden` 是另一个包）。`init` 会把 VS Code / Cursor 与 Typora 的 Intelligent UI 插件放进站点，并在交互终端里分别询问要不要装上（见下一节）。首次运行 `make dev` 会生成 `.env.local`、补齐 `.agents/skills/` 下的三个 AI skill，并在 `.git/hooks/pre-commit` 安装提交前检查，默认预览地址是 `http://localhost:3000`（使用说明在 `http://localhost:3000/garden`）。
 
 如果在本地使用了 npm 镜像，请把 `registry` 留在 `~/.npmrc`，不要让镜像域名写进 `package-lock.json`（提交前可运行 `node node_modules/hd-garden/scripts/check-lockfile-registry.mjs` 检查）。
 
-## 2. 用一句话写组件（人和 Agent 用同一套工具）
+## 2. 在 VS Code、Cursor 和 Typora 里写交互
+
+Intelligent UI 插件随 `hd-garden` 一起发布，不用在站点里编译源码。它做四件事：插入一句想法、在编辑器里预览画好的组件、打开组件清单，以及把「编译这篇」交给 `garden-ui` skill。
+
+`npx hd-garden init` 把产物复制到站点的 `.garden/editors/`（VS Code 的 `.vsix`，以及 Typora 插件目录）。终端可交互时，会先问要不要装进 VS Code / Cursor，再问要不要装进 Typora。第一次 `npx garden sync`（`make dev` 会先同步）如果还没问过，会再问一次。回答 `y` 才会安装；直接回车是不装。
+
+没有 TTY（管道或 CI 日志）、`CI=1`，或设置了 `GARDEN_SKIP_EDITORS=1` 时，命令不会停下来等输入，只打印下面这条安装命令。之后随时可以装，重复执行也安全：
+
+```bash
+npx garden editors install                 # 再问一次 VS Code 和 Typora
+npx garden editors install --yes           # 两个都装，不再询问
+npx garden editors install --vscode        # 只装 VS Code / Cursor
+npx garden editors install --typora        # 只装 Typora
+```
+
+### VS Code / Cursor
+
+- **插入想法**：macOS 用 `Cmd+Alt+I`，Windows / Linux 用 `Ctrl+Alt+I`，或命令「插入 Garden 块」。插入的是不带组件名的 `garden` 围栏，正文用中文告诉你要写什么，交给 `garden-ui` skill 编译。Typora 里先输入 `/` 选 `/garden`，再从带小预览图的列表里选组件。
+- **预览**：打开 Markdown 预览。`ui` 围栏画成和博客一样的组件，`intent` 围栏显示成想法卡片。同名目录里的数据文件由扩展读取。
+- **检查**：错误进「问题」面板，并在源码上画波浪线。每个块上方的 CodeLens 标出正常、有错、过期或未编译。
+- **组件清单**：命令「查看组件清单」。点「用它开始」把配方插进当前稿件。终端里的同一份清单是 `npx garden ui catalog`（生成 `.garden/ui-catalog.html`）。
+- **编译**：命令「复制编译提示词」。中文站点复制 `编译这篇：<相对路径>`，英文站点（`locale: en_US`）复制 `Compile this post: <相对路径>`。把这句话发给装了 `garden-ui` skill 的 Agent，由它 `npx garden ui scan`、读 `npx garden ui prompt`、再 `npx garden ui apply`。插件不调用模型，也不保存密钥。
+
+本机有 `code` 或 `cursor` 命令时，`garden editors install` 会执行 `--install-extension`。两个命令都在时，会各装一次。没有命令行时，打开扩展视图，点右上角「…」，选 **Install from VSIX**（从 VSIX 安装），文件在 `.garden/editors/vscode/`。
+
+### Typora
+
+Typora 没有官方插件接口。先按 [typora-community-plugin 的安装说明](https://github.com/typora-community-plugin/typora-community-plugin/blob/main/docs/en-us/user-guide/1a-installation.md) 装上社区框架（macOS 上它会修改 `Typora.app` 里的 `index.html`）。`garden editors install` 会检查常见安装位置；没找到时仍会复制插件，并打印这个前提。
+
+插件文件复制到 `~/.typora/community-plugins/plugins/hedon954.garden-intelligent-ui/`。macOS 同时写到 `~/Library/Application Support/abnerworks.Typora/plugins/plugins/hedon954.garden-intelligent-ui/`。打开 Typora，在「设置 → 已安装插件」里勾选 Garden Intelligent UI。
+
+用法和 VS Code 同一套：光标离开围栏时预览 `ui` / `intent`（和 Mermaid 一样，点进围栏编辑源码；点滑杆或按钮不会跳进源码）；先输入 `/` 再选 `/garden`，或用命令「插入 Garden 块」，都会插入想法围栏（Windows / Linux 默认 `Ctrl+Alt+I`，macOS 的 Option 会改写按键，请到「设置 → 快捷键」里自己录）；「Garden：复制编译提示词」交给 `garden-ui` skill。
+
+升级 Typora 会覆盖社区框架改过的程序文件，插件跟着失效。需要重新安装 typora-community-plugin，再勾选本插件。稿件里的围栏原文还在，也可以用 `make dev` 预览。
+
+Obsidian 插件这一轮不随包安装。
+
+## 3. 用一句话写组件（人和 Agent 用同一套工具）
 
 在正文想放组件的位置写一个不带名字的 `garden` 围栏，只描述想让读者做什么、看到什么：
 
@@ -31,9 +68,9 @@ make dev
 ```
 ````
 
-让 Agent 按站点里的 `garden-ui` skill 处理这篇稿件：Agent 先用 `npx garden ui scan` 读取待编译块的哈希，再读 `npx garden ui prompt` 的组件规则，生成 `garden interactive`（或 `card`、`stat`、`compare`、`timeline`、`chart`、`figure`、`html`、`file`、`relations`、`list`、`choice` 等内置组件，或在完整代码下方生成 `diff`），最后用 `npx garden ui apply` 只替换该围栏。如果你在编译前直接 `git commit`，pre-commit 钩子会运行同一条 `npx --no-install garden ui check --staged --quiet` 拦下提交，并打印一段可直接粘贴给 AI 的修复提示词。
+让 Agent 按站点里的 `garden-ui` skill 处理这篇稿件：Agent 先用 `npx garden ui scan` 读取待编译块的哈希，再读 `npx garden ui prompt` 的组件规则，生成 `garden compose`（或 `card`、`stat`、`compare`、`timeline`、`chart`、`compose`、`html`、`file`、`relations`、`list`、`choice` 等内置组件，或在完整代码下方生成 `diff`），最后用 `npx garden ui apply` 只替换该围栏。如果你在编译前直接 `git commit`，pre-commit 钩子会运行同一条 `npx --no-install garden ui check --staged --quiet` 拦下提交，并打印一段可直接粘贴给 AI 的修复提示词。
 
-## 3. 常用命令
+## 4. 常用命令
 
 ```bash
 make new SLUG=writing-pace TITLE="慢慢写"      # 在 content/posts/ 下创建文章草稿
@@ -44,9 +81,10 @@ make update MESSAGE="新增一篇文章"             # 检查通过后提交并
 npx garden check content/posts/writing-pace.md # 单独检查一篇文章的标题、组件与资源路径
 npx garden ui check --staged                   # 检查暂存区稿件中的想法块与交互组件
 npx garden ui catalog                          # 在 .garden/ui-catalog.html 生成离线组件清单
+npx garden editors install --yes               # 把 Intelligent UI 插件装进 VS Code / Cursor 与 Typora
 ```
 
-## 4. Excalidraw
+## 5. Excalidraw
 
 正文用 Markdown 图片指向 `.excalidraw` 源文件。`garden build` 会在同目录导出一张浅色扁平 SVG，画布背景透明，并把这张 SVG 嵌进正文，图里的文字可以选中。不需要单独的导出命令。
 
@@ -56,11 +94,11 @@ npx garden ui catalog                          # 在 .garden/ui-catalog.html 生
 
 页面里第一次出现 `.excalidraw` 时，构建会下载导出程序（不需要 Chromium；字体写进 SVG）。说明见[本地图片](docs/handbook/components/image.md)。
 
-## 5. 使用说明与深入文档
+## 6. 使用说明与深入文档
 
 本地运行 `make dev` 后访问 `/garden`（英文版在 `/garden/en`），或直接阅读仓库内的文档：
 
-- **[Garden 使用说明（中文）](docs/handbook/index.md)** · **[Garden Handbook (English)](docs/handbook/en/index.md)**：快速开始、[用 AI 写作](docs/handbook/ai-writing.md)、[站点与专栏配置](docs/handbook/config.md)、[发布到 GitHub Pages](docs/handbook/deploy.md)、[写文章与随想](docs/handbook/writing.md)、[阅读排版](docs/handbook/design.md)、[组件](docs/handbook/components.md)（12 个 `garden` 围栏，以及链接卡片、来源胶囊和本地图片）与 [语法检查](docs/handbook/workflow.md)。
+- **[Garden 使用说明（中文）](docs/handbook/index.md)** · **[Garden Handbook (English)](docs/handbook/en/index.md)**：快速开始、[用 AI 写作](docs/handbook/ai-writing.md)、[站点与专栏配置](docs/handbook/config.md)、[发布到 GitHub Pages](docs/handbook/deploy.md)、[写文章与随想](docs/handbook/writing.md)、[阅读排版](docs/handbook/design.md)、[组件](docs/handbook/components.md)（`garden` 围栏，以及链接卡片、来源胶囊和本地图片；说明图是 compose）与 [语法检查](docs/handbook/workflow.md)。
 - **[从零开始](docs/quick-start.md)** 与 **[GitHub Pages 部署](docs/github-pages.md)**：单公开仓库或「私有源码仓库 + 公开页面仓库」的 Actions 配置与 Giscus 评论接入。
 - **[独立管理后台](docs/admin-service.md)**：可选的 `/admin` 服务（本地、Docker 或 Cloudflare Workers），支持网页发随想、阿里云 OSS 媒体直传与 `/admin/ui` 组件工作台。
 

package/app/components/garden/GardenBlock.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useUiLang } from "../UiLang";
+import { renderCompose } from "../../../ui/compose/render.mjs";
 import { readGardenPayload } from "../../lib/remark-garden.mjs";
 import {
   GardenCard,
   GardenChart,
   GardenCompare,
-  GardenFigure,
   GardenHtml,
   GardenIdea,
   GardenInteractive,
@@ -37,12 +37,28 @@ export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
       return <GardenTimeline props={props} />;
     case "chart":
       return <GardenChart props={props} />;
-    case "figure":
-      return <GardenFigure props={props}>{String(block.children ?? "")}</GardenFigure>;
+    case "compose":
+      if (block.error?.code === "compose-uncompiled") return <GardenIdea text={String(block.idea || block.children || "")} />;
+      if (block.error) return <GardenUnknown name="compose" />;
+      if (block.mode === "play") {
+        // DIL play: prefer lowered uiSource from ui/compose/dil.mjs. children alone is TEMP legacy.
+        return (
+          <GardenInteractive
+            block={{
+              id: block.id,
+              props,
+              children: String(block.children ?? ""),
+              uiSource: typeof block.uiSource === "string" ? block.uiSource : undefined,
+            }}
+          />
+        );
+      }
+      return <div className="g-compose-host" dangerouslySetInnerHTML={{ __html: renderCompose(props) }} />;
     case "html":
       return <GardenHtml props={props}>{String(block.children ?? "")}</GardenHtml>;
     case "interactive":
-      return <GardenInteractive block={{ id: block.id, props, children: block.children }} />;
+      // TEMP compat if a payload still names interactive; parse now rewrites to compose.
+      return <GardenInteractive block={{ id: block.id, props, children: String(block.children ?? "") }} />;
     case "file":
       // Post bodies render file cards on the server (MarkdownArticle); this path has no Markdown preview.
       return <GardenFile props={props} lang={lang} />;

package/app/components/garden/blocks.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useId, useRef, useState, type ReactNode } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
 import { useUi, useUiLang } from "../UiLang";
 import { langOf, ui } from "../../lib/i18n";
@@ -265,120 +265,6 @@ export function GardenChart({ props }: { props: Record<string, unknown> }) {
   );
 }
 
-type Part = { id: string; label: string; text: string };
-
-function partsOf(props: Record<string, unknown>, partLabel: (n: number) => string): Part[] {
-  if (!Array.isArray(props.parts)) return [];
-  return props.parts.map((part, index) => {
-    const item = part as Record<string, unknown>;
-    const label = String(item.label ?? item.name ?? partLabel(index + 1));
-    return { id: String(item.id ?? item.name ?? label), label, text: String(item.text ?? "") };
-  });
-}
-
-function partOn(selected: string, token: string) {
-  if (selected === "all" || selected === "全部") return true;
-  const parts = token.trim().split(/\s+/u).filter(Boolean);
-  const has = (id: string) => parts.includes(id);
-  const starts = (prefix: string) => parts.some((part) => part === prefix || part.startsWith(prefix));
-  if (has(selected)) return true;
-  if (selected === "q") return has("attn");
-  if (selected === "k") return starts("k") || has("attn");
-  if (selected === "v") return starts("v") || has("out");
-  if (selected === "cache") return has("cache") || has("kn") || has("vn") || starts("k") || starts("v");
-  if (selected === "out") return has("out");
-  return false;
-}
-
-export function GardenFigure({ props, children }: { props: Record<string, unknown>; children?: string }) {
-  const t = useUi();
-  const parts = partsOf(props, t.part);
-  const [selected, setSelected] = useState(parts[0]?.id ?? "all");
-  const svgRef = useRef<HTMLDivElement>(null);
-  const base = useId();
-  const fromChild = typeof children === "string" && children.includes("<svg") ? children : "";
-  const svg = typeof props.svg === "string" && props.svg.includes("<svg") ? props.svg : fromChild;
-
-  useEffect(() => {
-    const root = svgRef.current;
-    const drawing = root?.querySelector("svg");
-    if (!drawing) return;
-    const shapes = [...drawing.querySelectorAll<SVGGraphicsElement>("rect[data-p], ellipse[data-p], circle[data-p]")];
-    drawing.querySelectorAll("text").forEach((text) => {
-      const x = Number(text.getAttribute("x"));
-      const y = Number(text.getAttribute("y"));
-      const shape = shapes.find((item) => {
-        const box = item.getBBox();
-        return x >= box.x && x <= box.x + box.width && y >= box.y && y <= box.y + box.height + 2;
-      });
-      if (!shape) return;
-      if (!text.hasAttribute("data-p")) text.setAttribute("data-p", shape.getAttribute("data-p") || "");
-      try {
-        const room = shape.getBBox().width - 12;
-        const width = text.getComputedTextLength();
-        if (width > room && room > 0) {
-          const size = Number.parseFloat(getComputedStyle(text).fontSize);
-          text.style.fontSize = `${(size * room / width).toFixed(2)}px`;
-        }
-      } catch {
-        /* getBBox can fail before layout */
-      }
-    });
-  }, [svg]);
-
-  useEffect(() => {
-    const root = svgRef.current;
-    if (!root) return;
-    root.querySelectorAll("[data-p]").forEach((element) => {
-      const token = ` ${element.getAttribute("data-p") || ""} `;
-      element.classList.toggle("on", partOn(selected, token));
-    });
-  }, [selected, svg]);
-
-  const body = (
-    <figure className="g-explore" data-g="explore" data-sel={selected} ref={svgRef}>
-      {parts.length ? (
-        <div role="tablist" aria-label={t.pickPart}>
-          {parts.map((part, index) => (
-            <button
-              key={part.id}
-              type="button"
-              role="tab"
-              aria-selected={selected === part.id}
-              tabIndex={selected === part.id ? 0 : -1}
-              data-sel={part.id}
-              onClick={() => setSelected(part.id)}
-              onKeyDown={(event) => {
-                if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
-                event.preventDefault();
-                const next = event.key === "ArrowRight" ? (index + 1) % parts.length : (index - 1 + parts.length) % parts.length;
-                setSelected(parts[next].id);
-              }}
-            >
-              {part.label}
-            </button>
-          ))}
-        </div>
-      ) : null}
-      {svg ? <div className="dx-wrap" dangerouslySetInnerHTML={{ __html: svg }} /> : null}
-      {typeof props.image === "string" ? (
-        <div className="fig-card">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={publicSrc(props.image)} alt={String(props.alt ?? props.caption ?? "")} />
-        </div>
-      ) : null}
-      {typeof props.mermaid === "string" ? <pre className="code"><code>{props.mermaid}</code></pre> : null}
-      <div className="dx-exp" aria-live="polite">
-        {parts.map((part) => (
-          <p key={part.id} id={`${base}-${part.id}`} hidden={selected !== part.id}><Rich text={part.text} /></p>
-        ))}
-      </div>
-      {typeof props.caption === "string" ? <figcaption><Rich text={props.caption} /></figcaption> : null}
-    </figure>
-  );
-  return parts.length || svg ? <FullscreenFrame label={t.diagram}>{body}</FullscreenFrame> : body;
-}
-
 function htmlHasScript(source: string) {
   return /<script\b(?![^>]*\btype\s*=\s*["']application\/json["'])/iu.test(source);
 }
@@ -553,11 +439,13 @@ export function GardenHtml({ props, children }: { props: Record<string, unknown>
   return <FullscreenFrame label={title}><StaticGardenHtml code={code} /></FullscreenFrame>;
 }
 
-export function GardenInteractive({ block }: { block: { id?: string | null; props: Record<string, unknown>; children?: string } }) {
+export function GardenInteractive({ block }: { block: { id?: string | null; props: Record<string, unknown>; children?: string; uiSource?: string } }) {
   const t = useUi();
   const lang = useUiLang();
-  // Same source `garden ui check` validates (ui/core/garden-fence.mjs).
-  const { source, header } = interactiveUiSource({ id: block.id ?? null, props: block.props, children: block.children ?? "" });
+  // Prefer DIL-lowered uiSource from compose/dil.mjs; else build from PascalCase children (TEMP legacy).
+  const built = interactiveUiSource({ id: block.id ?? null, props: block.props, children: block.children ?? "" });
+  const source = typeof block.uiSource === "string" && block.uiSource.trim() ? block.uiSource : built.source;
+  const header = built.header;
   const { payload, check } = compileUiBlock(source);
   if (!payload) {
     return (

package/app/globals.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "../ui/react/ui.css";
+@import "../ui/compose/compose.css";
 @import "./admin-ui.css";
 
 :root {

package/app/lib/garden-docs-meta.ts

@@ -83,7 +83,7 @@ export const COMPONENT_BADGE: Record<string, string> = {
   "components/compare": "compare",
   "components/timeline": "timeline",
   "components/chart": "chart",
-  "components/figure": "figure",
+  "components/compose": "compose",
   "components/html": "html",
   "components/interactive": "interactive",
   "components/file": "file",
@@ -95,7 +95,7 @@ export const COMPONENT_BADGE: Record<string, string> = {
   "reference/compare": "compare",
   "reference/timeline": "timeline",
   "reference/chart": "chart",
-  "reference/figure": "figure",
+  "reference/compose": "compose",
   "reference/html": "html",
   "reference/interactive": "interactive",
   "reference/file": "file",
@@ -117,7 +117,7 @@ export const NAV_SHORT_TITLE: Record<string, string> = {
   "components/compare": "并排对比",
   "components/timeline": "时间线",
   "components/chart": "条形图表",
-  "components/figure": "分区结构图",
+  "components/compose": "说明图",
   "components/html": "嵌入网页片段",
   "components/interactive": "可调公式与参数",
   "components/file": "文件下载与预览",

package/app/lib/generated-content.ts

@@ -58,7 +58,7 @@ export const posts = [
     "kind": "post",
     "draft": false,
     "sourcePath": "posts/windowsill-herbs.md",
-    "content": "北向窗台上有三只盆。这季种了罗勒和薄荷，第三只空着，留给秋天的香菜。\n\n## 两种香草\n\n罗勒要见光，薄荷更耐阴。浇法也不一样。\n\n```garden compare\nitems:\n  - title: 罗勒\n    text: 土面发白再浇透，托盘里的水倒掉。\n  - title: 薄荷\n    text: 土保持微湿，避开正午的直射光。\n```\n\n## 这季记下的数\n\n种子是三月中旬播的。盆不深，第一次剪叶等到第六周。\n\n```garden stat\nitems:\n  - label: 发芽\n    value: 7\n    unit: 天\n  - label: 盆深\n    value: 15\n    unit: 厘米\n  - label: 第一次剪叶\n    value: 6\n    unit: 周\n```\n\n## 从播种到剪叶\n\n```garden timeline\nitems:\n  - date: 3月12日\n    title: 播种\n    text: 罗勒和薄荷各一盆，覆土不超过半厘米。\n  - date: 3月19日\n    title: 出苗\n    text: 罗勒先露头，薄荷晚了两天。\n  - date: 4月2日\n    title: 间苗\n    text: 每盆留下最壮的两株。\n  - date: 5月1日\n    title: 第一次剪叶\n    text: 只剪顶端，留下至少四片叶。\n```\n\n> [!NOTE]\n> 北向窗冬天光照不够，罗勒会徒长。把盆移到能见到上午光的那一格。\n\n## 每周的株高\n\n从第二周起，每周一量一次最高的那片叶。\n\n```garden chart\ntype: bar\ntitle: 罗勒株高\nx: [\"第2周\", \"第3周\", \"第4周\", \"第5周\", \"第6周\"]\nseries:\n  - name: 株高\n    data: [4, 8, 13, 18, 22]\nunit: cm\ncaption: 第六周剪叶前，罗勒大约 22 厘米。\n```\n\n## 窗台怎么摆\n\n靠左的那格上午有光，罗勒放那里。薄荷在中间。右边的空盆先不浇。\n\n```garden figure\ncaption: 朝北的窗台，从左到右是罗勒、薄荷和一只空盆。\nparts:\n  - name: 全部\n    text: 三只盆并排，靠左的光照最好。\n  - name: 罗勒\n    text: 靠左，每天都够到上午的光。\n  - name: 薄荷\n    text: 中间，土干得慢一些。\n  - name: 空盆\n    text: 右边空着，留给秋天的香菜。\n---\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 220\">\n  <rect data-p=\"全部\" x=\"20\" y=\"16\" width=\"600\" height=\"150\" rx=\"10\" fill=\"#d5e3ea\"/>\n  <rect data-p=\"罗勒\" x=\"70\" y=\"96\" width=\"90\" height=\"58\" rx=\"8\" fill=\"#c4a574\"/>\n  <circle data-p=\"罗勒\" cx=\"115\" cy=\"78\" r=\"30\" fill=\"#3f7d4e\"/>\n  <rect data-p=\"薄荷\" x=\"270\" y=\"104\" width=\"90\" height=\"50\" rx=\"8\" fill=\"#c4a574\"/>\n  <circle data-p=\"薄荷\" cx=\"315\" cy=\"88\" r=\"26\" fill=\"#6aa87a\"/>\n  <rect data-p=\"空盆\" x=\"470\" y=\"118\" width=\"90\" height=\"36\" rx=\"8\" fill=\"#e4d3b8\"/>\n</svg>\n```\n\n## 今天浇不浇\n\n土面还湿就先不动。干了再浇，浇到盆底出水，然后把托盘倒掉。\n\n```mermaid\nflowchart TD\n  A[看土面] --> B{还湿吗}\n  B -->|湿| C[今天不浇]\n  B -->|干| D[浇到盆底出水]\n  D --> E[倒掉托盘]\n```\n\n> [!WARNING]\n> 霜前把盆搬进屋。罗勒叶子一碰霜就发黑，回不来。\n\n## 盆口和浇水量\n\n盆口越大，一次浇得越多。12 厘米的盆大约是 70 毫升。\n\n```garden interactive #pot-water\ncaption: 盆口越大，一次浇得越多。12 厘米大约是 70 毫升。\nintent: |\n  让读者拧盆口直径，看这一次该浇多少毫升。\n---\n<State diameter={12} />\n<Slider bind=\"diameter\" label=\"盆口直径\" min={8} max={24} unit=\"cm\" />\n<Let water={round(diameter * diameter * 0.35 + 20)} />\n<Stat label=\"这一次\" value={water} unit=\"ml\" />\n```\n\n## 水怎么往下走\n\n浇下去的水不会停在表面。它慢慢渗过土层，最后从排水孔滴出来。\n\n```garden html\ntitle: 水从土面渗到排水孔，大约要一分钟。\ncode: |\n  <style>\n    html, body { margin: 0; background: transparent; color: #3c342c; font: 15px/1.5 ui-sans-serif, sans-serif; }\n    svg { display: block; width: 100%; height: auto; }\n  </style>\n  <svg viewBox=\"0 0 640 280\" role=\"img\" aria-label=\"水从土面渗到盆底\">\n    <rect x=\"180\" y=\"36\" width=\"280\" height=\"200\" rx=\"18\" fill=\"#efe6d6\" stroke=\"#cbbfa8\"/>\n    <rect id=\"water\" x=\"196\" y=\"48\" width=\"248\" height=\"16\" fill=\"#7ea4c4\" opacity=\"0.85\"/>\n    <rect x=\"196\" y=\"150\" width=\"248\" height=\"70\" fill=\"#8b6a45\"/>\n    <circle cx=\"320\" cy=\"214\" r=\"8\" fill=\"#5c4632\"/>\n    <text x=\"320\" y=\"268\" text-anchor=\"middle\" font-size=\"14\" fill=\"#3c342c\">排水孔</text>\n  </svg>\n  <script>\n    var water = document.getElementById(\"water\");\n    var y = 48;\n    var reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (reduce) {\n      water.setAttribute(\"y\", \"168\");\n      water.setAttribute(\"height\", \"36\");\n    } else {\n      (function tick() {\n        y += 0.45;\n        if (y > 168) y = 48;\n        water.setAttribute(\"y\", String(y));\n        water.setAttribute(\"height\", String(Math.max(16, 204 - y)));\n        requestAnimationFrame(tick);\n      })();\n    }\n  </script>\n```\n\n## 浇水纸条\n\n纸条上先记下这一周。周四那次少了，周日又给薄荷补了一次。\n\n```text\n周一  罗勒  80 ml\n周四  罗勒  80 ml\n```\n```diff\n 周一  罗勒  80 ml\n-周四  罗勒  80 ml\n+周四  罗勒  120 ml\n+周日  薄荷  60 ml\n```\n\n## 六周记录\n\n| 周 | 株高 | 新叶 | 浇水 | 土面 | 气温 | 日照 | 备注 |\n| --- | --- | --- | --- | --- | --- | --- | --- |\n| 第1周 | 未见 | 无 | 每天喷湿 | 湿 | 16°C | 上午 | 覆土很薄 |\n| 第2周 | 4 cm | 2 片 | 80 ml | 干 | 18°C | 上午 | 罗勒先出 |\n| 第3周 | 8 cm | 4 片 | 80 ml | 干 | 19°C | 上午 | 薄荷跟上 |\n| 第4周 | 13 cm | 6 片 | 100 ml | 干 | 21°C | 上午 | 间苗，留两株 |\n| 第5周 | 18 cm | 8 片 | 120 ml | 干 | 22°C | 上午 | 叶色转深 |\n| 第6周 | 22 cm | 10 片 | 120 ml | 干 | 23°C | 上午 | 剪了顶端 |\n\n想核对叶子是不是对生、花是不是穗状时，看这一页。\n\n```garden card\nurl: https://zh.wikipedia.org/wiki/%E7%BD%97%E5%8B%92\ntitle: 罗勒\ndescription: 叶子对生，花排成穗。窗台上的那盆对得上。\n```\n\n> [!TIP]\n> 剪叶之后把盆转半圈，让另一面也能见到上午的光。"
+    "content": "北向窗台上有三只盆。这季种了罗勒和薄荷，第三只空着，留给秋天的香菜。\n\n## 两种香草\n\n罗勒要见光，薄荷更耐阴。浇法也不一样。\n\n```garden compare\nitems:\n  - title: 罗勒\n    text: 土面发白再浇透，托盘里的水倒掉。\n  - title: 薄荷\n    text: 土保持微湿，避开正午的直射光。\n```\n\n## 这季记下的数\n\n种子是三月中旬播的。盆不深，第一次剪叶等到第六周。\n\n```garden stat\nitems:\n  - label: 发芽\n    value: 7\n    unit: 天\n  - label: 盆深\n    value: 15\n    unit: 厘米\n  - label: 第一次剪叶\n    value: 6\n    unit: 周\n```\n\n## 从播种到剪叶\n\n```garden timeline\nitems:\n  - date: 3月12日\n    title: 播种\n    text: 罗勒和薄荷各一盆，覆土不超过半厘米。\n  - date: 3月19日\n    title: 出苗\n    text: 罗勒先露头，薄荷晚了两天。\n  - date: 4月2日\n    title: 间苗\n    text: 每盆留下最壮的两株。\n  - date: 5月1日\n    title: 第一次剪叶\n    text: 只剪顶端，留下至少四片叶。\n```\n\n> [!NOTE]\n> 北向窗冬天光照不够，罗勒会徒长。把盆移到能见到上午光的那一格。\n\n## 每周的株高\n\n从第二周起，每周一量一次最高的那片叶。\n\n```garden chart\ntype: bar\ntitle: 罗勒株高\nx: [\"第2周\", \"第3周\", \"第4周\", \"第5周\", \"第6周\"]\nseries:\n  - name: 株高\n    data: [4, 8, 13, 18, 22]\nunit: cm\ncaption: 第六周剪叶前，罗勒大约 22 厘米。\n```\n\n## 窗台怎么摆\n\n靠左的那格上午有光，罗勒放那里。薄荷在中间。右边的空盆先不浇。\n\n![朝北的窗台，从左到右是罗勒、薄荷和一只空盆。](./windowsill-herbs/sill.svg)\n\n## 今天浇不浇\n\n土面还湿就先不动。干了再浇，浇到盆底出水，然后把托盘倒掉。\n\n```mermaid\nflowchart TD\n  A[看土面] --> B{还湿吗}\n  B -->|湿| C[今天不浇]\n  B -->|干| D[浇到盆底出水]\n  D --> E[倒掉托盘]\n```\n\n> [!WARNING]\n> 霜前把盆搬进屋。罗勒叶子一碰霜就发黑，回不来。\n\n## 盆口和浇水量\n\n盆口越大，一次浇得越多。12 厘米的盆大约是 70 毫升。\n\n```garden interactive #pot-water\ncaption: 盆口越大，一次浇得越多。12 厘米大约是 70 毫升。\nintent: |\n  让读者拧盆口直径，看这一次该浇多少毫升。\n---\n<State diameter={12} />\n<Slider bind=\"diameter\" label=\"盆口直径\" min={8} max={24} unit=\"cm\" />\n<Let water={round(diameter * diameter * 0.35 + 20)} />\n<Stat label=\"这一次\" value={water} unit=\"ml\" />\n```\n\n## 水怎么往下走\n\n浇下去的水不会停在表面。它慢慢渗过土层，最后从排水孔滴出来。\n\n```garden html\ntitle: 水从土面渗到排水孔，大约要一分钟。\ncode: |\n  <style>\n    html, body { margin: 0; background: transparent; color: #3c342c; font: 15px/1.5 ui-sans-serif, sans-serif; }\n    svg { display: block; width: 100%; height: auto; }\n  </style>\n  <svg viewBox=\"0 0 640 280\" role=\"img\" aria-label=\"水从土面渗到盆底\">\n    <rect x=\"180\" y=\"36\" width=\"280\" height=\"200\" rx=\"18\" fill=\"#efe6d6\" stroke=\"#cbbfa8\"/>\n    <rect id=\"water\" x=\"196\" y=\"48\" width=\"248\" height=\"16\" fill=\"#7ea4c4\" opacity=\"0.85\"/>\n    <rect x=\"196\" y=\"150\" width=\"248\" height=\"70\" fill=\"#8b6a45\"/>\n    <circle cx=\"320\" cy=\"214\" r=\"8\" fill=\"#5c4632\"/>\n    <text x=\"320\" y=\"268\" text-anchor=\"middle\" font-size=\"14\" fill=\"#3c342c\">排水孔</text>\n  </svg>\n  <script>\n    var water = document.getElementById(\"water\");\n    var y = 48;\n    var reduce = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n    if (reduce) {\n      water.setAttribute(\"y\", \"168\");\n      water.setAttribute(\"height\", \"36\");\n    } else {\n      (function tick() {\n        y += 0.45;\n        if (y > 168) y = 48;\n        water.setAttribute(\"y\", String(y));\n        water.setAttribute(\"height\", String(Math.max(16, 204 - y)));\n        requestAnimationFrame(tick);\n      })();\n    }\n  </script>\n```\n\n## 浇水纸条\n\n纸条上先记下这一周。周四那次少了，周日又给薄荷补了一次。\n\n```text\n周一  罗勒  80 ml\n周四  罗勒  80 ml\n```\n```diff\n 周一  罗勒  80 ml\n-周四  罗勒  80 ml\n+周四  罗勒  120 ml\n+周日  薄荷  60 ml\n```\n\n## 六周记录\n\n| 周 | 株高 | 新叶 | 浇水 | 土面 | 气温 | 日照 | 备注 |\n| --- | --- | --- | --- | --- | --- | --- | --- |\n| 第1周 | 未见 | 无 | 每天喷湿 | 湿 | 16°C | 上午 | 覆土很薄 |\n| 第2周 | 4 cm | 2 片 | 80 ml | 干 | 18°C | 上午 | 罗勒先出 |\n| 第3周 | 8 cm | 4 片 | 80 ml | 干 | 19°C | 上午 | 薄荷跟上 |\n| 第4周 | 13 cm | 6 片 | 100 ml | 干 | 21°C | 上午 | 间苗，留两株 |\n| 第5周 | 18 cm | 8 片 | 120 ml | 干 | 22°C | 上午 | 叶色转深 |\n| 第6周 | 22 cm | 10 片 | 120 ml | 干 | 23°C | 上午 | 剪了顶端 |\n\n想核对叶子是不是对生、花是不是穗状时，看这一页。\n\n```garden card\nurl: https://zh.wikipedia.org/wiki/%E7%BD%97%E5%8B%92\ntitle: 罗勒\ndescription: 叶子对生，花排成穗。窗台上的那盆对得上。\n```\n\n> [!TIP]\n> 剪叶之后把盆转半圈，让另一面也能见到上午的光。"
   },
   {
     "title": "Intelligent UI 实验室",

package/app/lib/i18n.ts

@@ -85,9 +85,6 @@ const zh = {
   dataTable: "查看数据表",
   item: "项目",
   value: "数值",
-  part: (n: number) => `部分 ${n}`,
-  pickPart: "选择一个部分",
-  diagram: "结构图",
   pickAnswer: "先选一个答案。",
   correct: "✓ 答对了",
   wrong: "✗ 再想想",
@@ -370,9 +367,6 @@ const en: typeof zh = {
   dataTable: "Show data table",
   item: "Item",
   value: "Value",
-  part: (n: number) => `Part ${n}`,
-  pickPart: "Choose a part",
-  diagram: "Diagram",
   pickAnswer: "Pick an answer first.",
   correct: "✓ Correct",
   wrong: "✗ Try again",