# pom XML Reference

A compact reference for the pom XML format, designed to be pasted into LLM prompts.

## Basics

- Slide size: `{ w: 1280, h: 720 }` (px)
- Colors: 6-digit hex (no `#` prefix) e.g. `FF0000`
- Attribute values are written as strings. Numbers and booleans are auto-converted
- Nested object attributes use dot notation (e.g. `fill.color="1D4ED8"`)

## Common Attributes (All Nodes)

| Attribute         | Type                                                       | Description                                |
| ----------------- | ---------------------------------------------------------- | ------------------------------------------ |
| `w`               | number / `"max"` / `"50%"`                                 | Width                                      |
| `h`               | number / `"max"` / `"50%"`                                 | Height                                     |
| `minW` `maxW`     | number                                                     | Min / max width                            |
| `minH` `maxH`     | number                                                     | Min / max height                           |
| `padding`         | number / `padding.top="8" padding.bottom="8"`              | Padding                                    |
| `backgroundColor` | hex                                                        | Background color                           |
| `backgroundImage` | `backgroundImage.src="url" backgroundImage.sizing="cover"` | Background image                           |
| `border`          | `border.color="333" border.width="1"`                      | Border                                     |
| `borderRadius`    | number                                                     | Border radius (px)                         |
| `opacity`         | 0-1                                                        | Background opacity                         |
| `margin`          | number / `margin.top="8" margin.bottom="8"`                | Margin                                     |
| `zIndex`          | number                                                     | Stacking order (higher = on top)           |
| `position`        | `relative` / `absolute`                                    | Positioning mode                           |
| `top`             | number                                                     | Top offset (when using position)           |
| `right`           | number                                                     | Right offset (when using position)         |
| `bottom`          | number                                                     | Bottom offset (when using position)        |
| `left`            | number                                                     | Left offset (when using position)          |
| `alignSelf`       | `auto` / `start` / `center` / `end` / `stretch`            | Override parent's alignItems for this node |

## Layout Nodes

### VStack / HStack

Arranges children vertically (VStack) / horizontally (HStack).

```xml
<VStack gap="16" alignItems="stretch" justifyContent="start">
  <Text>A</Text>
  <Text>B</Text>
</VStack>
```

| Attribute        | Values                                                                      |
| ---------------- | --------------------------------------------------------------------------- |
| `gap`            | number (spacing between children)                                           |
| `alignItems`     | `start` / `center` / `end` / `stretch`                                      |
| `justifyContent` | `start` / `center` / `end` / `spaceBetween` / `spaceAround` / `spaceEvenly` |
| `flexWrap`       | `nowrap` / `wrap` / `wrapReverse`                                           |
| `shadow`         | `shadow.type="outer" shadow.blur="4" shadow.offset="2" shadow.color="000"`  |

> **Note:** Children of VStack / HStack default to `flexShrink=1` (same behavior as CSS Flexbox). Even when combining `%` widths with `gap`, children automatically shrink to fit within the parent.

### Box

A container that holds exactly one child. Used for adding padding or fixed sizing.

```xml
<Box w="50%" padding="20" backgroundColor="FFFFFF">
  <Text>Content</Text>
</Box>
```

| Attribute | Type                                                                       | Description |
| --------- | -------------------------------------------------------------------------- | ----------- |
| `shadow`  | `shadow.type="outer" shadow.blur="4" shadow.offset="2" shadow.color="000"` | Shadow      |

### Layer

Positions children using absolute coordinates. Children require `x` and `y`. Source order determines stacking.

```xml
<Layer w="600" h="400">
  <Shape shapeType="roundRect" x="50" y="50" w="120" h="80" fill.color="1D4ED8" text="A" color="FFFFFF" />
  <Line x1="170" y1="90" x2="300" y2="90" endArrow="true" />
</Layer>
```

## Content Nodes

### Text

```xml
<Text fontSize="24" bold="true" color="333333" textAlign="center">Title</Text>
```

| Attribute                | Type / Values                                              |
| ------------------------ | ---------------------------------------------------------- |
| `fontSize`               | number (default: 24)                                       |
| `color`                  | hex (text color)                                           |
| `textAlign`              | `left` / `center` / `right`                                |
| `bold` `italic` `strike` | `true` / `false`                                           |
| `underline`              | `true` / `underline.style="wavy" underline.color="FF0000"` |
| `highlight`              | hex (highlight color)                                      |
| `fontFamily`             | string (default: `Noto Sans JP`)                           |
| `lineHeight`             | number (default: 1.3)                                      |

