hd-garden 0.13.3 → 0.14.2

package/.agents/skills/garden-post-review/SKILL.md

@@ -1,17 +1,12 @@
 ---
 name: garden-post-review
-description: >-
-  Reviews one specified Garden post in three steps: fix script-reported
-  structure errors, fix widgets with the chart skill, then suggest prose
-  improvements without editing. Use when the user asks to 审查 / 审稿 /
-  review a Garden blog post.
+description: "Review one specified Garden post: fix script-reported structure errors, verify existing Compose blocks, then suggest prose improvements without editing."
 ---
-
 # 审查一篇 Garden 博文
 
 只审用户点名的稿。三步按顺序做，后一步看到的是前一步改完的稿。
 
-开始前先运行 `npx garden ui scan content/posts/路径.md`。有 `status` 为 `uncompiled`、`stale` 或 `error` 的块时，先按 [garden-ui](../garden-ui/SKILL.md) 处理完，再进入第 1 步。
+开始前先运行 `npx garden ui scan content/posts/路径.md`。有 `status` 为 `uncompiled` 或 `error` 的块时，先按 [garden-compose](../garden-compose/SKILL.md) 处理完，再进入第 1 步。
 
 硬性检查命令（在站点根目录）：
 
@@ -29,17 +24,11 @@ stdout 是 JSON。`ok` 为 true 才算通过。不要自己再查一遍标题、
 - 脚本没报的结构问题不要顺手改。
 - `references` 是推荐额外阅读，不必和正文里的外链一一对应。不要因为正文有链接就补进表，也不要因为表里的材料正文没提到就删掉。
 - `reference-heading`：把 `## 参考` / `## 参考资料` 收进 `references`，删掉这个标题。`## 参考文献` 留在正文里。
-- 缺 widget 文件时，只修正写错的 `src`。不要在这一步新做图表。
-
-## 2. 图表按图表 skill 审并修
-
-这一步只在稿里有 `widget` 时做。先读 [garden-interactive-chart](../garden-interactive-chart/SKILL.md)。
-
-可以改同名目录里的 HTML，以及对应围栏的 `caption`。周围正文不动。`caption` 必须是一句判断。
+- Compose 文件缺失时，只核对并修正写错的 `file src`；不凭空补附件或新增图表。
 
-改完再跑一次 `garden check`，直到通过。
+## 2. 检查既有 Compose
 
-没有 `widget` 就跳过这一步。
+只处理已存在且获授权修复的 Compose 块，按 garden-compose 的 scan → 带 base hash 的 apply → check 流程。保留完整原文、资源与顺序；内容岛、布局、原生场景和必要交互都在同一入口，不改周围正文。对实际用到的布局/交互做完整主题、桌面/窄屏检查；没做视觉验收就明说，不把脚本通过当作外观通过。没有 Compose 则跳过，不主动把文章改成组件集合。
 
 ## 3. 通读整篇，只出建议
 

package/Makefile

@@ -2,17 +2,18 @@ MESSAGE ?= 更新博客
 
 .DEFAULT_GOAL := help
 
-.PHONY: help new embed skill prepare dev check build update
+.PHONY: help new embed skill prepare dev check diff build update
 
 # Pass literal user input via environment, never interpolate it into shell code.
-unexport TITLE SLUG DIR URL
+unexport TITLE SLUG DIR URL FILE
 export GARDEN_NEW_TITLE := $(value TITLE)
 export GARDEN_NEW_SLUG := $(value SLUG)
 export GARDEN_NEW_DIR := $(value DIR)
 export GARDEN_EMBED_URL := $(value URL)
+export GARDEN_CHECK_FILE := $(value FILE)
 
 help:
