Content, layout, and interactions (compose)
Combine article content, layout, resources, and interactions through one author entry.
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 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.
How to write
Describe the relationships and hierarchy readers should see before choosing layout and necessary styles. You can also write components directly; do not assume every component accepts arbitrary HTML/CSS properties.
Cover four things:
- How many blocks: three columns, five layers top-to-bottom, or two rows.
- What each block is called: short labels that appear on the diagram. Put explanations on the line under the name.
- What connects to what: who reaches whom, fans out, or joins. If there is no order, say so.
- Which block is the focus: name it (“the middle column”, “the lower row”).
Describe the visual relationships and desired emphasis. Defaults are a starting point, not a substitute for checking alignment and hierarchy. Explicit styling must use supported controls.
Every tag and shared token: compose reference. Every icon name: compose icons.
Rewrite patterns
Two common mistakes: naming only a topic with no structure, or spending the fence on colors and padding.
Three columns, middle joins
```garden compose
Three columns: User under Alice, Bob; Role under admin, reviewer;
Permission under orders:read, orders:approve.
Role sits in the middle and joins users to permissions. Role is the focus.
```
Hub, then fan out
```garden compose
The browser reaches the identity provider first, then fans out to HR, Finance, and Project.
All three trust the same IdP. The IdP is the focus.
```
Top-down layers
```garden compose
Five layers top to bottom: browser, identity, BFF, business service, authorization.
Identity and authorization are the focus; the rest are paths through.
Not every request walks the whole stack in order.
```
Several facets of one request
```garden compose
After the user sends a request, look at four facets: authentication, credential,
authorization, verification. Then transport and secrecy. No strict order among the six.
```
Two rows to contrast
```garden compose
Top row is delivery: understand → design → ship.
Bottom row is the exploration loop: hypothesize → cheap test → iterate or drop.
Top is background; the bottom row is the point.
```
Icons and surfaces
Use <icon name="check-circle"/> — not emoji. Combine padding, background, and radius for small chips; do not invent one-off tags per diagram.
One sample
User
Alice
Bob
admin
reviewer
Permission
orders:read
orders:approve
Concept: User ↔ Role ↔ Permission
Play (tunable)
Stay on garden compose and use DIL when readers need a dial. Mapping: repo docs/compose-dil.md.
Play charts: palette (series|categorical), yStep, overflow (expand|clip); block header may set frame: none. Title/badge rows use <stack direction="row" justify="between">. Legend: legend (auto|show|hide), legendPosition (top|bottom).
Chart examples (play)
Two official compose chart samples: eight static series bars with yStep, and a five-category weighted fusion chart (palette="categorical" + bottom legend). Illustrative data.
Static: active hours
User activity by hour (sample)
Normalized activity over the last 30 days (illustrative)
Peak 20:00
| x | Activity |
|---|---|
| 08:00 | 5% |
| 10:00 | 7% |
| 12:00 | 15% |
| 14:00 | 6% |
| 16:00 | 9% |
| 18:00 | 14% |
| 20:00 | 28% |
| 22:00 | 16% |
Interactive: personal vs global fusion weight
Default weight 45%. Twist the slider or jump 0 / 45 / 100 — five categorical bars and “best time” update together.
- Fused activity
| x | Fused activity |
|---|---|
| 08:00 | 9% |
| 12:00 | 18% |
| 18:00 | 23% |
| 20:00 | 36% |
| 22:00 | 15% |
Custom text and background colors
color controls text (inherited; children may override). backgroundColor paints only the current surface (not inherited). Both accept literal CSS named colors, transparent/currentColor, 3/4/6/8-digit hex, rgb/rgba/hsl/hsla with optional alpha. URLs, var(), calc(), declarations and arbitrary style are rejected by the same SSR/browser validator. Defaults preserve tone and theme; no font-family change. Explicit colors are not automatically dark-mode adapted: check contrast.
Static primitives: box/card, row/stack/columns/grid/grid-item, pill/band, group/field/header/footer/figure, title/text/caption/label/prose/badge, kpi/stat, list, table/tr/th/td/thead/tbody. Play: stack/columns/card/caption/badge/stat/table. Colors must be literals. Existing static background semantic tokens and chart palette/series-tone APIs are unchanged; these props do not set chart series colors.