Font size guide: Title 28-40 / Heading 18-24 / Body 13-16 / Caption 10-12

### Ul (Bullet List)

```xml
<Ul fontSize="14" color="333333">
  <Li>Item A</Li>
  <Li>Item B</Li>
  <Li bold="true">Item C (individual style)</Li>
</Ul>
```

| Attribute                | Type / Values                    |
| ------------------------ | -------------------------------- |
| `fontSize`               | number (default: 24)             |
| `color`                  | hex (text color)                 |
| `textAlign`              | `left` / `center` / `right`      |
| `bold` `italic` `strike` | `true` / `false`                 |
| `fontFamily`             | string (default: `Noto Sans JP`) |
| `lineHeight`             | number (default: 1.3)            |

Li attributes (override parent styles): `bold`, `italic`, `strike`, `underline`, `highlight`, `color`, `fontSize`, `fontFamily`

### Ol (Numbered List)

All Ul attributes plus:

```xml
<Ol fontSize="14" numberType="alphaLcPeriod" numberStartAt="3">
  <Li>Item A</Li>
  <Li>Item B</Li>
</Ol>
```

| Attribute       | Type / Values                                           |
| --------------- | ------------------------------------------------------- |
| `numberType`    | `alphaLcPeriod` / `alphaUcPeriod` / `arabicParenR` etc. |
| `numberStartAt` | number (start number, default: 1)                       |

### Image

```xml
<Image src="https://example.com/img.png" w="200" h="150" />
```

| Attribute | Type / Values                                                                                                            |
| --------- | ------------------------------------------------------------------------------------------------------------------------ |
| `src`     | string (URL / path / base64)                                                                                             |
| `sizing`  | `'{"type":"contain"}' ` / `'{"type":"cover"}'` / `'{"type":"crop","x":0,"y":0,"w":100,"h":100}'`                         |
| `shadow`  | `shadow.type="outer" shadow.blur="4" shadow.offset="2" shadow.color="000"` (shared by Image, Box, Shape, VStack, HStack) |

### Icon

Displays an icon from the Lucide icon library (1,900+ icons available).

```xml
<Icon name="cpu" size="32" color="1D4ED8" />
<Icon name="cpu" variant="circle-filled" bgColor="E8F0FE" color="1D4ED8" />
```

| Attribute | Type / Values                                                            |
| --------- | ------------------------------------------------------------------------ |
| `name`    | Lucide icon name (required). See examples below                          |
| `size`    | number (default: 24, in px)                                              |
| `color`   | hex color (`#` prefix optional, default: `#000000`)                      |
| `variant` | `circle-filled`, `circle-outlined`, `square-filled`, `square-outlined`   |
| `bgColor` | hex color for background shape (`#` prefix optional, default: `#E0E0E0`) |

All Lucide v0.577.0 icons are available. Icon names use kebab-case. Common examples by category:

