hd-garden 0.14.12 → 0.14.13

package/docs/handbook/en/components/diagrams/chart.md

@@ -0,0 +1,40 @@
+---
+title: "Chart"
+navTitle: "Chart"
+description: "Use this to turn numbers you already have into bars, lines, or shares"
+section: diagrams
+order: 131
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Chart](../../../components/diagrams/previews/chart.svg)
+
+Use this to turn numbers you already have into bars, lines, or shares.
+
+Do not invent data. If the result should change with an input, prefer a tunable chart.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Chart" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Chart" is the recommended starting point: Chart only real numbers from the material, and label the axes and units. Do not invent values
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/code-walkthrough.md

@@ -0,0 +1,40 @@
+---
+title: "Code walkthrough"
+navTitle: "Code walkthrough"
+description: "Use this to walk through code line by line: what runs, and what the variables are"
+section: diagrams
+order: 161
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Code walkthrough](../../../components/diagrams/previews/code-walkthrough.svg)
+
+Use this to walk through code line by line: what runs, and what the variables are.
+
+If you only need to show the code, use an ordinary code block. If the code is long, cut it to the key stretch first.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Code walkthrough" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Code walkthrough" is the recommended starting point: Walk a short, important stretch of code. Say which line is running and what the variables are at that moment. Do not change facts in the original code
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/columns-join.md

@@ -0,0 +1,40 @@
+---
+title: "Join diagram"
+navTitle: "Join diagram"
+description: "Use this to show how two sides connect through a middle item"
+section: diagrams
+order: 11
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Join diagram](../../../components/diagrams/previews/columns-join.svg)
+
+Use this to show how two sides connect through a middle item.
+
+If there is no middle connection, do not force one.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Join diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Join diagram" is the recommended starting point: First name the two sides, how the middle item joins them, and which block is the focus
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/compare.md

@@ -0,0 +1,40 @@
+---
+title: "Comparison diagram"
+navTitle: "Comparison diagram"
+description: "Use this to compare two or three options under the same conditions"
+section: diagrams
+order: 91
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Comparison diagram](../../../components/diagrams/previews/compare.svg)
+
+Use this to compare two or three options under the same conditions.
+
+If you are only listing traits and there is no shared condition, use an ordinary table or an aspect diagram.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Comparison diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Comparison diagram" is the recommended starting point: Compare only when there is a real shared condition. Keep each side's facts, and do not invent a winner or a ranking
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/converter.md

@@ -0,0 +1,40 @@
+---
+title: "Conversion diagram"
+navTitle: "Conversion diagram"
+description: "Use this when one input should produce several results at once"
+section: diagrams
+order: 151
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Conversion diagram](../../../components/diagrams/previews/converter.svg)
+
+Use this when one input should produce several results at once.
+
+If there is only one result, use a tunable chart. If each result needs its own control, split them first.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Conversion diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Conversion diagram" is the recommended starting point: Keep the formulas and units for one input that yields several results. Do not invent conversions that are not in the material
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/facets.md

@@ -0,0 +1,40 @@
+---
+title: "Aspect diagram"
+navTitle: "Aspect diagram"
+description: "Use this to show several aspects of one thing, with no required order"
+section: diagrams
+order: 41
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Aspect diagram](../../../components/diagrams/previews/facets.svg)
+
+Use this to show several aspects of one thing, with no required order.
+
+If there is no order, do not draw a flow. If you are not comparing options under the same conditions, do not use a comparison diagram.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Aspect diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Aspect diagram" is the recommended starting point: List a short name and a note for each aspect, and say whether the blocks have a strict order
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/fan-out.md

