hd-garden 0.14.11 → 0.14.13

package/docs/handbook/components/diagrams/previews/chart.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <path d="M12 8v32h48" stroke="#8a8274"/>
+    <rect x="18" y="28" width="6" height="12" fill="#fffdf8"/>
+    <rect x="28" y="20" width="6" height="20" fill="#fffdf8"/>
+    <rect x="38" y="24" width="6" height="16" fill="#fffdf8"/>
+    <rect x="48" y="12" width="6" height="28" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/code-walkthrough.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="6" y="6" width="36" height="36" rx="2" fill="#fffdf8"/>
+    <path d="M10 12h28M10 18h20M10 24h24M10 30h16"/>
+    <rect x="46" y="14" width="20" height="20" rx="2"/><path d="M50 20h12M50 26h8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/columns-join.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="4" y="10" width="16" height="28" rx="2" fill="#fffdf8"/><path d="M8 16h8M8 21h6"/>
+    <rect x="28" y="8" width="16" height="32" rx="2" fill="#fffdf8"/><path d="M32 16h8M32 21h6"/>
+    <rect x="52" y="10" width="16" height="28" rx="2" fill="#fffdf8"/><path d="M56 16h8M56 21h6"/>
+    <path d="M20 24h8M44 24h8" stroke="#8a8274"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/compare.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="6" y="8" width="28" height="32" rx="2" fill="#fffdf8"/>
+    <rect x="38" y="8" width="28" height="32" rx="2" fill="#fffdf8"/>
+    <path d="M10 14h20M10 20h14M10 26h18M42 14h20M42 20h14M42 26h18"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/converter.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="8" y="16" width="16" height="16" rx="2" fill="#fffdf8"/>
+    <path d="M24 24h10"/><rect x="36" y="6" width="28" height="12" rx="2" fill="#fffdf8"/>
+    <rect x="36" y="20" width="28" height="12" rx="2" fill="#fffdf8"/>
+    <rect x="36" y="34" width="28" height="10" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/facets.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="4" y="14" width="15" height="20" rx="2" fill="#fffdf8"/>
+    <rect x="21" y="14" width="15" height="20" rx="2" fill="#fffdf8"/>
+    <rect x="38" y="14" width="15" height="20" rx="2" fill="#fffdf8"/>
+    <rect x="55" y="14" width="13" height="20" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/fan-out.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="6" y="16" width="16" height="16" rx="2" fill="#fffdf8"/>
+    <path d="M22 24h8"/>
+    <rect x="48" y="4" width="18" height="10" rx="2" fill="#fffdf8"/>
+    <rect x="48" y="19" width="18" height="10" rx="2" fill="#fffdf8"/>
+    <rect x="48" y="34" width="18" height="10" rx="2" fill="#fffdf8"/>
+    <path d="M30 24h10M40 24L48 9M40 24h8M40 24L48 39" stroke="#8a8274"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/icon-rail.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="8" y="8" width="8" height="8" rx="1.5"/><path d="M20 10h28M20 15h20"/>
+    <path d="M10 24h52" stroke="#8a8274" stroke-width="1"/>
+    <rect x="8" y="32" width="8" height="8" rx="1.5"/><path d="M20 34h28M20 39h16"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/inspect-grid.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="12" y="6" width="48" height="36" rx="2"/>
+    <path d="M12 18h48M12 30h48M28 6v36M44 6v36" stroke="#8a8274"/>
+    <rect x="28" y="18" width="16" height="12" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/lanes.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <path d="M8 16h56M8 30h56" stroke="#8a8274"/>
+    <rect x="14" y="10" width="16" height="8" rx="2" fill="#fffdf8"/>
+    <path d="M30 18v8"/><rect x="36" y="24" width="16" height="8" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/layers.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="10" y="4" width="52" height="8" rx="2" fill="#fffdf8"/>
+    <rect x="10" y="14" width="52" height="8" rx="2" fill="#fffdf8"/>
+    <rect x="10" y="24" width="52" height="8" rx="2" fill="#fffdf8"/>
+    <rect x="10" y="34" width="52" height="10" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/other.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <path d="M8 10h28M8 15h20" stroke="#8a8274"/>
+    <rect x="40" y="8" width="24" height="16" rx="2" fill="#fffdf8"/><path d="M44 13h16M44 18h10"/>
+    <rect x="8" y="26" width="22" height="14" rx="2"/><path d="M12 31h14M12 35h9"/>
+    <path d="M36 30h28M36 36h20" stroke="#8a8274"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/plan.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="10" y="8" width="8" height="8" rx="1"/><path d="M24 12h36"/>
+    <rect x="10" y="20" width="8" height="8" rx="1"/><path d="M24 24h28"/>
+    <rect x="10" y="32" width="8" height="8" rx="1"/><path d="M24 36h32"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/sequence.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="6" y="16" width="14" height="16" rx="2" fill="#fffdf8"/>
+    <path d="M22 24h6"/><path d="M25 21.5 L28.5 24 L25 26.5" fill="#3a3428" stroke="none"/>
+    <rect x="29" y="16" width="14" height="16" rx="2" fill="#fffdf8"/>
+    <path d="M45 24h6"/><path d="M48 21.5 L51.5 24 L48 26.5" fill="#3a3428" stroke="none"/>
+    <rect x="52" y="16" width="14" height="16" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/stepper.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="8" y="8" width="56" height="22" rx="2" fill="#fffdf8"/>
+    <path d="M16 32h8M28 32h8M40 32h8" stroke="#8a8274"/>
+    <circle cx="20" cy="40" r="3"/><circle cx="32" cy="40" r="3" fill="#3a3428"/><circle cx="44" cy="40" r="3"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/steps.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <circle cx="14" cy="12" r="5"/><path d="M22 12h40M22 16h24"/>
+    <path d="M14 17v6" stroke="#8a8274"/>
+    <circle cx="14" cy="28" r="5"/><path d="M22 28h40M22 32h20"/>
+    <path d="M14 33v6" stroke="#8a8274"/>
+    <circle cx="14" cy="42" r="4"/><path d="M22 42h28"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/tabs.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="8" y="8" width="16" height="8" rx="2" fill="#fffdf8"/>
+    <rect x="26" y="8" width="16" height="8" rx="2"/>
+    <rect x="44" y="8" width="16" height="8" rx="2"/>
+    <rect x="8" y="16" width="56" height="24" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/timeline.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <path d="M16 6v36" stroke="#8a8274"/>
+    <circle cx="16" cy="12" r="2.5" fill="#3a3428" stroke="none"/><path d="M24 10h32M24 15h20"/>
+    <circle cx="16" cy="28" r="2.5" fill="#3a3428" stroke="none"/><path d="M24 26h32M24 31h16"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/trace.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="8" y="16" width="14" height="14" rx="7" fill="#fffdf8"/>
+    <rect x="29" y="16" width="14" height="14" rx="7"/>
+    <rect x="50" y="16" width="14" height="14" rx="7" fill="#fffdf8"/>
+    <path d="M22 23h7M43 23h7"/>
+    <circle cx="36" cy="23" r="3" fill="#3a3428" stroke="none"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/tunable.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <path d="M12 16h48" stroke="#8a8274"/><circle cx="40" cy="16" r="4" fill="#fffdf8"/>
+    <rect x="16" y="28" width="40" height="12" rx="2" fill="#fffdf8"/><path d="M22 34h20"/>
+  </g></svg>