- **Technology**: `cpu`, `database`, `cloud`, `server`, `code`, `terminal`, `wifi`, `globe`, `monitor`, `smartphone`, `laptop`, `hard-drive`, `circuit-board`, `microchip`, `binary`, `braces`, `git-branch`, `github`, `container`
- **Business**: `briefcase`, `building`, `building-2`, `factory`, `landmark`, `wallet`, `credit-card`, `receipt`, `banknote`, `coins`, `piggy-bank`, `hand-coins`, `calculator`, `stamp`
- **Charts & Data**: `bar-chart`, `bar-chart-2`, `bar-chart-3`, `line-chart`, `pie-chart`, `trending-up`, `trending-down`, `activity`, `gauge`, `presentation`
- **Communication**: `mail`, `message-square`, `message-circle`, `phone`, `video`, `at-sign`, `send`, `inbox`, `megaphone`, `bell`, `rss`
- **People**: `user`, `users`, `contact`, `user-plus`, `user-check`, `user-x`, `person-standing`, `baby`, `accessibility`
- **Arrows & Navigation**: `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `chevron-right`, `chevron-left`, `chevron-up`, `chevron-down`, `move`, `corner-down-right`, `external-link`, `redo`, `undo`
- **Actions**: `search`, `settings`, `filter`, `download`, `upload`, `share`, `copy`, `scissors`, `trash`, `edit`, `plus`, `minus`, `refresh-cw`, `rotate-cw`, `save`, `log-in`, `log-out`, `power`
- **Status & Alerts**: `check`, `check-circle`, `x`, `x-circle`, `alert-triangle`, `alert-circle`, `info`, `help-circle`, `ban`, `thumbs-up`, `thumbs-down`
- **Security**: `shield`, `shield-check`, `lock`, `unlock`, `key`, `fingerprint`, `scan`, `eye`, `eye-off`
- **Files & Folders**: `file`, `file-text`, `file-code`, `file-spreadsheet`, `folder`, `folder-open`, `archive`, `paperclip`, `clipboard`
- **Media**: `image`, `camera`, `film`, `music`, `volume-2`, `mic`, `play`, `pause`, `skip-forward`, `skip-back`
- **Time**: `calendar`, `clock`, `timer`, `hourglass`, `alarm-clock`, `calendar-check`, `calendar-plus`
- **Shapes & Symbols**: `star`, `heart`, `zap`, `target`, `lightbulb`, `flag`, `bookmark`, `award`, `crown`, `gem`, `flame`, `snowflake`, `sun`, `moon`, `cloud-rain`
- **Layout & UI**: `layout`, `grid`, `list`, `table`, `columns`, `rows`, `sidebar`, `panel-left`, `panel-right`, `maximize`, `minimize`, `menu`
- **Maps & Travel**: `map`, `map-pin`, `compass`, `navigation`, `plane`, `car`, `truck`, `train`, `ship`, `bike`, `bus`
- **Health & Science**: `heart-pulse`, `thermometer`, `pill`, `syringe`, `microscope`, `dna`, `atom`, `flask-conical`, `beaker`
- **Food & Nature**: `apple`, `cherry`, `grape`, `leaf`, `trees`, `flower`, `sprout`, `mountain`, `waves`

For the full icon list, see https://lucide.dev/icons/ (use the icon name in kebab-case as the `name` attribute).

### Shape

```xml
<Shape shapeType="roundRect" w="200" h="60" text="Button" fontSize="16" fill.color="1D4ED8" color="FFFFFF" />
```

| Attribute       | Type / Values                                                                                             |
| --------------- | --------------------------------------------------------------------------------------------------------- |
| `shapeType`     | Shape type (178 types total — see below)                                                                  |
| `text`          | string (text inside shape)                                                                                |
| `fill`          | `fill.color="hex" fill.transparency="0.5"`                                                                |
| `line`          | `line.color="hex" line.width="2" line.dashType="dash"`                                                    |
| `shadow`        | `shadow.type="outer" shadow.blur="4" shadow.offset="2" shadow.color="000"`                                |
| Text attributes | `fontSize` `color` `textAlign` `bold` `italic` `underline` `strike` `highlight` `fontFamily` `lineHeight` |

**Full shapeType list:**

Basic shapes:
`arc`, `bevel`, `blockArc`, `can`, `chord`, `corner`, `cube`, `decagon`, `diagStripe`, `diamond`, `dodecagon`, `donut`, `ellipse`, `folderCorner`, `frame`, `funnel`, `halfFrame`, `heptagon`, `hexagon`, `homePlate`, `nonIsoscelesTrapezoid`, `octagon`, `parallelogram`, `pentagon`, `pie`, `pieWedge`, `plaque`, `plus`, `rect`, `roundRect`, `rtTriangle`, `trapezoid`, `triangle`

Rounded / snipped rectangles:
`round1Rect`, `round2DiagRect`, `round2SameRect`, `snip1Rect`, `snip2DiagRect`, `snip2SameRect`, `snipRoundRect`

Arrows:
`bentArrow`, `bentUpArrow`, `chevron`, `circularArrow`, `curvedDownArrow`, `curvedLeftArrow`, `curvedRightArrow`, `curvedUpArrow`, `downArrow`, `leftArrow`, `leftCircularArrow`, `leftRightArrow`, `leftRightCircularArrow`, `leftRightUpArrow`, `leftUpArrow`, `notchedRightArrow`, `quadArrow`, `rightArrow`, `stripedRightArrow`, `swooshArrow`, `upArrow`, `upDownArrow`, `uturnArrow`

Arrow callouts:
`downArrowCallout`, `leftArrowCallout`, `leftRightArrowCallout`, `quadArrowCallout`, `rightArrowCallout`, `upArrowCallout`, `upDownArrowCallout`

Callouts:
`accentBorderCallout1`, `accentBorderCallout2`, `accentBorderCallout3`, `accentCallout1`, `accentCallout2`, `accentCallout3`, `borderCallout1`, `borderCallout2`, `borderCallout3`, `callout1`, `callout2`, `callout3`, `cloudCallout`, `wedgeEllipseCallout`, `wedgeRectCallout`, `wedgeRoundRectCallout`

Stars & banners:
`doubleWave`, `ellipseRibbon`, `ellipseRibbon2`, `horizontalScroll`, `irregularSeal1`, `irregularSeal2`, `leftRightRibbon`, `ribbon`, `ribbon2`, `star4`, `star5`, `star6`, `star7`, `star8`, `star10`, `star12`, `star16`, `star24`, `star32`, `verticalScroll`, `wave`

Flowchart:
`flowChartAlternateProcess`, `flowChartCollate`, `flowChartConnector`, `flowChartDecision`, `flowChartDelay`, `flowChartDisplay`, `flowChartDocument`, `flowChartExtract`, `flowChartInputOutput`, `flowChartInternalStorage`, `flowChartMagneticDisk`, `flowChartMagneticDrum`, `flowChartMagneticTape`, `flowChartManualInput`, `flowChartManualOperation`, `flowChartMerge`, `flowChartMultidocument`, `flowChartOfflineStorage`, `flowChartOffpageConnector`, `flowChartOnlineStorage`, `flowChartOr`, `flowChartPredefinedProcess`, `flowChartPreparation`, `flowChartProcess`, `flowChartPunchedCard`, `flowChartPunchedTape`, `flowChartSort`, `flowChartSummingJunction`, `flowChartTerminator`

Action buttons:
`actionButtonBackPrevious`, `actionButtonBeginning`, `actionButtonBlank`, `actionButtonDocument`, `actionButtonEnd`, `actionButtonForwardNext`, `actionButtonHelp`, `actionButtonHome`, `actionButtonInformation`, `actionButtonMovie`, `actionButtonReturn`, `actionButtonSound`

Brackets & braces:
`bracePair`, `bracketPair`, `leftBrace`, `leftBracket`, `rightBrace`, `rightBracket`

Math symbols:
`mathDivide`, `mathEqual`, `mathMinus`, `mathMultiply`, `mathNotEqual`, `mathPlus`

Others:
`chartPlus`, `chartStar`, `chartX`, `cloud`, `cornerTabs`, `gear6`, `gear9`, `heart`, `lightningBolt`, `line`, `lineInv`, `moon`, `noSmoking`, `plaqueTabs`, `smileyFace`, `squareTabs`, `sun`, `teardrop`

### Line

```xml
<Line x1="100" y1="100" x2="300" y2="100" color="333333" lineWidth="2" endArrow="true" />
```

| Attribute                 | Type / Values                                                                         |
| ------------------------- | ------------------------------------------------------------------------------------- |
| `x1` `y1` `x2` `y2`       | number (absolute coordinates, required)                                               |
| `color`                   | hex (default: `000000`)                                                               |
| `lineWidth`               | number (default: 1)                                                                   |
| `dashType`                | `solid` / `dash` / `dashDot` / `lgDash` / `sysDash` etc.                              |
| `beginArrow` / `endArrow` | `true` / `endArrow.type="triangle"` (types: none/arrow/triangle/diamond/oval/stealth) |

## Data Visualization Nodes

### Table

```xml
<Table>
  <TableColumn width="200" />
  <TableColumn width="100" />
  <TableRow>
    <TableCell bold="true" backgroundColor="DBEAFE">Name</TableCell>
    <TableCell bold="true" backgroundColor="DBEAFE">Score</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Alice</TableCell>
    <TableCell>95</TableCell>
  </TableRow>
