# AUTOLAYOUT — RULES FOR GENERATION

Treat Lunacy Auto Layout as identical to Figma Auto Layout (100% same concepts/behavior; only property names may differ in Free Format

## 0) Default Behavior
- Use `autoLayout` for any UI/container that should stay aligned/spaced when text/items change.
- Use manual/absolute positioning only for decorative backgrounds, overlays, or intentional overlaps.

## 1) Container: `autoLayout` (keys + enums)
```json
"autoLayout":{"vertical":true,"spacing":16,"padding":[16,16,16,16],"align":0,"valign":0,"fixWidth":false,"fixHeight":false}
```

- `vertical: boolean`
    - `false` = horizontal row (icon+text, toolbars, button rows)
    - `true` = vertical stack (forms, lists, card content)

- `spacing: number` (px)
    - Use a small scale; don’t invent weird numbers unless needed:
    - `4, 8, 12, 16, 24, 32, 48, 60`

- `padding: [left, top, right, bottom]` (px)
    - Common: `[12,8,12,8]` (button), `[16,16,16,16]` (card), `[24,24,24,24]` (section)

- `align: number` (horizontal alignment inside container)
    - `0` left, `1` center, `2` right, `3` distribute

- `valign: number` (vertical alignment inside container)
    - `0` top, `1` center, `2` bottom, `3` distribute

- `fixWidth: boolean`
    - `true` (fixed) when the container width must not change (fixed-width bars/cards/buttons)
    - `false` (hug) when it should size to content or parent rules

- `fixHeight: boolean`
    - `true` (fixed) when the container height must not change (navbars, fixed-height rows)
    - `false` (hug) for content-driven height (most text stacks, cards)

## 2) Children inside Auto Layout (sizing + exceptions)
- `stretchWidth: boolean`
    - Use `true` (fill) for the “flex” element in a row/stack (inputs, main text block, card body).
- `stretchHeight: boolean`
    - Use `true` (fill) for the element that should absorb remaining height (rare; common in full-height panels).
- `absolutePos: boolean`
    - Use `true` for overlays/badges/floating icons that must not affect layout flow.

### Text-only: `behavior: number`
- `0` flexible (auto width+height, no wrap). Overrides layout properties: forces layer to be hug/hug.
- `1` auto-height (fixed width, wraps, height grows). Overrides layout properties: forces layer to be hug on height.
- `2` fixed (fixed box; can be stretched by auto layout).

## 3) Orientation + sizing heuristics (fast rules)
- Horizontal container:
    - Left icon/avatar: fixed size (no stretch)
    - Main content (text group / input): `stretchWidth:true`
    - Right accessory (badge/chevron/button): no stretch (hug/fixed)
- Vertical container:
    - Most children: no `stretchHeight`
    - Set children to fill width via `stretchWidth:true` when you want aligned edges

## 4) Pattern library (copy/paste)
### A) Vertical screen/list (mobile)
```json
"autoLayout":{"vertical":true,"spacing":16,"padding":[8,16,8,16],"fixWidth":true}
```
- Child rules: `stretchWidth:true`.

### B) Row: avatar + content + action
```json
"autoLayout":{"spacing":12,"valign":1,"fixHeight":true}
```
- Child rules: `stretchHeight:true`, and for content block `stretchWidth:true`; avatar/action fixed.

### C) Button internal (icon + label)
```json
"autoLayout":{"spacing":8,"padding":[8,12,8,12],"align":1,"valign":1}
```
- Child rules: text block `behavior:0`; icon fixed.

### D) Form stack
```json
"autoLayout":{"vertical":true,"spacing":16,"fixWidth":true}
```
- Child rules: `stretchWidth:true`, and for content block `stretchHeight:true`
- Field helper text: `behavior:1`

### E) Main Frame
```json
"autoLayout":{"fixWidth":true,"fixHeight":true}
```

## 5) Text layout and behavior pattern library (copy/paste)

### Text header or text body content
```json
{"_t":"TEXT","stretchWidth":true,"behavior":1}
```

### Large text to fill all area
```json
{"_t":"TEXT","stretchWidth":true,"stretchHeight":true,"behavior":2}
```

### Single line text inside button, enlarges parent container to cover text bounds
```json
{"_t":"TEXT"}
```


## 6) “Don’t waste tokens” constraints for AI generation
- Don’t explain what auto layout is.
- Prefer nesting only when it changes behavior (row inside stack, actions row inside card).
- Reuse the spacing scale (`4/8/12/16/24/32/48/60`) and common paddings.
- Don't forget to add `stretchWidth:true` to children of vertical layouts.
- Always add spacing/padding if frame contains text layer.