@@ -0,0 +1,40 @@
+---
+title: "Fan-out diagram"
+navTitle: "Fan-out diagram"
+description: "Use this to show a first stop that then branches to several places at once"
+section: diagrams
+order: 21
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Fan-out diagram](../../../components/diagrams/previews/fan-out.svg)
+
+Use this to show a first stop that then branches to several places at once.
+
+If there is no real first stop and then a branch, do not draw a fan-out.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Fan-out diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Fan-out diagram" is the recommended starting point: First say who reaches whom, then which places are reached at once, and which place is the focus
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/icon-rail.md

@@ -0,0 +1,40 @@
+---
+title: "Illustrated list"
+navTitle: "Illustrated list"
+description: "Use this to explain independent items one by one"
+section: diagrams
+order: 61
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Illustrated list](../../../components/diagrams/previews/icon-rail.svg)
+
+Use this to explain independent items one by one.
+
+If the items have no order dependence, do not draw a flow, and do not write them as a checklist to follow.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Illustrated list" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Illustrated list" is the recommended starting point: Lead each independent note with an icon, and keep the title and body together. This is not a flow, so do not add sequence arrows
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/inspect-grid.md

@@ -0,0 +1,40 @@
+---
+title: "Grid diagram"
+navTitle: "Grid diagram"
+description: "Use this to mark which cells in a two-dimensional structure matter, and why"
+section: diagrams
+order: 201
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Grid diagram](../../../components/diagrams/previews/inspect-grid.svg)
+
+Use this to mark which cells in a two-dimensional structure matter, and why.
+
+If this is an ordinary data table and no cell needs a special note, use an ordinary table.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Grid diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Grid diagram" is the recommended starting point: Present the two-dimensional structure as a grid, and point out the cells that need a special note and why. Do not force an ordinary table into a grid diagram
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/lanes.md

@@ -0,0 +1,40 @@
+---
+title: "Message sequence"
+navTitle: "Message sequence"
+description: "Use this to show who sent what to whom, and when"
+section: diagrams
+order: 111
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Message sequence](../../../components/diagrams/previews/lanes.svg)
+
+Use this to show who sent what to whom, and when.
+
+This is not a general modeling language, and it does not support arbitrary branches, loops, or automatic routing.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Message sequence" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Message sequence" is the recommended starting point: Name the participants and the direction and order of their messages from the source. Do not add branches or loops that are not in the source
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/layers.md

@@ -0,0 +1,40 @@
+---
+title: "Layer diagram"
+navTitle: "Layer diagram"
+description: "Use this to show top-down layers that do not have to be walked in order"
+section: diagrams
+order: 31
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Layer diagram](../../../components/diagrams/previews/layers.svg)
+
+Use this to show top-down layers that do not have to be walked in order.
+
+Layers are not automatically a flow that must be walked in order.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Layer diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Layer diagram" is the recommended starting point: Name each layer, say which layers are the focus, and whether every request follows this order
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

package/docs/handbook/en/components/diagrams/other.md

@@ -0,0 +1,39 @@
+---
+title: "Other"
+navTitle: "Other"
+description: "Use this when no built-in figure fits, and you need to combine text and graphics freely"
+section: diagrams
+order: 211
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Other](../../../components/diagrams/previews/other.svg)
+
+Use this when no built-in figure fits, and you need to combine text and graphics freely.
+
+Do not treat the built-in list as a closed allowlist, and do not learn a new syntax for this.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+Other is not another ready-made template. When no built-in figure fits, or several kinds of content need to sit together, combine ordinary Markdown, safe HTML, and basic blocks such as cards, rows, columns, or steps in the same `garden compose` fence. The recommended brief is not a syntax lesson, and the list is not a closed allowlist.
+
+````markdown
+```garden compose
+Please combine text and graphics freely in one garden compose fence, from the material and the communication goal I provide. When no built-in figure fits, or several kinds of content need to sit together, use ordinary Markdown / HTML and the existing building blocks.
+
+My material:
+- (paste the content, relationships, and source wording)
+
+My goal:
+- (what the reader should understand, and what the focus is)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn a new syntax or write CSS
+- The built-in figures in the list are a starting point, not a closed allowlist; if no recipe fits, extract the real relationships and combine building blocks
+- Do not limit the result to one ready-made template; mix ordinary Markdown, safe HTML, and basic blocks such as cards, rows, columns, or steps when needed
+```
+````

