hd-garden 0.10.4 → 0.12.0

package/app/styles/a2.css

@@ -73,8 +73,7 @@ body {
 .g-card,
 .g-timeline,
 .g-sandbox,
-.g-html,
-.g-figure {
+.g-html {
   box-shadow: none;
 }
 
@@ -289,6 +288,17 @@ body {
   max-width: var(--col);
 }
 
+/* The compare post puts two wide diagrams side by side. */
+@media (min-width: 1260px) {
+  .post-reading-page:has(.g-compose-pair) .article-reading-layout {
+    grid-template-columns: 24px minmax(0, 1fr) var(--rail);
+  }
+
+  .post-reading-page:has(.g-compose-pair) .article-reading-column {
+    max-width: none;
+  }
+}
+
 .post-reading-page .article-reading-layout > .toc {
   grid-column: 3;
   grid-row: 1;
@@ -785,6 +795,17 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   background: transparent;
 }
 
+.table-wrap td .markdown-image-trigger {
+  margin: 0;
+}
+
+.table-wrap td .markdown-image-trigger img {
+  width: 280px;
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
 @media (min-width: 900px) {
   .ux-wide {
     margin-left: calc(-1 * var(--wl, 0px)) !important;
@@ -885,8 +906,6 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
 .g-cmp,
 .g-timeline,
 .g-chart,
-.g-figure,
-.g-explore,
 .g-html,
 .g-idea,
 .g-legacy,
@@ -895,77 +914,9 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   box-shadow: none;
 }
 
-.g-explore {
-  border: 1px solid var(--rule);
-  border-radius: var(--r);
-  padding: 12px 14px 14px;
-  background: transparent;
-  max-width: 100%;
-}
-
-.g-explore [role="tablist"] {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 0;
-  padding: 0;
-}
-
-.g-explore [role="tab"] {
-  font: 500 14px / 1 var(--sans);
-  padding: 9px 12px;
-  min-height: 44px;
-  border-radius: 999px;
-  border: 1px solid var(--rule);
-  background: transparent;
-  color: var(--soft);
-  cursor: pointer;
-}
-
-.g-explore [role="tab"][aria-selected="true"] {
-  border-color: var(--blue);
-  color: var(--blue);
-  background: var(--blue-tint);
-}
-
-.dx-wrap {
-  overflow: visible;
-  margin-top: 10px;
-  max-width: 100%;
-}
-
-.dx-wrap svg {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  height: auto;
-}
-
-.g-explore:not([data-sel="all"]) .dx-wrap [data-p]:not(.on),
-.g-explore:not([data-sel="all"]) .dx-wrap text:not(.on) {
-  opacity: 0.22;
-}
-
-.g-explore .on {
-  opacity: 1;
-}
-
-.dx-exp p {
-  margin: 10px 0 0;
-}
-
-.g-explore figcaption {
-  font-size: 13px;
-  color: var(--muted);
-  margin-top: 8px;
-  text-align: left;
-}
-
 .g-sandbox,
 .g-play,
-.g-html,
-.g-explore,
-.dx-wrap {
+.g-html {
   max-width: 100%;
 }
 
@@ -973,7 +924,6 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
 .g-stat,
 .g-cmp,
 .g-timeline,
-.g-figure,
 .g-html {
   border: 1px solid var(--rule);
   border-radius: var(--r);
@@ -982,8 +932,7 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
 
 .g-card,
 .g-cmp,
-.g-html,
-.g-figure {
+.g-html {
   padding: 14px 16px;
 }
 
@@ -1163,7 +1112,6 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   min-width: 3px;
 }
 
-.g-figure svg,
 .g-mermaid svg,
 .dx-svg {
   display: block;
@@ -1172,16 +1120,6 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   height: auto;
 }
 
-.g-figure:not([data-sel="all"]) [data-p]:not(.on),
-.g-figure:not([data-sel="all"]) text:not(.on) {
-  opacity: 0.22;
-}
-
-.g-figure [data-p].on,
-.g-figure text.on {
-  opacity: 1;
-}
-
 .g-mermaid {
   margin: 28px 0;
   padding: 16px;
@@ -1399,19 +1337,10 @@ html[data-theme="dark"] .markdown-body > p > img:not([class]) {
   padding-right: 44px;
 }
 
-.ux-fs:not(.g-sandbox) > .ux-fsbar + .g-explore {
-  padding-right: 14px;
-}
-
 .ux-fs:not(.g-sandbox) > .ux-fsbar + .g-sandbox {
   padding-right: 0;
 }
 
-.ux-fs:not(.g-sandbox) > .ux-fsbar + .g-explore > [role="tablist"] {
-  padding-right: 44px;
-  box-sizing: border-box;
-}
-
 .ux-fs:fullscreen,
 .ux-fs.ux-fs-on {
   background: var(--paper);
@@ -1793,13 +1722,6 @@ html[data-theme="dark"] .gf-scrim { background: rgb(0 0 0 / 45%); }
   font-family: var(--sans);
 }
 
-.garden-doc-page .g-explore:not([data-sel="all"]) .dx-wrap [data-p]:not(.on),
-.garden-doc-page .g-explore:not([data-sel="all"]) .dx-wrap text:not(.on),
-.garden-doc-page .g-figure:not([data-sel="all"]) [data-p]:not(.on),
-.garden-doc-page .g-figure:not([data-sel="all"]) text:not(.on) {
-  opacity: 0.56;
-}
-
 .garden-doc-page > .toc {
   margin-top: 8px;
   position: sticky;
@@ -2641,15 +2563,6 @@ html[data-theme="dark"] .ref-demo { --rd-s: #262624; --rd-p: #1f1e1d; --rd-i: #e
   .ref-demo-in .toc-mobile-trigger { opacity: 0; visibility: hidden; pointer-events: none; }
 }
 
-/* figure reference page: the drawing needs room, so the example stacks
-   (preview on top, full width; code below). Scoped to the reference demo;
-   figures in articles are untouched. */
-@media (min-width: 1024px) {
-  .ref-demo[data-name="figure"] { grid-template-columns: minmax(0, 1fr); background: var(--rd-p); }
-  .ref-demo[data-name="figure"] .ref-pane[data-p="v"] { grid-column: 1; grid-row: 1; }
-  .ref-demo[data-name="figure"] .ref-pane[data-p="c"] { grid-column: 1; grid-row: 2; background: var(--rd-s); border-top: 1px solid var(--rd-r); }
-}
-
 /* ===== v0.10.1 tip keep (after git checkout of a2.css from 9a80f7e5) ===== */
 
 /* List pages: PageIntro rides on .sh-head; keep eyebrow in the same vertical rhythm. */

package/app/styles/tokens.css

@@ -33,6 +33,9 @@
   --accent-soft: var(--blue-tint);
   --selection: #e8e5db;
   --hl: #ffe58f;
+  /* Two lane-arrow emphases. Same hues as the note and tip callouts, not a second palette. */
+  --flow: #2c55b4;
+  --flow-back: #2d6a3e;
   --red: #d82d48;
   --red-text: #c2263f;
   --red-tint: #fbeef0;
@@ -94,6 +97,8 @@ html[data-theme="dark"] {
   --accent-soft: var(--blue-tint);
   --selection: rgb(238 236 231 / 18%);
   --hl: #5e4e17;
+  --flow: #93b2f4;
+  --flow-back: #8fcb9f;
   --red: #f29aab;
   --red-text: #f29aab;
   --red-tint: rgb(242 154 171 / 12%);

package/docs/handbook/ai-writing.md

@@ -21,7 +21,7 @@ order: 2
 ```
 ````
 
-草稿（`draft: true`）里可以保留未编译的想法；非草稿文章里还有未编译的想法时，`npx garden ui check` 和 `npx garden check` 都会报 `garden-idea` 错误。Agent 会根据内容把想法编译成 `garden interactive`、`card`、`stat`、`compare` 等内置组件，或者在一段话就能说清时直接写回普通段落。
+草稿（`draft: true`）里可以保留未编译的想法；非草稿文章里还有未编译的想法时，`npx garden ui check` 和 `npx garden check` 都会报 `garden-idea` 错误。Agent 会根据内容把想法编译成 `garden compose`、`card`、`stat`、`compare` 等内置组件，或者在一段话就能说清时直接写回普通段落。
 
 ## 2. 随包安装的三个 skill
 
@@ -112,8 +112,8 @@ npx garden editors install --typora
 
 不借助 AI 手写组件时，可以直接使用包内自带的模板与代码片段：
 
-- `make new` 创建的草稿底部自带一段 `<!-- 组件速查 ... -->` 注释，包含想法块和 12 个组件的示例，写完可直接删掉。
-- `templates/garden-blocks.md` 汇总了想法块与 12 个组件的适用场景（`when` / `whenNot`）和可复制示例；macOS 与 Typora / Alfred 用户可导入 `templates/garden-snippets.plist`，输入 `;gidea`（或 `;garden想法`）、`;gcard`、`;gstat`、`;gcompare`、`;gtimeline`、`;gchart`、`;gfigure`、`;ghtml`、`;ginteractive`、`;gfile`、`;grel`、`;glist`、`;gchoice` 即可展开对应围栏。
+- `make new` 创建的草稿底部自带一段 `<!-- 组件速查 ... -->` 注释，包含想法块和各个组件的示例，写完可直接删掉。
+- `templates/garden-blocks.md` 汇总了想法块与各个组件的适用场景（`when` / `whenNot`）和可复制示例；macOS 与 Typora / Alfred 用户可导入 `templates/garden-snippets.plist`，输入 `;gidea`（或 `;garden想法`）、`;gcard`、`;gstat`、`;gcompare`、`;gtimeline`、`;gchart`、`;gcompose`、`;ghtml`、`;ginteractive`、`;gfile`、`;grel`、`;glist`、`;gchoice` 即可展开对应围栏。`;gcompose` 展开的是带一句白话的 `garden compose`。
 - 编辑器插件的用法见上一节。`npx garden ui catalog` 在本地生成 `.garden/ui-catalog.html` 离线组件画廊。
 
 ## 8. 可选的独立管理后台

package/docs/handbook/components/compose.md

@@ -0,0 +1,134 @@
+---
+title: 说明图（compose）
+navTitle: 说明图
+description: 在文章里写几句白话，让 AI 拼出静态说明图。
+section: components
+order: 36
+badge: compose
+---
+
+写文章想画一张结构图时，输入 `/garden` 选「compose（想法）」。文章里会插入一个 `garden compose` 围栏。你在里面用白话写清结构，再对 AI 说「编译这篇」，AI 就会把这句话留在 `<intent>` 里，并用 Markdown 叶子和组件标签拼出静态说明图。
+
+## 怎么写
+
+围栏里只写你想让读者看见的结构，不要写样式。
+
+把四件事写清楚：
+
+- **分几块**：是三列并排、从上到下五层，还是上下两行。
+- **每块叫什么**：用图上要摆出来的短词。解释放在名字下面那一行，别把一整句话当标题。
+- **谁连谁**：谁先到谁、从一处散开，还是几处收到一起。没有先后顺序，就直接写「这几块没有先后」。
+- **哪块是重点**：直接点名，比如「中间那列是重点」「下面一行才是重点」。
+
+不要写颜色、圆角、灰胶囊、字重、间距、阴影、要不要撑满。外观由组件默认样式决定，写了反而乱。
+
+**完整标签与属性**见 [组件参考 · compose](/garden/reference/compose)；**全部图标名**见 [compose 图标](/garden/reference/compose-icons)。
+
+## 写法对照
+
+写围栏时，最常见的失误有两个：一是只写一个主题词，没给结构；二是把精力花在规定颜色、圆角和字重上。下面按五种常见结构，列出改写后的写法。
+
+**三列并排，中间接起来**
+
+````markdown
+```garden compose
+三列：User 下面是 Alice、Bob；Role 下面是管理员、审核员；
+Permission 下面是 orders:read、orders:approve。
+Role 在中间，把用户和权限接起来。Role 是重点。
+```
+````
+
+**先到一处，再散开**
+
+````markdown
+```garden compose
+用户浏览器先到身份提供方，再同时连到 HR、Finance、Project 三个系统。
+三个系统都信任同一个身份提供方。身份提供方是重点。
+```
+````
+
+**自上而下分层**
+
+````markdown
+```garden compose
+从上到下五层：浏览器、身份服务、BFF、业务服务、授权决策。
+身份服务和授权决策是重点，其余是经过的路径。
+不是每次请求都按这个顺序走完。
+```
+````
+
+**一件事的多个切面**
+
+````markdown
+```garden compose
+用户发起请求后，先看四件事：认证（你是谁）、凭证（怎么证明）、
+授权（有没有权）、验证（数据合不合法）。
+落到业务和存储时，再看传输和保密。这六块没有严格的先后。
+```
+````
+
+**上下两行对比**
+
+````markdown
+```garden compose
+上面一行是常规交付：理解需求 → 设计方案 → 开发上线。
+下面一行是探索循环：提出假设 → 低成本验证 → 迭代或放弃。
+上面是背景，下面一行才是重点。
+```
+````
+
+## 图标与表面
+
+状态符号用 `<icon name="check-circle"/>` 一类具名图标，不要塞 emoji。小格子、浅底、圆角用 `padding`、`background`、`radius` 组合，不要为单张图发明专用标签。
+
+## 一张示例
+
+下面只留一张图；更多对照见仓库示例文，标签全表见参考页。
+
+```garden compose
+<intent>
+三列：User 下面是 Alice 和 Bob，Role 下面是管理员和审核员，Permission 下面是 orders:read 和 orders:approve。Role 在中间，把用户和权限接起来。Role 是要先看见的一层。
+</intent>
+<row align="center">
+  <stack align="center">
+    <title>User</title>
+    <text>Alice</text>
+    <text>Bob</text>
+  </stack>
+  <band tone="accent" align="center">
+    <title>Role</title>
+    <text>管理员</text>
+    <text>审核员</text>
+  </band>
+  <stack align="center">
+    <title>Permission</title>
+    <text>orders:read</text>
+    <text>orders:approve</text>
+  </stack>
+</row>
+<join>角色连接用户和权限</join>
+<text tone="muted" align="center">概念关系：User ↔ Role ↔ Permission</text>
+```
+
+## 可调参数（play）
+
+静态说明图还差一步、读者要拧参数时，仍写 `garden compose`：
+
+- `{@body const [n, setN] = DIL.useState(3)}` 声明状态
+- `{@body const total = n * 24}` 派生值
+- `{total}` / `value={n}` 插值
+- `{#if …}{:else}{/if}`、`{#each … as item, i}{/each}` 控制流
+- 小写控件：`<slider>`、`<choice>`、`<button>`、`<pie>` / `<chart>`、`<stat>`
+
+旧的 `garden interactive` 与 PascalCase 仅作兼容。完整映射见仓库 `docs/compose-dil.md`。
+
+```garden compose #compose-play-demo
+caption: 拧一下席位，看月费。
+intent: |
+  让读者调席位，看月费怎么变。
+---
+{@body const [seats, setSeats] = DIL.useState(3)}
+{@body const total = seats * 24}
+<slider min={1} max={12} value={seats} onChange={setSeats} label="席位" />
+<stat label="月费" value={total} unit="USD" />
+```

package/docs/handbook/components/html.md

@@ -34,7 +34,7 @@ code: |
 ```
 
 - **什么时候用**：内置组件画不出来的画布动画、物理模拟或独立小工具。
-- **什么时候不用**：只需要拖动滑杆算公式时用[可调公式与参数](/garden/components/interactive)；静态图表或结构图优先用对应组件。
+- **什么时候不用**：只需要拖动滑杆算公式时用[可调公式与参数](/garden/components/interactive)；说明图用 [compose](/garden/components/compose)。
 
 可以这样对 AI 说：
 

package/docs/handbook/components/image.md

@@ -9,7 +9,7 @@ order: 45
 图片单独成段时会包进图框，并在下方显示图注。
 
 - **什么时候用**：这张图属于文章，读者需要看到图下说明。
-- **什么时候不用**：只是装饰时，把 `alt` 写成以 `image`、`截图` 或 `img` 开头的占位词，这样不会出现图注。要按部分高亮说明时用[分区结构图](/garden/components/figure)；要提供下载时用[文件下载与预览](/garden/components/file)。
+- **什么时候不用**：只是装饰时，把 `alt` 写成以 `image`、`截图` 或 `img` 开头的占位词，这样不会出现图注。要按部分点开说明时用[说明图](/garden/components/compose)；要提供下载时用[文件下载与预览](/garden/components/file)。
 
 长文 `content/posts/my-post.md` 的配图放在同名目录 `content/posts/my-post/`。正文用 Markdown 图片语法引用，地址写成 `./my-post/diagram.svg`，方括号里的 `alt` 写成图注。
 

package/docs/handbook/components/interactive.md

@@ -7,7 +7,10 @@ order: 38
 badge: interactive
 ---
 
-```garden interactive #reading-time
+> **已废弃。** 新文章请写 [`compose`](/garden/components/compose)，用 ChatGPT 同款 DIL（`{@body}` / `{expr}` / `{#if}` / `{#each}` 与小写标签）。旧的 `garden interactive` 围栏仍会当作 compose play 解析以兼容，之后会像 `figure` 一样删掉。
+
+
+```garden compose #reading-time
 caption: 示例：按字数、阅读速度和配图数估算一篇文章的阅读时间。数字只用来演示组件，不是统计结果。
 ---
 <State words={6000} speed={400} images={8} />

package/docs/handbook/components/link-card.md

@@ -47,4 +47,4 @@ https://spec.commonmark.org/
 
 随想 Front Matter 里的 `type: link` 用你写的 `title`、`description` 和 `image`，字段见[写文章与随想](/garden/writing)。
 
-这不是 `garden` 围栏，没有字段表。12 个围栏组件的字段见[组件参考](/garden/reference)。
+这不是 `garden` 围栏，没有字段表。围栏组件的字段见[组件参考](/garden/reference)。

package/docs/handbook/components.md

@@ -1,7 +1,7 @@
 ---
 title: 组件总览
 navTitle: 组件总览
-description: 12 个 garden 围栏，以及链接卡片、来源胶囊和本地图片的效果预览。
+description: garden 围栏的效果预览，以及链接卡片、来源胶囊和本地图片。
 section: components
 order: 30
 ---
@@ -74,39 +74,27 @@ data:
     y: 1340
 ```
 
-## [分区结构图 · figure](/garden/components/figure)
-
-```garden figure
-svg: |
-  <svg viewBox="0 0 560 194" xmlns="http://www.w3.org/2000/svg" font-family="var(--sans)" style="max-width: 380px; margin-inline: auto">
-    <rect data-p="sync" x="2" y="4" width="180" height="186" rx="16" fill="var(--card)" stroke="var(--rule-strong)" stroke-width="2.5"/>
-    <text data-p="sync" x="92" y="42" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">1. garden</text>
-    <text data-p="sync" x="92" y="72" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">sync</text>
-    <text data-p="sync" x="92" y="108" text-anchor="middle" font-size="24" fill="var(--muted)">解析</text>
-    <text data-p="sync" x="92" y="137" text-anchor="middle" font-size="24" fill="var(--muted)">Markdown 与</text>
-    <text data-p="sync" x="92" y="166" text-anchor="middle" font-size="24" fill="var(--muted)">图片尺寸</text>
-    <path d="M183.5 97 H188.5" stroke="var(--muted)" stroke-width="2.5"/>
-    <rect data-p="build" x="190" y="4" width="180" height="186" rx="16" fill="var(--card)" stroke="var(--rule-strong)" stroke-width="2.5"/>
-    <text data-p="build" x="280" y="42" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">2. garden</text>
-    <text data-p="build" x="280" y="72" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">build</text>
-    <text data-p="build" x="280" y="108" text-anchor="middle" font-size="24" fill="var(--muted)">生成静态页面</text>
-    <text data-p="build" x="280" y="137" text-anchor="middle" font-size="24" fill="var(--muted)">与搜索索引</text>
-    <path d="M371.5 97 H376.5" stroke="var(--muted)" stroke-width="2.5"/>
-    <rect data-p="validate" x="378" y="4" width="180" height="186" rx="16" fill="var(--card)" stroke="var(--rule-strong)" stroke-width="2.5"/>
-    <text data-p="validate" x="468" y="42" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">3. pages:</text>
-    <text data-p="validate" x="468" y="72" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">validate</text>
-    <text data-p="validate" x="468" y="108" text-anchor="middle" font-size="24" fill="var(--muted)">检查导出目录</text>
-  </svg>
-parts:
-  - id: sync
-    label: 1. 同步内容
-    text: 扫描正文与附件，生成站点数据。
-  - id: build
-    label: 2. 构建页面
-    text: 预渲染所有页面路由，输出 RSS、sitemap 与搜索文件。
-  - id: validate
-    label: 3. 导出校验
-    text: 确认导出目录结构完整。
+## [说明图 · compose](/garden/components/compose)
+
+```garden compose
+<intent>
+上面一行是交付顺序：理解需求、设计方案、开发上线。下面一行才是要强调的决策循环：提出假设、低成本验证、迭代或放弃。上面是背景，下面是重点。
+</intent>
+<row align="center">
+  <title align="center">理解需求</title>
+  <arrow dir="right"/>
+  <title align="center">设计方案</title>
+  <arrow dir="right"/>
+  <title align="center">开发上线</title>
+</row>
+<divider/>
+<row align="center">
+  <pill tone="muted">提出假设</pill>
+  <arrow dir="right"/>
+  <pill tone="muted">低成本验证</pill>
+  <arrow dir="right"/>
+  <pill tone="muted">迭代或放弃</pill>
+</row>
 ```
 
 ## [嵌入网页片段 · html](/garden/components/html)
@@ -139,7 +127,7 @@ code: |
 
 ## [可调公式与参数 · interactive](/garden/components/interactive)
 
-```garden interactive #overview-reading
+```garden compose #overview-reading
 caption: 示例：按字数和阅读速度估算阅读时间。
 ---
 <State words={6000} speed={400} />

package/docs/handbook/design.md

@@ -33,40 +33,31 @@ Garden 的文章页面围绕长文阅读体验做了几项自动化处理。这
 
 在运行 `npx garden sync` 时，构建脚本会直接解析本地图片（PNG、JPEG、WebP、GIF、SVG）的像素宽高并写入 `.garden/generated-content.ts` 的 `imageSizes` 表：
 
-```garden figure
-caption: 点击上方按钮查看图片从构建到渲染的三个阶段
-svg: |
-  <svg viewBox="0 0 560 194" xmlns="http://www.w3.org/2000/svg" font-family="var(--sans)" style="max-width: 380px; margin-inline: auto">
-    <rect data-p="sync" x="2" y="4" width="180" height="186" rx="16" fill="var(--card)" stroke="var(--rule-strong)" stroke-width="2.5"/>
-    <text data-p="sync" x="92" y="42" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">1. 构建期</text>
-    <text data-p="sync" x="92" y="72" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">读取尺寸</text>
-    <text data-p="sync" x="92" y="108" text-anchor="middle" font-size="24" fill="var(--muted)">写入 width /</text>
-    <text data-p="sync" x="92" y="137" text-anchor="middle" font-size="24" fill="var(--muted)">height 与 --wl</text>
-    <path d="M183.5 97 H188.5" stroke="var(--muted)" stroke-width="2.5"/>
-    <rect data-p="measure" x="190" y="4" width="180" height="186" rx="16" fill="var(--card)" stroke="var(--rule-strong)" stroke-width="2.5"/>
-    <text data-p="measure" x="280" y="42" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">2. 客户端</text>
-    <text data-p="measure" x="280" y="72" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">测量拓宽</text>
-    <text data-p="measure" x="280" y="108" text-anchor="middle" font-size="24" fill="var(--muted)">按当前视口</text>
-    <text data-p="measure" x="280" y="137" text-anchor="middle" font-size="24" fill="var(--muted)">调整宽图</text>
-    <text data-p="measure" x="280" y="166" text-anchor="middle" font-size="24" fill="var(--muted)">与目录</text>
-    <path d="M371.5 97 H376.5" stroke="var(--muted)" stroke-width="2.5"/>
-    <rect data-p="dark" x="378" y="4" width="180" height="186" rx="16" fill="var(--card)" stroke="var(--rule-strong)" stroke-width="2.5"/>
-    <text data-p="dark" x="468" y="42" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">3. 深色衬底</text>
-    <text data-p="dark" x="468" y="72" text-anchor="middle" font-size="24" font-weight="600" fill="var(--ink)">与灯箱</text>
-    <text data-p="dark" x="468" y="108" text-anchor="middle" font-size="24" fill="var(--muted)">深色垫</text>
-    <text data-p="dark" x="468" y="137" text-anchor="middle" font-size="24" fill="var(--muted)">#faf9f5 ·</text>
-    <text data-p="dark" x="468" y="166" text-anchor="middle" font-size="24" fill="var(--muted)">点击放大</text>
-  </svg>
-parts:
-  - id: sync
-    label: 1. 构建期读取尺寸
-    text: 服务端生成的 HTML 已经带有图片的 `width`、`height`、`data-nw`、`data-bw` 以及宽图的初始 `--wl` / `--wr`，图片尚未下载完成时也不会把下方文字顶得跳动。
-  - id: measure
-    label: 2. 客户端测量拓宽
-    text: 浏览器加载后，`ArticleMeasure` 根据当前窗口的实际宽度重新计算拓宽边距，并在滚动时实时判断宽图是否与右侧目录重叠。
-  - id: dark
-    label: 3. 深色衬底与灯箱
-    text: "正文配图点击后可在当前页打开灯箱大图（按 `Esc` 或点击背景关闭）；深色模式下自动为配图设置 `--image-backing: #faf9f5` 背景。"
+```garden compose
+<intent>
+图片从构建到渲染分三步。点一步，看这一阶段做什么。
+</intent>
+# 图片从构建到渲染
+
+点一步，看这一阶段做什么
+
+<steps>
+  <step id="sync">
+    <title>构建期读取尺寸</title>
+    <text>写入宽高，避免文字跳动</text>
+    <note>服务端生成的 HTML 已经带有图片的 width、height 和宽图边距。图片还没下载完时，下方文字也不会被顶得跳动。</note>
+  </step>
+  <step id="measure">
+    <title>客户端测量拓宽</title>
+    <text>按当前视口调整宽图与目录</text>
+    <note>浏览器加载后，ArticleMeasure 按当前窗口宽度重算拓宽边距，并在滚动时判断宽图是否挡住右侧目录。</note>
+  </step>
+  <step id="dark">
+    <title>深色衬底与灯箱</title>
+    <text>浅色纸底垫住黑线，点击可以放大</text>
+    <note>正文配图可以在当前页打开灯箱。深色模式下配图使用浅色纸底，不反色。</note>
+  </step>
+</steps>
 ```
 
 ## 4. 深色模式配图衬底与暖纸墨色

package/docs/handbook/en/ai-writing.md

@@ -21,7 +21,7 @@ Let the reader drag daily word count and writing days per week to see how many w
 ```
 ````
 
-Draft posts (`draft: true`) may keep uncompiled idea fences; in non-draft posts, both `npx garden ui check` and `npx garden check` report a `garden-idea` error. Depending on the content, the Agent compiles the idea into a built-in component (`garden interactive`, `card`, `stat`, `compare`, and others) or replaces it with plain prose when a paragraph is clearer.
+Draft posts (`draft: true`) may keep uncompiled idea fences; in non-draft posts, both `npx garden ui check` and `npx garden check` report a `garden-idea` error. Depending on the content, the Agent compiles the idea into a built-in component (`garden compose`, `card`, `stat`, `compare`, and others) or replaces it with plain prose when a paragraph is clearer.
 
 ## 2. Three Bundled Skills
 
@@ -106,8 +106,8 @@ A component then takes four steps:
 
 When writing components by hand without AI, you can use the templates and snippets shipped in the package:
 
-- Every draft created by `make new` includes an HTML comment at the bottom with copy-ready examples for idea fences and all 12 components; delete the comment whenever you are done.
-- `templates/garden-blocks.md` lists `when` / `whenNot` guidance and copyable templates for every block; macOS, Typora, and Alfred users can import `templates/garden-snippets.plist` to expand `;gidea`, `;gcard`, `;gstat`, `;gcompare`, `;gtimeline`, `;gchart`, `;gfigure`, `;ghtml`, `;ginteractive`, `;gfile`, `;grel`, `;glist`, and `;gchoice`.
+- Every draft created by `make new` includes an HTML comment at the bottom with copy-ready examples for idea fences and the built-in components; delete the comment whenever you are done.
+- `templates/garden-blocks.md` lists `when` / `whenNot` guidance and copyable templates for every block; macOS, Typora, and Alfred users can import `templates/garden-snippets.plist` to expand `;gidea`, `;gcard`, `;gstat`, `;gcompare`, `;gtimeline`, `;gchart`, `;gcompose`, `;ghtml`, `;ginteractive`, `;gfile`, `;grel`, `;glist`, and `;gchoice`. `;gcompose` expands to a `garden compose` fence with one sentence.
 - Editor plugin usage is in the previous section. `npx garden ui catalog` writes an offline component catalog at `.garden/ui-catalog.html`.
 
 ## 8. Optional Standalone Admin