</Table>
```

- `<TableColumn>`: `width` (omit for equal distribution)
- `<TableRow>`: `height` (omit to use `defaultRowHeight`, default 32)
- `<TableCell>`: text content + `fontSize` `color` `bold` `italic` `underline` `strike` `highlight` `textAlign` `backgroundColor` `colspan` `rowspan`

### Chart

```xml
<Chart chartType="bar" w="500" h="300" showLegend="true" chartColors='["0088CC","00AA00"]'>
  <ChartSeries name="Sales">
    <ChartDataPoint label="Jan" value="100" />
    <ChartDataPoint label="Feb" value="150" />
  </ChartSeries>
</Chart>
```

| Attribute     | Type / Values                                          |
| ------------- | ------------------------------------------------------ |
| `chartType`   | `bar` / `line` / `pie` / `area` / `doughnut` / `radar` |
| `showLegend`  | boolean                                                |
| `showTitle`   | boolean                                                |
| `title`       | string                                                 |
| `chartColors` | JSON array `'["hex1","hex2"]'`                         |
| `radarStyle`  | `standard` / `marker` / `filled` (radar only)          |

### Timeline

```xml
<Timeline direction="horizontal" w="1000" h="120">
  <TimelineItem date="Q1" title="Phase 1" description="Foundation" color="4CAF50" />
  <TimelineItem date="Q2" title="Phase 2" description="Development" color="2196F3" />
