# State Model Template

Use this template to document multi-state UI components identified in Step 1.5.

---

## Component: {ComponentName}

**Source files**: `{android_source_file}`, `{hmos_source_file}`
**Parent page**: `{page_name}`
**State variable**: `{variable_name}` (type: `{enum/sealed class/Int}`)

## States

| State ID | State Name | Entry Trigger | UI Description | Source Ref |
|----------|-----------|---------------|----------------|-----------|
| S0 | {name} | {trigger description} | {visible UI in this state} | {File:Line} |
| S1 | {name} | {trigger description} | {visible UI in this state} | {File:Line} |
| S2 | {name} | {trigger description} | {visible UI in this state} | {File:Line} |

## Transitions

| From | To | Trigger | Gesture Type | Condition/Threshold | Duration | Source Ref |
|------|-----|---------|-------------|--------------------|---------|-----------| 
| S0 | S1 | {event} | {Tap/LongPress/Pan/Swipe/Sensor/Timer} | {condition if any} | {ms or N/A} | {File:Line} |
| S1 | S2 | {event} | {gesture} | {condition} | {duration} | {File:Line} |

## Per-State UI Properties

### S0: {state_name}
| Property | Value | Source Ref |
|----------|-------|-----------|
| visibility | {VISIBLE/GONE/INVISIBLE} | {File:Line} |
| background | {color/drawable} | {File:Line} |
| text_content | "{text}" | {File:Line} |
| text_color | {#RRGGBB} | {File:Line} |
| text_size | {value}sp → {value}fp | {File:Line} |
| animation | {description or "none"} | {File:Line} |
| corner_radius | {value}dp → {value}vp | {File:Line} |
| shadow/glow | {description or "none"} | {File:Line} |

### S1: {state_name}
(repeat same table structure)

## Animations Between States

| Transition | Property | From Value | To Value | Duration | Easing | Source Ref |
|-----------|----------|-----------|----------|----------|--------|-----------|
| S0→S1 | opacity | 0 | 1 | 300ms | ease-out | {File:Line} |
| S0→S1 | translateY | 100vp | 0 | 300ms | spring | {File:Line} |

## Capture Strategy

| State | Auto-capturable? | Method | Notes |
|-------|-----------------|--------|-------|
| S0 | Yes | navigate to page, capture idle | — |
| S1 | No | manual: long press and hold | need burst during hold |
| S2 | No | manual: long press + drag up | need burst during drag |

## Manual Capture Instructions (if applicable)

For states that cannot be auto-captured, provide step-by-step instructions:

```
State S1 (recording):
1. Run: node ./scripts/page_capture_burst.ts --device adb -o {output_dir} --duration 5
2. On device: long-press the microphone button and HOLD
3. Wait for burst to complete, then release

State S2 (cancelling):
1. Run: node ./scripts/page_capture_burst.ts --device adb -o {output_dir} --duration 5
2. On device: long-press mic → drag finger UP past the cancel threshold
3. Wait for burst to complete, then release
```