## Overview [#overview]

`Document.Annotation.Sidebar.Card` renders one annotation and provides card context to its subcomponents. The default card includes author metadata, editable annotation text, and hover actions.

## Usage [#usage]

```tsx
<Document.Annotation.Sidebar.Card annotation={annotation} />
```

```tsx
<Document.Annotation.Sidebar.Card annotation={annotation}>
  <Document.Annotation.Sidebar.Card.Header />
  <Document.Annotation.Sidebar.Card.Citation />
  <Document.Annotation.Sidebar.Card.Textarea />
  <Document.Annotation.Sidebar.Card.Footer>
    <Document.Annotation.Sidebar.Card.Timestamp />
  </Document.Annotation.Sidebar.Card.Footer>
</Document.Annotation.Sidebar.Card>
```

## Examples [#examples]

### Default [#default]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="DefaultCardExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Document.Annotation.Sidebar.Card annotation={annotation} />
    ```
  </Tab>
</Tabs>

### Active [#active]

<Tabs items="['Preview', 'Code']">
  <Tab value="Preview">
    <Preview name="ActiveCardExample" />
  </Tab>

  <Tab value="Code">
    ```tsx
    <Document.Annotatable
      activeAnnotationId={annotation.id}
      annotations={[annotation]}
      onAnnotationCreate={handleCreate}
      onAnnotationUpdate={handleUpdate}
      onAnnotationDelete={handleDelete}
    >
      <Document.Annotation.Sidebar.Card annotation={annotation} />
    </Document.Annotatable>
    ```
  </Tab>
</Tabs>

## Subcomponents [#subcomponents]

### Document.Annotation.Sidebar.Card.Header [#documentannotationsidebarcardheader]

Displays the annotation author. If the author name is `Mobius`, the Mobius mark is shown instead of an avatar.

| Prop        | Type     | Description        |
| ----------- | -------- | ------------------ |
| `className` | `string` | Additional classes |

### Document.Annotation.Sidebar.Card.Textarea [#documentannotationsidebarcardtextarea]

Inline editable annotation text.

| Prop          | Type     | Description        |
| ------------- | -------- | ------------------ |
| `className`   | `string` | Additional classes |
| `placeholder` | `string` | Placeholder text   |

### Document.Annotation.Sidebar.Card.Citation [#documentannotationsidebarcardcitation]

Displays the cited document text.

| Prop        | Type        | Description             |
| ----------- | ----------- | ----------------------- |
| `className` | `string`    | Additional classes      |
| `children`  | `ReactNode` | Custom citation content |

### Document.Annotation.Sidebar.Card.Menu [#documentannotationsidebarcardmenu]

Hover actions for editing or deleting an annotation.

| Prop        | Type     | Description        |
| ----------- | -------- | ------------------ |
| `className` | `string` | Additional classes |

### Document.Annotation.Sidebar.Card.Footer [#documentannotationsidebarcardfooter]

Footer container with contextual separator styling.

| Prop        | Type        | Description        |
| ----------- | ----------- | ------------------ |
| `className` | `string`    | Additional classes |
| `children`  | `ReactNode` | Footer content     |

### Additional Subcomponents [#additional-subcomponents]

| Component                                    | Purpose                       |
| -------------------------------------------- | ----------------------------- |
| `Document.Annotation.Sidebar.Card.Actions`   | Custom action container       |
| `Document.Annotation.Sidebar.Card.Content`   | Read-only annotation text     |
| `Document.Annotation.Sidebar.Card.Delete`    | Delete button                 |
| `Document.Annotation.Sidebar.Card.Number`    | Position badge                |
| `Document.Annotation.Sidebar.Card.Root`      | Custom inner layout container |
| `Document.Annotation.Sidebar.Card.Timestamp` | Formatted creation timestamp  |
| `Document.Annotation.Sidebar.Card.Title`     | Custom card title             |