package/docs/handbook/components/diagrams/previews/two-row.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="216" height="144" viewBox="0 0 72 48"><g fill="none" stroke="#3a3428" stroke-width="1.25">
+    <rect x="6" y="6" width="16" height="12" rx="2" fill="#fffdf8"/><path d="M22 12h6"/><rect x="28" y="6" width="16" height="12" rx="2" fill="#fffdf8"/><path d="M44 12h6"/><rect x="50" y="6" width="16" height="12" rx="2" fill="#fffdf8"/>
+    <rect x="6" y="28" width="16" height="14" rx="2" fill="#fffdf8"/><path d="M22 35h6"/><rect x="28" y="28" width="16" height="14" rx="2" fill="#fffdf8"/><path d="M44 35h6"/><rect x="50" y="28" width="16" height="14" rx="2" fill="#fffdf8"/>
+  </g></svg>

package/docs/handbook/components/diagrams/sequence.md

@@ -0,0 +1,38 @@
+---
+title: "流程图"
+navTitle: "流程图"
+description: "适合说明一件事按什么顺序完成"
+section: diagrams
+order: 71
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![流程图示意](./previews/sequence.svg)
+
+适合说明一件事按什么顺序完成。
+
+没有顺序的条目不要加箭头，也不要靠缩字硬撑手机横排。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「流程图」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「流程图」是推荐起点：只有原文明确顺序才用箭头。阶段短可以从左到右，阶段长或窄屏改为从上到下，不要靠缩字硬撑横排
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/stepper.md

