<!-- source-hash: 88db6ae7f82dae65095e5d817320bc8e -->
A client-side React component that renders a single ticket note with inline editing, delete, and author attribution capabilities.

## Key Components

### Interfaces

- **`TicketNote`** — Data model for a note, including `id`, `text`, `authorName`, `authorAvatar`, `createdAt`, and `isOwn` (controls edit/delete visibility)
- **`TicketNoteCardProps`** — Component props accepting a `TicketNote`, optional `onEdit`/`onDelete` callbacks, and `className`

### Component

- **`TicketNoteCard`** — Stateful card component managing edit mode toggle, text input state, save/cancel/keyboard interactions (`Enter` to save, `Escape` to cancel)

## Usage Example

```typescript
import { TicketNoteCard, TicketNote } from "./ticket-note-card"

const note: TicketNote = {
  id: "note-1",
  text: "Customer confirmed the issue is reproducible on Windows only.",
  authorName: "Jane Doe",
  authorAvatar: "https://cdn.example.com/avatars/jane.png",
  createdAt: "Jan 15, 2025",
  isOwn: true,
}

function NoteList() {
  const handleEdit = (id: string, text: string) => {
    console.log("Updated note:", id, text)
  }

  const handleDelete = (id: string) => {
    console.log("Deleted note:", id)
  }

  return (
    <TicketNoteCard
      note={note}
      onEdit={handleEdit}
      onDelete={handleDelete}
      className="my-2"
    />
  )
}
```

## Behavior Notes

- Edit/delete actions are only rendered when `note.isOwn` is `true`
- Save is disabled if the trimmed input is empty
- Uses `SquareAvatar` for author display and `Input` for inline editing