-	@printf "%s\n" "Garden 常用命令：" "  make new                 创建文章草稿（无需安装 npm 依赖）" '  make new TITLE="文章标题" SLUG=my-post DIR=writing' '  make embed URL="https://example.com"  拉取外部网页摘要，打印可粘贴的 embed 围栏' "  make skill               安装可交互图表 skill" "  make dev                 首次准备并本地预览" "  make check               检查内容与测试" "  make build               构建公开站点" "  make update              检查、提交并触发自动发布" "  make update MESSAGE=\"新增一篇文章\"  自定义提交说明"
+	@printf "%s\n" "Garden 常用命令：" "  make new                 创建文章草稿（无需安装 npm 依赖）" '  make new TITLE="文章标题" SLUG=my-post DIR=writing' '  make embed URL="https://example.com"  拉取外部网页摘要，打印可粘贴的 embed 围栏' "  make skill               安装可交互图表 skill" "  make dev                 首次准备并本地预览" "  make check               全量严格预检后 lint/测试；FILE=路径 只限制预检" "  make check diff          只检查 Git 改动的 Markdown，不构建/跑全套测试" "  make build               构建公开站点" "  make update              检查、提交并触发自动发布" "  make update MESSAGE=\"新增一篇文章\"  自定义提交说明"
 
 new:
 	@node scripts/new-post.mjs
@@ -29,8 +30,16 @@ prepare:
 dev: prepare
 	node bin/garden.mjs dev
 
+# Parse goals once: even make -j check diff runs only one diff preflight.
+ifneq ($(filter diff,$(MAKECMDGOALS)),)
 check:
+	node bin/garden.mjs verify --diff
+diff: check
+else
+check:
+	node bin/garden.mjs verify
 	npm run lint && npm test
+endif
 
 build:
 	node bin/garden.mjs build

package/README.en.md

@@ -21,7 +21,7 @@ The published npm package is `hd-garden`; once installed inside a site, you can
 
 ## 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.
+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-compose` 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.
 
@@ -36,11 +36,11 @@ 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.
+- **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-compose` 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.
+- **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-compose` 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/`.
 