@@ -0,0 +1,38 @@
+---
+title: "逐步演示"
+navTitle: "逐步演示"
+description: "适合让读者停在某一步，看状态怎么变"
+section: diagrams
+order: 171
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![逐步演示示意](./previews/stepper.svg)
+
+适合让读者停在某一步，看状态怎么变。
+
+只有两三个静态阶段时，用分步图或流程图即可。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「逐步演示」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「逐步演示」是推荐起点：让读者按步查看状态如何变化；若只是静态阶段，改用分步图，不要做成逐步演示
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/steps.md

@@ -0,0 +1,38 @@
+---
+title: "分步图"
+navTitle: "分步图"
+description: "适合一步步解释，步骤里可以展开细节"
+section: diagrams
+order: 81
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![分步图示意](./previews/steps.svg)
+
+适合一步步解释，步骤里可以展开细节。
+
+不是按比例表示时间，也不是让读者照着做的清单，更不是让读者逐步查看状态变化。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「分步图」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「分步图」是推荐起点：用分步图把顺序讲清楚，需要时在步骤里展开细节；不要把它写成待办清单或逐步演示，除非材料确实如此
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/tabs.md

@@ -0,0 +1,38 @@
+---
+title: "选项卡"
+navTitle: "选项卡"
+description: "适合几组说明互相独立、一次只看一组"
+section: diagrams
+order: 121
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![选项卡示意](./previews/tabs.svg)
+
+适合几组说明互相独立、一次只看一组。
+
+必须同时比较的事实不要藏进其他组，这不是应用导航。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「选项卡」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「选项卡」是推荐起点：只有各组说明可以分开看时才用选项卡；必须同时比较的内容不要藏起来
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/timeline.md

@@ -0,0 +1,38 @@
+---
+title: "时间线图"
+navTitle: "时间线图"
+description: "适合按日期或时间点排列事件"
+section: diagrams
+order: 101
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![时间线图示意](./previews/timeline.svg)
+
+适合按日期或时间点排列事件。
+
+没有按时间比例展开的进度，不要画成带时长的甘特图。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「时间线图」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「时间线图」是推荐起点：按原文日期或时间点排列事件，保留顺序和日期；不要做成按时长比例的进度
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/trace.md

@@ -0,0 +1,38 @@
+---
+title: "路径标注图"
+navTitle: "路径标注图"
+description: "适合在已有流程或状态图上标出走到哪"
+section: diagrams
+order: 181
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![路径标注图示意](./previews/trace.svg)
+
+适合在已有流程或状态图上标出走到哪。
+
+只需要展示结构，或节点、连线过多时先拆开。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「路径标注图」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「路径标注图」是推荐起点：在已有状态图或流程上标出当前走到哪一步，不要发明原文没有的节点或转移
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/tunable.md

@@ -0,0 +1,38 @@
+---
+title: "参数调节图"
+navTitle: "参数调节图"
+description: "适合让读者改一两个输入，看结果怎么变"
+section: diagrams
+order: 141
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![参数调节图示意](./previews/tunable.svg)
+
+适合让读者改一两个输入，看结果怎么变。
+
+只有一个固定例子要讲，或输入过多时先拆开；一个输入带动多项输出时用换算图。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「参数调节图」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「参数调节图」是推荐起点：写出可调的输入和随之变化的结论，默认状态就要能看懂；不要让作者去写程序
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams/two-row.md