</Timeline>
```

| Attribute   | Values                    |
| ----------- | ------------------------- |
| `direction` | `horizontal` / `vertical` |

`<TimelineItem>`: `date` (required) `title` (required) `description` `color`

### Matrix

```xml
<Matrix w="600" h="500">
  <MatrixAxes x="Cost" y="Impact" />
  <MatrixQuadrants topLeft="Quick Wins" topRight="Strategic" bottomLeft="Low Priority" bottomRight="Avoid" />
  <MatrixItem label="Initiative A" x="0.2" y="0.8" color="4CAF50" />
  <MatrixItem label="Initiative B" x="0.7" y="0.6" />
</Matrix>
```

- Coordinates: (0,0) = bottom-left, (1,1) = top-right (mathematical coordinate system)
- `<MatrixAxes>`: `x` `y` (axis labels, required)
- `<MatrixQuadrants>`: `topLeft` `topRight` `bottomLeft` `bottomRight`
- `<MatrixItem>`: `label` `x` `y` (required) `color`

### Tree

```xml
<Tree layout="vertical" nodeShape="roundRect" w="600" h="400">
  <TreeItem label="CEO" color="1D4ED8">
    <TreeItem label="CTO" color="0EA5E9">
      <TreeItem label="Engineer A" />
    </TreeItem>
    <TreeItem label="CFO" color="16A34A" />
  </TreeItem>
</Tree>
```

| Attribute        | Type / Values                                         |
| ---------------- | ----------------------------------------------------- |
| `layout`         | `vertical` / `horizontal`                             |
| `nodeShape`      | `rect` / `roundRect` / `ellipse`                      |
| `nodeWidth`      | number (default: 120)                                 |
| `nodeHeight`     | number (default: 40)                                  |
| `levelGap`       | number (default: 60)                                  |
| `siblingGap`     | number (default: 20)                                  |
| `connectorStyle` | `connectorStyle.color="333" connectorStyle.width="2"` |

`<TreeItem>` can be recursively nested. Only one root allowed.

### Flow

```xml
<Flow direction="horizontal" w="500" h="300">
  <FlowNode id="start" shape="flowChartTerminator" text="Start" color="4CAF50" />
  <FlowNode id="process" shape="flowChartProcess" text="Process" />
  <FlowNode id="decision" shape="flowChartDecision" text="OK?" color="FF9800" />
  <FlowNode id="end" shape="flowChartTerminator" text="End" color="E91E63" />
  <FlowConnection from="start" to="process" />
  <FlowConnection from="process" to="decision" />
  <FlowConnection from="decision" to="end" label="Yes" />
</Flow>
```

| Attribute        | Type / Values                                                                          |
| ---------------- | -------------------------------------------------------------------------------------- |
| `direction`      | `horizontal` / `vertical`                                                              |
| `nodeWidth`      | number (default: 120)                                                                  |
| `nodeHeight`     | number (default: 60)                                                                   |
| `nodeGap`        | number (default: 80)                                                                   |
| `connectorStyle` | `connectorStyle.color="hex" connectorStyle.width="2" connectorStyle.arrowType="arrow"` |

`<FlowNode>` attributes:

| Attribute   | Type / Values                                                                                                                                                                                                                                                                                     |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`        | string (required) — Unique node identifier                                                                                                                                                                                                                                                        |
| `shape`     | `flowChartTerminator` / `flowChartProcess` / `flowChartDecision` / `flowChartInputOutput` / `flowChartDocument` / `flowChartPredefinedProcess` / `flowChartConnector` / `flowChartPreparation` / `flowChartManualInput` / `flowChartManualOperation` / `flowChartDelay` / `flowChartMagneticDisk` |
| `text`      | string (required) — Display text                                                                                                                                                                                                                                                                  |
| `color`     | hex color (e.g. `"4CAF50"`) — Node fill color                                                                                                                                                                                                                                                     |
| `textColor` | hex color (e.g. `"FFFFFF"`) — Text color                                                                                                                                                                                                                                                          |
| `width`     | number — Individual node width (overrides `nodeWidth`)                                                                                                                                                                                                                                            |
| `height`    | number — Individual node height (overrides `nodeHeight`)                                                                                                                                                                                                                                          |

