Compose reference

One entry, component selection inside it

Use garden compose. Select by the reader's task, not by another fence name:

The authoritative, demand-loaded catalog is npx garden ui schema: actual semantic fields, Play props/defaults/child contracts, icon names, safe HTML tags/attributes/CSS properties. npx garden ui prompt adds working recipes. styleReference also extracts current font/layout declarations, selectors, responsive conditions and source order from the installed stylesheets; it reports source defaults, not universal computed values. These are generated from the validators and actual styles; do not maintain a second exhaustive tag list. Static layout normalization is not a universal HTML/CSS API: inspect the normalized tree and output because some unsupported static layout attributes are ignored. Semantic unknown fields fail validation.

See the executable Compose active-hours chart.

Relationships → hierarchy → layout → style → actual output

First identify what belongs together. A heading and all its paragraphs must share a container. Next choose columns and proportions, then alignments and typography. Only then add surfaces and decorative details.

A static row wraps by default. Its direct text/title/stack/card children share available width (flex: 1 1 0), whereas an icon is content-sized. A heading placed directly in that row is a sibling column, not the heading of a paragraph below the row. align="center" on a row changes more than vertical placement: theme rules also center text. A centered stack propagates text alignment. For an editorial list use explicit start alignment on children of a shared right-hand group; do not center each title independently.

Direct row > stack has 12px top padding in the current theme. A group is a width:100%, min-width:0 vertical container that shrinks beside the fixed icon and reads gap without that contextual padding; use it when icon and heading must begin on the same top line. Explicit align="start" survives normalization and emits data-align.

Nested paragraphs need separate text leaves or an article content island. Two unrelated top-level leaves do not establish a shared right column. Put a full-width divider between rows, not inside the right text container, if the rule must span the icon column too. divider and separator are real primitives, not text lines.

```garden compose
<figure frame="none">
<row wrap="nowrap" align="start" gap="4">
  <icon name="book-open" size="xl"/>
  <group gap="2">
    <title align="start">Test heading — not article content</title>
    <text align="start">Explicit test paragraph: the heading and this body share the same right column. Keep the author's complete text; do not shrink or summarize it to fit.</text>
    <text align="start">A second independent test paragraph stays in that column.</text>
  </group>
</row>
<divider/>
<row wrap="nowrap" align="start" gap="4">
  <icon name="users" size="xl"/>
  <group gap="2">
    <title align="start">Second test heading</title>
    <text align="start">Another test body, aligned with its heading rather than spanning the icon column.</text>
  </group>
</row>
</figure>
```

For a native editorial list the same relationship is expressed with icon-list containing entry icon="…" title="…", and multiple text children per entry. Native paragraph children are lowered to text strings: their nested text size/alignment/layout properties are not carried into the native scene. Use a generic layout with text size controls for such precision; do not assume identical nested styling contracts. Native scenes preserve the app's keyboard/selection/detail/file-preview behavior when rendered by the Garden article host. A standalone static export is a readable fallback, not an identical interactive host.

Typography and complete-theme context

Default body text inherits the actual article's family, size and line height. There is no universal pixel baseline. This includes ordinary static text, list bodies and native readable prose; changing the article typography configuration must propagate. Semantic headings, graph labels, values, captions and controls intentionally retain their hierarchy.

Use explicit variation only for a meaningful hierarchy. Never shrink body text globally to fit a screenshot or discard facts to avoid wrapping. Inspect actual computed styles with globals → tokens → article theme → shell in the real order, on desktop and narrow widths; base component CSS alone does not prove the final result.

Markdown, safe HTML, and execution

text, title and captions are inline contexts: **bold**, _emphasis_, backticks, [links](https://example.com), ~~strike~~ and safe inline HTML such as <u>underline</u>. <u> is HTML, not standard Markdown.

Use markdown or html islands for full paragraphs, lists, headings, blockquotes, code blocks, tables, images, details/summary and other allowlisted article content. The islands share the article Markdown/GFM and safe-HTML renderer; they are not arbitrary component trees. Static text outside islands is a lightweight layout shorthand, not the whole article block grammar. Play islands are literal content, not interpolated expressions. Keep state and expressions in Play component nodes outside them.

```garden compose
<figure frame="none">
<markdown>
### Explicit test content

**Bold**, _emphasis_, `code`, [link](https://example.com), ~~strike~~ and <u>underline</u>.

- A full Markdown list
- Another test item

<details><summary>Safe HTML details</summary><p>Useful article HTML can coexist with Markdown.</p></details>
</markdown>
</figure>
```

Safe HTML supports allowlisted local style properties, including useful layout and typography; inspect the generated schema for the actual set. Unsupported tags/properties, events, unsafe URLs, executable scripts and network CSS functions report diagnostics. Do not expand the article allowlist into arbitrary execution. An intentional executable demo uses sandbox inside the same Compose entry, with literal html/css/js and no parent origin access. Sandbox layout is its own document, not inherited article prose.

Verification levels

1. Run npx garden ui check <file> (and npx garden check <file> for real file paths). Preserve original text/resources and inspect diagnostics.
2. Parse/render the actual scene; confirm accepted properties survive normalization and meaningful content appears.
3. Inspect the complete-theme render: icon rail fixed, heading and all paragraphs share the same right edge/left edge, no centered headings or full-width body beneath a detached icon row, dividers outside rows, no unintended cards/arrows, no horizontal overflow.
4. Check desktop and narrow screenshots plus geometry/computed styles; exercise choices, relations, file previews, state updates and sandbox behavior when used.
5. A hand-authored passing scene proves engine capability, not that an independent model reliably produces it from a short prompt. Report those claims separately.