@@ -0,0 +1,38 @@
+---
+title: "上下对照图"
+navTitle: "上下对照图"
+description: "适合把背景过程和重点过程分行对照"
+section: diagrams
+order: 51
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![上下对照图示意](./previews/two-row.svg)
+
+适合把背景过程和重点过程分行对照。
+
+不是在比两套过程、或其实是同一条件下的方案对比时，不要用这种分行对照。
+
+Typora 和 VS Code / Cursor 共用同一份推荐列表。在 `/garden` 里，这一项的名称和适用说明与上面相同。选中后会插入下面的 `garden compose` 说明草稿。补全材料和表达目标，再交给 AI 编译。
+
+推荐说明草稿是起点，不是语法课，也不是唯一合法写法。需要时仍可在同一个 `garden compose` 里搭配 Markdown 或安全 HTML 基础块。
+
+````markdown
+```garden compose
+请根据我提供的材料和表达目标，用 garden compose 做一个「上下对照图」说明图。
+
+我的材料：
+- （粘贴原文条目和需要保留的措辞）
+
+我的表达目标：
+- （读者要一眼看出什么）
+
+请你：
+- 只根据材料组织内容，不要发明事实或结论
+- 自行处理图形语法、布局和手机阅读适配，不要让我学习标签或写 CSS
+- 「上下对照图」是推荐起点：写清上面的背景过程和下面的重点过程各自有哪些阶段，哪一行是重点
+- 推荐图示不是唯一合法写法；需要时仍可在同一 compose 里搭配必要的 Markdown / HTML 基础块
+- 不要另起一种作者围栏或新语法，只使用 garden compose
+```
+````

package/docs/handbook/components/diagrams.md

@@ -0,0 +1,100 @@
+---
+title: "推荐图示"
+navTitle: "推荐图示"
+description: "Typora 和 VS Code 内置推荐图示的名称、示意图、适用场景和推荐说明草稿。"
+section: diagrams
+order: 1
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+
+Typora 和 VS Code / Cursor 的 `/garden` 列表来自同一份内置推荐列表，目前共 21 项：20 种常用图示，最后一项是「其他」。选中一项会插入统一的 `garden compose` 说明草稿，不是另一种作者围栏。推荐说明草稿用来写清材料和表达目标，不是语法课。
+
+「其他」用于现成图示无法表达、或需要自由组合图文的内容。不必把下面的列表当成合法白名单。
+
+入口和编译步骤见 [Compose](/garden/components/compose) 与 [语法检查与快捷输入](/garden/workflow)。
+
+![关联图示意](./diagrams/previews/columns-join.svg)
+
+**[关联图](/garden/components/diagrams/columns-join/)** 适合说明两边如何通过中间一项关联起来。
+
+![发散图示意](./diagrams/previews/fan-out.svg)
+
+**[发散图](/garden/components/diagrams/fan-out/)** 适合说明先到一处，再同时连到好几处。
+
+![分层图示意](./diagrams/previews/layers.svg)
+
+**[分层图](/garden/components/diagrams/layers/)** 适合说明自上而下的层次，不必按顺序走完。
+
+![并列图示意](./diagrams/previews/facets.svg)
+
+**[并列图](/garden/components/diagrams/facets/)** 适合说明一件事的几个方面，没有先后顺序。
+
+![上下对照图示意](./diagrams/previews/two-row.svg)
+
+**[上下对照图](/garden/components/diagrams/two-row/)** 适合把背景过程和重点过程分行对照。
+
+![图文列表示意](./diagrams/previews/icon-rail.svg)
+
+**[图文列表](/garden/components/diagrams/icon-rail/)** 适合逐条说明互不依赖的内容。
+
+![流程图示意](./diagrams/previews/sequence.svg)
+
+**[流程图](/garden/components/diagrams/sequence/)** 适合说明一件事按什么顺序完成。
+
+![分步图示意](./diagrams/previews/steps.svg)
+
+**[分步图](/garden/components/diagrams/steps/)** 适合一步步解释，步骤里可以展开细节。
+
+![对比图示意](./diagrams/previews/compare.svg)
+
+**[对比图](/garden/components/diagrams/compare/)** 适合比较两三种方案在同一条件下的差异。
+
+![时间线图示意](./diagrams/previews/timeline.svg)
+
+**[时间线图](/garden/components/diagrams/timeline/)** 适合按日期或时间点排列事件。
+
+![时序图示意](./diagrams/previews/lanes.svg)
+
+**[时序图](/garden/components/diagrams/lanes/)** 适合说明谁在什么时候向谁发了什么。
+
+![选项卡示意](./diagrams/previews/tabs.svg)
+
+**[选项卡](/garden/components/diagrams/tabs/)** 适合几组说明互相独立、一次只看一组。
+
+![数据图示意](./diagrams/previews/chart.svg)
+
+**[数据图](/garden/components/diagrams/chart/)** 适合把已有数字画成柱状、折线或占比。
+
+![参数调节图示意](./diagrams/previews/tunable.svg)
+
+**[参数调节图](/garden/components/diagrams/tunable/)** 适合让读者改一两个输入，看结果怎么变。
+
+![换算图示意](./diagrams/previews/converter.svg)
+
+**[换算图](/garden/components/diagrams/converter/)** 适合一个输入同时算出好几项结果。
+
+![代码走查示意](./diagrams/previews/code-walkthrough.svg)
+
+**[代码走查](/garden/components/diagrams/code-walkthrough/)** 适合一行行看代码执行到哪、变量是多少。
+
+![逐步演示示意](./diagrams/previews/stepper.svg)
+
+**[逐步演示](/garden/components/diagrams/stepper/)** 适合让读者停在某一步，看状态怎么变。
+
+![路径标注图示意](./diagrams/previews/trace.svg)
+
+**[路径标注图](/garden/components/diagrams/trace/)** 适合在已有流程或状态图上标出走到哪。
+
+![步骤清单示意](./diagrams/previews/plan.svg)
+
+**[步骤清单](/garden/components/diagrams/plan/)** 适合读者照着一项项做，并回来查看进度。
+
+![格子图示意](./diagrams/previews/inspect-grid.svg)
+
+**[格子图](/garden/components/diagrams/inspect-grid/)** 适合标出二维结构里哪几格特别、为什么。
+
+![其他示意](./diagrams/previews/other.svg)
+
+**[其他](/garden/components/diagrams/other/)** 适合现成图形无法表达、需要自由组合图文的内容。

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

