<!-- source-hash: 60dbe61d194b4cd2145ee7d06610135a -->
Storybook stories for the `TicketNotesSection` component, providing visual development and testing scenarios for the ticket notes UI including note cards with author info, edit/delete actions, and note input.

## Key Components

| Export | Type | Description |
|--------|------|-------------|
| `Default` | Story | Renders a populated notes section with 3 mock notes (mix of own and others) |
| `Interactive` | Story | Fully stateful story with live add/delete note functionality |
| `ReadOnly` | Story | Notes list without `onAddNote` handler — hides the input field |
| `Empty` | Story | Zero-note state with add input available |
| `mockNotes` | `TicketNote[]` | Reusable fixture with 3 notes across 2 authors |

## Usage Example

```typescript
// Interactive story demonstrates real state management pattern
export const Interactive: Story = {
  render: function InteractiveNotes() {
    const [notes, setNotes] = useState<TicketNote[]>(mockNotes);

    return (
      <TicketNotesSection
        notes={notes}
        onAddNote={(text) => {
          setNotes(prev => [...prev, {
            id: String(Date.now()),
            text,
            authorName: 'You',
            createdAt: new Date().toLocaleString(),
            isOwn: true,
          }]);
        }}
        onDeleteNote={(id) => setNotes(prev => prev.filter(n => n.id !== id))}
      />
    );
  },
};
```

## Story Coverage

| Scenario | `notes` | `onAddNote` | `onEditNote` / `onDeleteNote` |
|----------|---------|-------------|-------------------------------|
| `Default` | 3 mock notes | ✅ | ✅ |
| `Interactive` | Stateful | ✅ live | ✅ live delete |
| `ReadOnly` | 3 mock notes | ❌ hidden | ❌ |
| `Empty` | `[]` | ✅ | ❌ |

> Stories are rendered at `600px` width via a decorator, matching a typical ticket sidebar layout.