`<FlowConnection>`: `from` `to` (required) `label` `color`

### ProcessArrow

```xml
<ProcessArrow direction="horizontal" w="1000" h="80">
  <ProcessArrowStep label="Plan" color="4472C4" />
  <ProcessArrowStep label="Design" color="5B9BD5" />
  <ProcessArrowStep label="Develop" color="70AD47" />
  <ProcessArrowStep label="Release" color="ED7D31" />
</ProcessArrow>
```

| Attribute                | Type / Values                                              |
| ------------------------ | ---------------------------------------------------------- |
| `direction`              | `horizontal` / `vertical`                                  |
| `itemWidth`              | number (default: 150)                                      |
| `itemHeight`             | number (default: 80)                                       |
| `gap`                    | number (default: -(itemHeight×0.35), negative for overlap) |
| `fontSize`               | number (default: 14)                                       |
| `bold` `italic` `strike` | boolean                                                    |
| `underline`              | `true` / `underline.style="wavy" underline.color="FF0000"` |
| `highlight`              | hex (highlight color)                                      |

`<ProcessArrowStep>`: `label` (required) `color` (default: `4472C4`) `textColor` (default: `FFFFFF`)

### Pyramid

```xml
<Pyramid direction="up" w="600" h="300">
  <PyramidLevel label="Strategy" color="E91E63" />
  <PyramidLevel label="Tactics" color="9C27B0" />
  <PyramidLevel label="Execution" color="673AB7" />
</Pyramid>
```

| Attribute   | Type / Values           |
| ----------- | ----------------------- |
| `direction` | `up` (default) / `down` |
| `fontSize`  | number (default: 14)    |
| `bold`      | boolean                 |

`<PyramidLevel>`: `label` (required) `color` (default: `4472C4`) `textColor` (default: `FFFFFF`)

- `direction="up"`: First PyramidLevel is the apex (narrowest), last is the base (widest)
- `direction="down"`: First PyramidLevel is the top (widest), last is the bottom (narrowest)

## Child Element Tag Reference

| Parent Node      | Child Tags                                          | Mapped Property              |
| ---------------- | --------------------------------------------------- | ---------------------------- |
| `<Chart>`        | `<ChartSeries>` > `<ChartDataPoint>`                | `data`                       |
| `<Table>`        | `<TableColumn>`, `<TableRow>` > `<TableCell>`       | `columns`, `rows`            |
| `<Timeline>`     | `<TimelineItem>`                                    | `items`                      |
| `<Matrix>`       | `<MatrixAxes>`, `<MatrixQuadrants>`, `<MatrixItem>` | `axes`, `quadrants`, `items` |
| `<Tree>`         | `<TreeItem>` (recursive)                            | `data`                       |
| `<Flow>`         | `<FlowNode>`, `<FlowConnection>`                    | `nodes`, `connections`       |
| `<ProcessArrow>` | `<ProcessArrowStep>`                                | `steps`                      |
| `<Pyramid>`      | `<PyramidLevel>`                                    | `levels`                     |

When the same property is specified via both attributes (JSON string) and child elements, child elements take precedence.

## Slide Patterns

### Basic Structure

```xml
<VStack w="100%" h="max" padding="48" gap="24" alignItems="stretch">
  <Text fontSize="32" bold="true">Title</Text>
  <Text fontSize="14">Body text</Text>
</VStack>
```

### Two-Column Layout

```xml
<VStack w="100%" h="max" padding="48" gap="24" alignItems="stretch">
  <Text fontSize="28" bold="true">Title</Text>
  <HStack gap="24" alignItems="start">
    <Box w="50%" padding="20" backgroundColor="FFFFFF" borderRadius="8">
      <Text fontSize="14">Left column</Text>
    </Box>
    <Box w="50%" padding="20" backgroundColor="FFFFFF" borderRadius="8">
      <Text fontSize="14">Right column</Text>
    </Box>
  </HStack>
</VStack>
```

## Notes

- Colors do not need `#` prefix (`FF0000`)
- `alignItems` / `justifyContent` use `start` / `end` (not `left` / `right`)
- `Box` accepts exactly one child (not an array)
- Property names are `w` / `h` (not `width` / `height`)
- Children of `Layer` require `x` and `y`
- `Tree` must have exactly one root `<TreeItem>`