@@ -50,7 +50,7 @@ Typora has no official plugin API. Install [typora-community-plugin](https://git
 
 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.
+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-compose` 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.
 
@@ -66,7 +66,7 @@ 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 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.
+Ask your Agent to compile the post using the bundled `garden-compose` 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.
 
 ## 4. Common commands
 
@@ -103,3 +103,8 @@ Start `make dev` and open `/garden/en` (Chinese at `/garden`), or read the markd
 ## License
 
 [MIT](LICENSE). Sites built with Garden should keep the Garden attribution link in the footer.
+
+
+### AI writing entry point
+
+New sites include a locale-appropriate root `AGENTS.md`: a short map of Garden content, source/generated files, project skills and verification commands, not a duplicated component catalog. Existing sites can run `npx --no-install garden agents` to add it only if missing. Sync/dev also fills in a missing guide. Existing files, directories and symlinks named `AGENTS.md` are never replaced; the site guide is not installed over engine-maintainer instructions.

package/README.md

@@ -23,7 +23,7 @@ make dev
 
 ## 2. 在 VS Code、Cursor 和 Typora 里写交互
 
-Intelligent UI 插件随 `hd-garden` 一起发布，不用在站点里编译源码。它做四件事：插入一句想法、在编辑器里预览画好的组件、打开组件清单，以及把「编译这篇」交给 `garden-ui` skill。
+Intelligent UI 插件随 `hd-garden` 一起发布，不用在站点里编译源码。它做四件事：插入一句想法、在编辑器里预览画好的组件、打开组件清单，以及把「编译这篇」交给 `garden-compose` skill。
 
 `npx hd-garden init` 把产物复制到站点的 `.garden/editors/`（VS Code 的 `.vsix`，以及 Typora 插件目录）。终端可交互时，会先问要不要装进 VS Code / Cursor，再问要不要装进 Typora。第一次 `npx garden sync`（`make dev` 会先同步）如果还没问过，会再问一次。回答 `y` 才会安装；直接回车是不装。
 
@@ -38,11 +38,11 @@ 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`，再从带小预览图的列表里选组件。
+- **插入想法**：macOS 用 `Cmd+Alt+I`，Windows / Linux 用 `Ctrl+Alt+I`，或命令「插入 Garden 块」。插入的是不带组件名的 `garden` 围栏，正文用中文告诉你要写什么，交给 `garden-compose` 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`。插件不调用模型，也不保存密钥。
+- **编译**：命令「复制编译提示词」。中文站点复制 `编译这篇：<相对路径>`，英文站点（`locale: en_US`）复制 `Compile this post: <相对路径>`。把这句话发给装了 `garden-compose` 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/`。
 
@@ -52,7 +52,7 @@ Typora 没有官方插件接口。先按 [typora-community-plugin 的安装说
 
 插件文件复制到 `~/.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。
+用法和 VS Code 同一套：光标离开围栏时预览 `ui` / `intent`（和 Mermaid 一样，点进围栏编辑源码；点滑杆或按钮不会跳进源码）；先输入 `/` 再选 `/garden`，或用命令「插入 Garden 块」，都会插入想法围栏（Windows / Linux 默认 `Ctrl+Alt+I`，macOS 的 Option 会改写按键，请到「设置 → 快捷键」里自己录）；「Garden：复制编译提示词」交给 `garden-compose` skill。
 
 升级 Typora 会覆盖社区框架改过的程序文件，插件跟着失效。需要重新安装 typora-community-plugin，再勾选本插件。稿件里的围栏原文还在，也可以用 `make dev` 预览。
 
@@ -68,7 +68,7 @@ Obsidian 插件这一轮不随包安装。
 ```
 ````
 
-让 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 的修复提示词。
+让 Agent 按站点里的 `garden-compose` 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 的修复提示词。
 
 ## 4. 常用命令
 
@@ -105,3 +105,8 @@ npx garden editors install --yes               # 把 Intelligent UI 插件装进
 ## 许可证
 
 [MIT](LICENSE)。使用 Garden 构建的站点请保留页脚中的 Garden 署名链接。
+
+
+### AI 写作入口
+
+新建站点自带按语言选择的根目录 `AGENTS.md`：简要说明内容模型、源文件与生成物、项目技能和校验入口，不重复组件目录。已有站点可运行 `npx --no-install garden agents`，仅在缺失时补齐；sync/dev 也会补齐缺失指南。已有同名文件、目录或符号链接均不覆盖，不将站点指南安装到引擎维护仓库。

package/app/admin/preview/[...path]/page.tsx

@@ -1,7 +1,6 @@
 import matter from "gray-matter";
 import Link from "next/link";
-import { parse as parseYaml, stringify as stringifyYaml } from "yaml";
-import { scanFences } from "../../../../ui/core/fence.mjs";
+import { parse as parseYaml } from "yaml";
 import { collectDataSources, transformUiContent } from "../../../../ui/core/transform.mjs";
 import { AdminUiShell, isStaticExport, requireAdminPage, StaticAdminNotice } from "../../../components/AdminUiShell";
 import { MarkdownArticle } from "../../../components/MarkdownArticle";
@@ -25,21 +24,10 @@ const isRelative = (value: string) => !/^(?:[a-z][a-z0-9+.-]*:|\/|#)/iu.test(val
 /** Same-name-directory files go through the authenticated, sandboxed proxy. */
 function proxyAssets(content: string, post: string) {
   const proxy = (relative: string) => `/api/admin/preview/asset?post=${encodeURIComponent(post)}&path=${encodeURIComponent(relative)}`;
-  let output = replaceInlineLinks(content, (link) =>
+  return replaceInlineLinks(content, (link) =>
     link.image && isRelative(link.url) ? formatInlineLink(link, proxy(link.url)) : undefined,
   );
-  for (const fence of [...scanFences(output)].reverse()) {
-    if (fence.lang !== "widget") continue;
-    try {
-      const data = parseYaml(fence.body) as Record<string, unknown> | null;
-      if (!data || typeof data.src !== "string" || !isRelative(data.src)) continue;
-      const next = `${fence.marker}widget\n${stringifyYaml({ ...data, src: proxy(data.src) }).trimEnd()}\n${fence.marker}`;
-      output = `${output.slice(0, fence.start)}${next}${output.slice(fence.end)}`;
-    } catch {
-      continue;
-    }
-  }
-  return output;
+
 }
 
 export default async function DraftPreviewPage({ params }: { params: Promise<{ path: string[] }> }) {
@@ -87,7 +75,7 @@ export default async function DraftPreviewPage({ params }: { params: Promise<{ p
           草稿预览 · {post}{draft ? " · 草稿" : ""} · <Link href="/admin/ui/blocks">回到交互块</Link>
         </p>
         <h1 className="ui-admin-preview-title">{typeof data.title === "string" ? data.title : post}</h1>
-        {typeof data.description === "string" ? <p className="ui-studio-meta">{data.description}</p> : null}
+        {typeof data.description === "string" && data.description.trim() ? <p className="ui-studio-meta">{data.description}</p> : null}
         <article className="article-body">
           <MarkdownArticle content={proxyAssets(content, post)} numbering={data.numbering === false ? false : undefined} />
         </article>

package/app/api/admin/ui/blocks/route.ts

@@ -9,7 +9,7 @@ export async function GET() {
     const counts = { uncompiled: 0, stale: 0, error: 0, ok: 0 };
     for (const file of files) {
       for (const block of file.blocks) {
-        if (block.lang !== "widget") counts[block.status as keyof typeof counts] += 1;
+        counts[block.status as keyof typeof counts] += 1;
       }
     }
     return Response.json({ files, counts });

package/app/components/AdminUiPanels.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import {renderComposePreview} from "./garden/ComposePreview";
+
 import Link from "next/link";
 import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import { buildFixPrompt } from "../../ui/core/fix-prompt.mjs";
@@ -10,6 +12,7 @@ export function AdminCatalog({ recipes }: { recipes: RecipeSource[] }) {
   return (
     <section className="admin-panel ui-admin-catalog">
       <CatalogPage
+        renderBlock={renderComposePreview}
         recipes={recipes}
         onStart={(fence) => {
           window.localStorage.setItem(STUDIO_START_KEY, fence);
@@ -69,7 +72,7 @@ export function AdminBlocks({ siteUrl }: { siteUrl: string }) {
   }, []);
 
   const visible = (block: Block) =>
-    block.lang !== "widget" && (filter === "all" || (filter === "todo" ? block.status !== "ok" : block.status === filter));
+    (filter === "all" || (filter === "todo" ? block.status !== "ok" : block.status === filter));
 
   const copyPrompt = async (file: FileBlocks, block: Block) => {
     const prompt = buildFixPrompt([{ file: file.path, block, diagnostics: block.diagnostics.filter((item) => item.severity === "error") }]);
@@ -78,7 +81,7 @@ export function AdminBlocks({ siteUrl }: { siteUrl: string }) {
   };
 
   const counts = { uncompiled: 0, stale: 0, error: 0, ok: 0 };
-  for (const file of files ?? []) for (const block of file.blocks) if (block.lang !== "widget") counts[block.status] += 1;
+  for (const file of files ?? []) for (const block of file.blocks) counts[block.status] += 1;
 
   return (
     <section className="admin-panel ui-admin-blocks">
@@ -111,7 +114,7 @@ export function AdminBlocks({ siteUrl }: { siteUrl: string }) {
               <tbody>
                 {blocks.map((block) => (
                   <tr key={block.startLine}>
-                    <td>{block.lang === "intent" ? "想法" : "ui"} · {block.id ?? `第 ${block.startLine} 行`}</td>
+                    <td>{"Compose"} · {block.id ?? `第 ${block.startLine} 行`}</td>
                     <td><span className={`ui-admin-status ui-admin-status-${block.status}`}>{STATUS_LABELS[block.status]}</span></td>
                     <td>{block.caption ?? block.intent?.split("\n")[0] ?? ""}{block.diagnostics.length ? `（${block.diagnostics.length} 条诊断）` : ""}</td>
                     <td className="ui-admin-actions">

package/app/components/GardenContentGuide.tsx

@@ -32,14 +32,13 @@ cover: writing/first-post.jpg
 
 ## 一个小标题
 
-可以继续插入图片、代码、公式、Mermaid 图表，或用 \`garden\` 围栏写组件：
-
-\`\`\`garden list
-items:
-  - icon: idea
-    text: 记下为什么重新开始写
-  - icon: book
-    text: 先把旧笔记整理成目录
+可以继续插入图片、代码、公式、Mermaid 图表，或用 \`garden compose\` 围栏写组件：
+
+\`\`\`garden compose
+<icon-list>
+  <entry icon="idea"><text>记下为什么重新开始写</text></entry>
+  <entry icon="book"><text>先把旧笔记整理成目录</text></entry>
+</icon-list>
 \`\`\``;
 
 const thoughtSource = `---

package/app/components/MarkdownArticle.tsx

@@ -1,3 +1,4 @@
+import {rehypeGardenBlocks} from "../lib/rehype-garden-blocks.mjs";
 import { UiLangProvider } from "./UiLang";
 import { siteLang, ui, type UiLang } from "../lib/i18n";
 import { markdownPlugins } from "../lib/markdown-plugins";
@@ -252,6 +253,7 @@ export function MarkdownArticle({ content, lang, fieldTables, refDemos, handbook
         remarkPlugins={[...(refDemos ? [remarkRefDemos] : []), ...markdownPlugins, remarkLinkCard, [remarkA2, { imageSize: (src: string) => lookupImageSize(imageSizes, src), lang: lang ?? siteLang }]]}
         rehypePlugins={[
           rehypeRaw,
+          rehypeGardenBlocks,
           rehypeKatex,
           rehypeSlug,
           // Not rehype-autolink-headings "wrap": a heading with a link in it would nest <a> in <a> (React #418).

package/app/components/UiStudio.tsx

@@ -4,11 +4,15 @@ import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { RangeSetBuilder, StateEffect, StateField } from "@codemirror/state";
 import { Decoration, EditorView, keymap, lineNumbers, type DecorationSet } from "@codemirror/view";
 import { useEffect, useEffectEvent, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { parseGardenBlock } from "../../ui/garden/parse.mjs";
+import { GardenBlock } from "./garden/GardenBlock";
+import { parsePlayCompose, looksLikePlayCompose } from "../../ui/compose/dil.mjs";
+import { gardenInfoId } from "../../ui/core/garden-fence.mjs";
 import { compileUiBlock } from "../../ui/core/compile.mjs";
-import { fenceHash, findBlocks, idOf, intentHash, normalizeNewlines, scanFences, setCompiled, splitUiBody } from "../../ui/core/fence.mjs";
+import { fenceHash, findBlocks, idOf, intentHash, intentOf, normalizeNewlines } from "../../ui/core/fence.mjs";
 import { renderStatic } from "../../ui/core/static.mjs";
 import { collectDataSources } from "../../ui/core/transform.mjs";
-import { UiFigure, type Diagnostic, type UiPayload } from "../../ui/react";
+import { type Diagnostic, type UiPayload } from "../../ui/react";
 import { parseRecipe, type RecipeSource } from "../../ui/react/recipes";
 
 import { STUDIO_START_KEY, STUDIO_STORAGE_KEY as STORAGE_KEY } from "./ui-studio-keys";
@@ -48,13 +52,7 @@ function useDebounced<T>(value: T, delay: number) {
   return debounced;
 }
 
-function stamp(text: string) {
-  const fence = scanFences(text).find((item) => item.lang === "ui");
-  if (!fence) return text;
-  const { header } = splitUiBody(fence.body);
-  if (typeof header?.intent !== "string") return text;
-  return `${text.slice(0, fence.start)}${setCompiled(fence.raw, intentHash(header.intent))}${text.slice(fence.end)}`;
-}
+function stamp(text: string) { return text; }
 
 function loadSaved() {
   try {
@@ -133,27 +131,34 @@ function Studio({ configured, modelName, remaining: initialRemaining, recipes }:
 
   const debouncedText = useDebounced(text, 150);
   const compiled = useMemo(() => {
-    const fence = scanFences(debouncedText).find((item) => item.lang === "ui");
+    const fence = findBlocks(debouncedText).find((item) => item.lang === "garden-compose");
     if (!fence) {
       return {
         payload: null as UiPayload | null,
+        scene: null as string | null,
         diagnostics: debouncedText.trim()
-          ? [{ code: "ui-header", line: 1, message: "结构栏里要有一个 ```ui 围栏", severity: "error" } as Diagnostic]
+          ? [{ code: "ui-header", line: 1, message: "结构栏里要有一个 garden compose 围栏", severity: "error" } as Diagnostic]
           : [],
       };
     }
-    const result = compileUiBlock(fence.body, {
+    const block=parseGardenBlock(`garden ${fence.info}`,fence.body);
+    const error=block&&"error" in block?block.error:null;
+    if(!block||error)return {payload:null,scene:null,diagnostics:[{code:error?.code??"compose-invalid",line:fence.startLine,message:error?.message??"无效的 Compose",severity:"error"} as Diagnostic]};
+    if(!("mode" in block)||block.mode!=="play")return {payload:null,scene:encodeURIComponent(JSON.stringify(block)),diagnostics:[] as Diagnostic[]};
+    const parsed=parsePlayCompose({id:gardenInfoId(fence.info)},fence.body);
+    const result = compileUiBlock(parsed.uiSource, {
       lineOffset: fence.startLine,
       markdownPath: origin?.post ?? null,
       readData: (src: string) => dataFiles[src],
       skipData: !origin,
     });
-    return { payload: result.payload as UiPayload | null, diagnostics: result.check.diagnostics as Diagnostic[] };
+    return { payload: result.payload as UiPayload | null, scene:result.payload?encodeURIComponent(JSON.stringify({...block,payload:result.payload})):null, diagnostics: result.check.diagnostics as Diagnostic[] };
   }, [debouncedText, origin, dataFiles]);
 
-  const [lastGood, setLastGood] = useState<{ text: string; payload: UiPayload } | null>(null);
-  if (compiled.payload && lastGood?.text !== debouncedText) setLastGood({ text: debouncedText, payload: compiled.payload });
-  const shown = compiled.payload ?? lastGood?.payload ?? null;
+  const [lastGood,setLastGood]=useState<{text:string;payload:UiPayload|null;scene:string}|null>(null);
+  if(compiled.scene&&lastGood?.text!==debouncedText)setLastGood({text:debouncedText,payload:compiled.payload,scene:compiled.scene});
+  const shown=compiled.payload??lastGood?.payload??null;
+  const shownScene=compiled.scene??lastGood?.scene??null;
 
   useEffect(() => {
     viewRef.current?.dispatch({ effects: setErrorLines.of(compiled.diagnostics.filter((item) => item.severity === "error").map((item) => item.line)) });
@@ -226,17 +231,9 @@ function Studio({ configured, modelName, remaining: initialRemaining, recipes }:
     }
     const id = idOf(block);
     const base = fenceHash(block.raw);
-    if (block.lang === "intent") {
-      const intent = normalizeNewlines(block.body);
-      setOrigin({ post, target: id ? { id } : { intentHash: intentHash(intent) }, base });
-      setInstruction(intent);
-      replaceText("");
-      setMessage({ tone: "info", text: "已载入这段想法。按「生成」把它编译成 ui 块。" });
-    } else {
-      setOrigin({ post, target: id ? { id } : { intentHash: intentHash(splitUiBody(block.body).header?.intent ?? "") }, base });
-      replaceText(block.raw);
-      setMessage({ tone: "info", text: `已从 ${post} 打开 ${id ?? "这一块"}。改完用「复制写回命令」带回本地。` });
-    }
+    setOrigin({post,target:id?{id}:{intentHash:intentHash(intentOf(block)??"")},base});
+    replaceText(block.raw);
+    setMessage({tone:"info",text:`已从 ${post} 打开 ${id??"这一块"}。改完用「复制写回命令」带回本地。`});
     const sources = collectDataSources(block.raw);
     const loaded: Record<string, string> = {};
     for (const src of sources) {
@@ -339,9 +336,9 @@ function Studio({ configured, modelName, remaining: initialRemaining, recipes }:
               这一篇
               <select value="" onChange={(event) => void openBlock(pickedFile, Number(event.target.value))}>
                 <option value="">选一块</option>
-                {pickedBlocks.filter((block) => block.lang !== "widget").map((block) => (
+                {pickedBlocks.map((block) => (
                   <option key={block.startLine} value={block.startLine}>
-                    {`${block.lang === "intent" ? "想法" : "ui"} · ${block.id ?? `第 ${block.startLine} 行`} · ${block.status}`}
+                    {`${"Compose"} · ${block.id ?? `第 ${block.startLine} 行`} · ${block.status}`}
                   </option>
                 ))}
               </select>
@@ -387,9 +384,9 @@ function Studio({ configured, modelName, remaining: initialRemaining, recipes }:
         </div>
 
         <div className="ui-studio-preview" data-theme={theme} data-width={width} hidden={stage !== "preview"}>
-          {shown ? (
-            view === "interactive" ? (
-              <UiFigure payload={shown} />
+          {shownScene ? (
+            view === "interactive" || !shown ? (
+              <GardenBlock dataPayload={shownScene} />
             ) : (
               <figure className="garden-ui" lang="en-US">
                 <div className="garden-ui-body garden-ui-static" dangerouslySetInnerHTML={{ __html: renderStatic(shown, "html") }} />

package/app/components/garden/AuthorRich.tsx

@@ -0,0 +1,5 @@
+"use client";
+import {renderArticleContent} from "../../../ui/garden/article-content.mjs";
+export function AuthorRich({text}:{text:string}) {
+  return <span dangerouslySetInnerHTML={{__html:renderArticleContent(String(text??""),{inline:true})??""}}/>;
+}

package/app/components/garden/ComposePreview.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import { UiLangProvider } from "../UiLang";
+import { GardenBlock } from "./GardenBlock";
+
+/** Site/editor host adapter; the portable UI package only receives this callback. */
+export function renderComposePreview(block: unknown, lang?: "zh" | "en") {
+  return <UiLangProvider lang={lang}><GardenBlock dataPayload={encodeURIComponent(JSON.stringify(block))} /></UiLangProvider>;
+}

package/app/components/garden/GardenBlock.tsx

@@ -1,16 +1,18 @@
 "use client";
 
+import ReactMarkdown, {type Components} from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import { useUiLang } from "../UiLang";
+import { readPayload } from "../../../ui/core/compile.mjs";
+import { parseCompose } from "../../../ui/compose/index.mjs";
 import { renderCompose } from "../../../ui/compose/render.mjs";
 import { readGardenPayload } from "../../lib/remark-garden.mjs";
 import {
   GardenCard,
   GardenChart,
   GardenCompare,
-  GardenHtml,
   GardenIdea,
   GardenInteractive,
-  GardenLegacy,
   GardenStat,
   GardenTimeline,
   GardenUnknown,
@@ -18,11 +20,14 @@ import {
 import { GardenFile } from "./GardenFile";
 import { GardenChoice, GardenList, GardenRelations } from "./patterns";
 
+const composeComponents = {
+  "garden-block": (nested: {dataPayload?:string;"data-payload"?:string}) => <GardenBlock dataPayload={nested.dataPayload??nested["data-payload"]}/>,
+};
+
 export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
   const lang = useUiLang();
   const block = readGardenPayload(dataPayload);
   if (!block) return null;
-  if (block.legacy && block.suggestion) return <GardenLegacy suggestion={String(block.suggestion)} />;
   if (!block.name) return <GardenIdea text={String(block.idea || block.children || "")} />;
   if (block.error) return <GardenUnknown name={String(block.name)} />;
   const props = (block.props ?? {}) as Record<string, unknown>;
@@ -41,24 +46,21 @@ export function GardenBlock({ dataPayload }: { dataPayload?: string }) {
       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.
+        // Play receives lowered restricted source or a validated build payload.
         return (
           <GardenInteractive
+            renderScene={source => { const parsed=parseCompose(source); return parsed.ok ? <GardenBlock dataPayload={encodeURIComponent(JSON.stringify({name:"compose",props:{...parsed.doc,frame:"none"}}))}/> : null; }}
             block={{
               id: block.id,
               props,
+              payload: block.payload ? readPayload(JSON.stringify(block.payload)) : null,
               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":
-      // TEMP compat if a payload still names interactive; parse now rewrites to compose.
-      return <GardenInteractive block={{ id: block.id, props, children: String(block.children ?? "") }} />;
+      return <div className="g-compose-host"><ReactMarkdown rehypePlugins={[rehypeRaw]} components={composeComponents as Components}>{renderCompose(props)}</ReactMarkdown></div>;
     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/GardenFile.tsx

@@ -1,4 +1,4 @@
-// Server component: the card for `garden file`. Only the 预览 control is a client island.
+// Server component: the card for Compose file. Only the 预览 control is a client island.
 import { siteLang, ui, type UiLang } from "../../lib/i18n";
 import { blockFiles, fileMeta } from "../../../ui/garden/file-block.mjs";
 import { ActionGlyph, FileGlyph, safeFileHref } from "./file-icons";