package/docs/handbook/en/components/diagrams/plan.md

@@ -0,0 +1,40 @@
+---
+title: "Checklist"
+navTitle: "Checklist"
+description: "Use this when the reader should follow items one by one and come back to check progress"
+section: diagrams
+order: 191
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Checklist](../../../components/diagrams/previews/plan.svg)
+
+Use this when the reader should follow items one by one and come back to check progress.
+
+If these are only conceptual stages, use a list or a step diagram. If the reader should watch state change between steps, use a stepper.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Checklist" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Checklist" is the recommended starting point: List the steps in the order the reader will follow, and keep the wording from the source. Do not force conceptual stages into to-dos
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

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

@@ -0,0 +1,40 @@
+---
+title: "Flow diagram"
+navTitle: "Flow diagram"
+description: "Use this to show the order in which something is done"
+section: diagrams
+order: 71
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Flow diagram](../../../components/diagrams/previews/sequence.svg)
+
+Use this to show the order in which something is done.
+
+Do not add arrows to unordered items, and do not shrink type to force a horizontal row on a narrow screen.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Flow diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Flow diagram" is the recommended starting point: Use arrows only when the source text has an order. Short stages can run left to right; long stages or a narrow screen should stack top to bottom
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

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

@@ -0,0 +1,40 @@
+---
+title: "Stepper"
+navTitle: "Stepper"
+description: "Use this when the reader should pause on a step and see how state changes"
+section: diagrams
+order: 171
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Stepper](../../../components/diagrams/previews/stepper.svg)
+
+Use this when the reader should pause on a step and see how state changes.
+
+If there are only two or three static stages, use a step diagram or a flow diagram.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Stepper" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Stepper" is the recommended starting point: Let the reader step through how state changes. If the stages are only static, use a step diagram instead
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````

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

@@ -0,0 +1,40 @@
+---
+title: "Step diagram"
+navTitle: "Step diagram"
+description: "Use this to explain something step by step, with room for detail inside a step"
+section: diagrams
+order: 81
+---
+
+<!-- Generated by scripts/handbook-diagrams.mjs. Do not edit by hand. -->
+
+![Schematic for Step diagram](../../../components/diagrams/previews/steps.svg)
+
+Use this to explain something step by step, with room for detail inside a step.
+
+This is not a time-scaled bar, not a checklist to follow, and not a stepper for watching state change.
+
+Typora and VS Code / Cursor share this list. In the `/garden` picker, this row is the same figure and the same use case. Choosing it inserts a `garden compose` brief. Fill in your material and goal, then ask the AI to compile the post.
+
+The built-in picker currently inserts that brief in Chinese. The English wording below is the same recommended brief, written for the English handbook so you can copy it when you write in English.
+
+The recommended brief is a starting point, not a syntax lesson, and not the only valid form. You may still combine Markdown or safe HTML building blocks in the same `garden compose` fence.
+
+````markdown
+```garden compose
+Please make a "Step diagram" diagram in garden compose from the material and the communication goal I provide.
+
+My material:
+- (paste the original items and wording to keep)
+
+My goal:
+- (what the reader should see at a glance)
+
+Please:
+- Organize only from the material; do not invent facts or conclusions
+- Handle the graphic syntax, layout, and mobile reading yourself; do not ask me to learn tags or write CSS
+- "Step diagram" is the recommended starting point: Use a step diagram to make the order clear, and expand detail inside a step when needed. Do not turn it into a to-do list or a stepper unless the material really is that
+- A recommended figure is not the only valid form; you may still combine necessary Markdown / HTML building blocks in the same compose fence
+- Do not start a different author fence or a new syntax; use only garden compose
+```
+````