# UI Flows: {{titleCase FEATURE_NAME}}

| Field | Value |
|-------|-------|
| **Feature** | {{FEATURE_NAME}} |
| **Created** | {{DATE}} |

---

## User Stories

### US001: {Primary User Story}

**As** a {user type}
**I want** to {capability}
**So that** {benefit}

**Acceptance Criteria:**
1. {Criterion 1}
2. {Criterion 2}

---

## Flow Inventory

| Flow ID | Name | Priority |
|---------|------|----------|
| **F001** | Create New Item | High |
| **F002** | Edit Existing Item | High |
| **F003** | Delete Item | Medium |

---

## F001: Create New Item

### Happy Path

```
START
  ↓
[User clicks "Add New"]
  ↓
[Modal opens with form]
  ↓
[User fills required fields]
  ↓
[User clicks "Submit"]
  ↓
[Validation passes] ✓
  ↓
[API call: POST /api/items]
  ↓
[Success response]
  ↓
[Modal closes]
  ↓
[Success toast: "Item created"]
  ↓
[Table refreshes]
  ↓
END
```

**Duration:** 15-30 seconds
**Success Rate Target:** 95%

---

### Alternative Path: Validation Error

```
[User clicks "Submit"]
  ↓
[Validation fails] ✕
  ↓
[Error messages shown inline]
  ↓
[User corrects errors]
  ↓
[Real-time validation clears errors]
  ↓
→ Returns to Happy Path
```

---

### Edge Cases

| Scenario | Behavior |
|----------|----------|
| **Duplicate Name** | Show warning, allow submit |
| **Network Error** | Show error toast, preserve data |
| **Session Expired** | Redirect to login |

---

## F002: Edit Existing Item

```
[User clicks "Edit"]
  ↓
[Modal opens with pre-filled form]
  ↓
[User modifies fields]
  ↓
[User clicks "Save"]
  ↓
[API call: PUT /api/items/{id}]
  ↓
[Success toast]
  ↓
[Table refreshes]
END
```

---

## F003: Delete Item

```
[User clicks "Delete"]
  ↓
[Confirmation dialog: "Delete item?"]
  ↓
[User confirms]
  ↓
[API call: DELETE /api/items/{id}]
  ↓
[Success toast]
  ↓
[Table refreshes]
END
```

---

## Toast Notifications

| Event | Type | Message | Duration |
|-------|------|---------|----------|
| **Item Created** | Success | "Item created successfully" | 3s |
| **Item Updated** | Success | "Item updated successfully" | 3s |
| **Item Deleted** | Success | "Item deleted successfully" | 3s |
| **Error** | Error | "Something went wrong" | 5s |

---

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| **Ctrl+N** | New Item |
| **Escape** | Close modal |
| **Enter** | Submit form |

---

## Performance Targets

| Flow | Target |
|------|--------|
| **Create Item** | < 2s (API response) |
| **Search** | < 500ms |

---

*Generated with MORPH Framework*