@@ -6,7 +6,7 @@ section: components
 order: 43
 ---
 
-单独占一段的网址，或链接末尾紧跟 `{card}`，会渲染成链接卡片（同站与外站同一套逻辑）。正文里带标题的普通链接不会变成卡片，例如 [Typora](https://typora.io/)：外站只在文字前加站点 Favicon，右上角标 `↗`，图标与第一个字留在同一行；同站标题链接仍在站内跳转。
+单独占一段的网址，或链接末尾紧跟 `{card}`，会渲染成链接卡片（同站与外站同一套逻辑）。例外：单独一行的可播放 YouTube / Bilibili 视频链接会变成站内播放器，见[写文章](/garden/writing)；若仍要卡片，在链接后紧跟 `{card}`。正文里带标题的普通链接不会变成卡片，例如 [Typora](https://typora.io/)：外站只在文字前加站点 Favicon，右上角标 `↗`，图标与第一个字留在同一行；同站标题链接仍在站内跳转。
 
 - **什么时候用**：希望读者点开之前先看到网站名、标题和简介。
 - **什么时候不用**：句子里只要标出出处时用[来源胶囊](/garden/components/source)；要自己写几条要点时用[知识卡片](/garden/components/compose)。

package/docs/handbook/components.md

@@ -9,5 +9,6 @@ order: 30
 文章布局、富文本、语义场景与交互说明统一使用一个 `garden compose` 围栏。在入口内部选择并组合组件；普通 Markdown 已能表达清楚时不用增加组件。
 
 - [Compose](/garden/components/compose)
+- [推荐图示](/garden/components/diagrams)
 - [Compose reference](/garden/reference/compose)
 - [Icons](/garden/reference/compose-icons)

package/docs/handbook/en/components/compose.md

@@ -9,7 +9,9 @@ badge: compose
 
 `garden compose` is the single Garden author entry. Inside it, combine Markdown, safe HTML content islands, layout, resources, files, relations, selectable cards, and Play interactions. See the [component reference](/garden/en/reference/compose) for capabilities, content boundaries, and contextual defaults; `npx garden ui schema` is authoritative for supported fields.
 
-To ask AI for a structure diagram, type `/garden` and pick **compose (idea)**. That inserts a `garden compose` fence. Write the structure in plain language, then ask the AI to compile the post. It keeps your words in `<intent>` and builds the diagram from Markdown leaves plus catalog tags.
+To ask AI for a structure diagram, type `/garden` and pick a figure type (the last item is Other). That inserts a `garden compose` fence with a draft brief for that figure. Fill in your material and goal, then ask the AI to compile the post. It keeps your words in `<intent>` and builds the diagram from Markdown leaves plus catalog tags.
+
+For every built-in figure, including its name, schematic, use case, and recommended brief, see [Recommended figures](/garden/en/components/diagrams).
 
 ## How to write