hd-garden 0.10.4 → 0.12.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

@@ -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 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.
 
 ## 4. Common commands
 

package/README.md

@@ -68,7 +68,7 @@ Obsidian 插件这一轮不随包安装。
 ```
 ````
 
-让 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 的修复提示词。
 
 ## 4. 常用命令
 
@@ -98,7 +98,7 @@ npx garden editors install --yes               # 把 Intelligent UI 插件装进
 
 本地运行 `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,8 @@ export const COMPONENT_BADGE: Record<string, string> = {
   "reference/compare": "compare",
   "reference/timeline": "timeline",
   "reference/chart": "chart",
-  "reference/figure": "figure",
+  "reference/compose": "compose",
+  "reference/compose-icons": "compose",
   "reference/html": "html",
   "reference/interactive": "interactive",
   "reference/file": "file",
@@ -117,7 +118,8 @@ export const NAV_SHORT_TITLE: Record<string, string> = {
   "components/compare": "并排对比",
   "components/timeline": "时间线",
   "components/chart": "条形图表",
-  "components/figure": "分区结构图",
+  "components/compose": "说明图",
+  "reference/compose-icons": "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",

package/app/lib/remark-garden.mjs

@@ -1,3 +1,4 @@
+import { renderCompose } from "../../ui/compose/render.mjs";
 import { diffToNewCode, protectMathIdentifiers } from "../../ui/garden/enhance.mjs";
 import { classifyFence } from "../../ui/garden/parse.mjs";
 
@@ -29,12 +30,58 @@ function fenceNodeToRecord(node) {
   return { lang: String(node.lang || "").toLowerCase(), meta: String(node.meta || ""), info: `${node.lang || ""} ${node.meta || ""}`.trim() };
 }
 
-function rewriteChildren(node) {
+function htmlElement(value) {
+  return { type: "html", value };
+}
+
+const PAIR_ALT = new Set(["ChatGPT 原图", "ChatGPT original"]);
+
+function pairImage(node) {
+  if (node?.type !== "paragraph" || !Array.isArray(node.children)) return null;
+  const images = node.children.filter((child) => child?.type === "image");
+  if (images.length !== 1 || node.children.some((child) => child?.type !== "image" && String(child.value ?? "").trim())) return null;
+  const image = images[0];
+  const alt = String(image.alt ?? "").trim();
+  return PAIR_ALT.has(alt) ? { image, alt } : null;
+}
+
+function element(tag, className, children) {
+  return {
+    type: "paragraph",
+    data: { hName: tag, hProperties: { className: [className] } },
+    children,
+  };
+}
+
+function composePair(image, alt, composeHtml) {
+  return element("div", "g-compose-pair", [
+    element("figure", "g-compose-pair-ref", [
+      element("figcaption", "g-compose-pair-k", [{ type: "text", value: alt }]),
+      image,
+    ]),
+    element("div", "g-compose-pair-live", [
+      element("p", "g-compose-pair-k", [{ type: "text", value: "Garden Compose" }]),
+      htmlElement(composeHtml),
+    ]),
+  ]);
+}
+
+function rewriteChildren(node, nextScope) {
   if (!Array.isArray(node.children)) return;
   const next = [];
   for (let index = 0; index < node.children.length; index += 1) {
     const child = node.children[index];
     const following = node.children[index + 1];
+    const pair = pairImage(child);
+    if (pair && following?.type === "code") {
+      const record = fenceNodeToRecord(following);
+      const kind = classifyFence({ ...record, body: following.value, line: 1, endLine: 1 });
+      if (kind.kind === "garden" && kind.block?.name === "compose" && !kind.block.error && kind.block.mode !== "play") {
+        next.push(composePair(pair.image, pair.alt, renderCompose(kind.block.props, { scope: nextScope() })));
+        index += 1;
+        continue;
+      }
+    }
     if (child?.type === "code" && following?.type === "code" && String(following.lang || "").toLowerCase() === "diff") {
       const current = fenceNodeToRecord(child);
       const kind = classifyFence({ lang: current.lang, meta: current.meta, info: current.info });
@@ -51,6 +98,10 @@ function rewriteChildren(node) {
         next.push(gardenElement({ legacy: true, from: kind.lang || record.lang, suggestion: kind.suggestion }));
         continue;
       }
+      if (kind.kind === "garden" && kind.block?.name === "compose" && !kind.block.error && kind.block.mode !== "play") {
+        next.push(htmlElement(renderCompose(kind.block.props, { scope: nextScope() })));
+        continue;
+      }
       if (kind.kind === "garden" && kind.block) {
         next.push(gardenElement(kind.block));
         continue;
@@ -61,20 +112,25 @@ function rewriteChildren(node) {
   node.children = next;
 }
 
-function walk(node) {
+function walk(node, nextScope) {
   if (!node || typeof node !== "object") return;
   if (node.type === "math" || node.type === "inlineMath") {
     node.value = protectMathIdentifiers(node.value);
   }
   if (Array.isArray(node.children)) {
-    for (const child of node.children) walk(child);
-    rewriteChildren(node);
+    for (const child of node.children) walk(child, nextScope);
+    rewriteChildren(node, nextScope);
   }
 }
 
 export function remarkGarden() {
+  let composeCount = 0;
+  const nextScope = () => {
+    composeCount += 1;
+    return `gc${composeCount}`;
+  };
   return (tree) => {
-    walk(tree);
+    walk(tree, nextScope);
   };
 }