## Document.Annotation.Sidebar [#documentannotationsidebar]

Container for the annotation list. Renders default children if none provided.

```tsx
// Default
<Document.Annotation.Sidebar />

// Custom structure
<Document.Annotation.Sidebar className="w-96">
  <Document.Annotation.Sidebar.Header>
    <h3>My Notes</h3>
  </Document.Annotation.Sidebar.Header>
  <Document.Annotation.Sidebar.List />
  <Document.Annotation.Sidebar.Empty>
    No annotations yet
  </Document.Annotation.Sidebar.Empty>
</Document.Annotation.Sidebar>
```

### Props [#props]

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

***

## Document.Annotation.Sidebar.Header [#documentannotationsidebarheader]

Header section of the sidebar.

```tsx
// Default (shows "Annotations" + count)
<Document.Annotation.Sidebar.Header />

// Custom
<Document.Annotation.Sidebar.Header className="p-4 border-b">
  <div className="flex justify-between">
    <h3>Review Notes</h3>
    <Badge>{annotations.length}</Badge>
  </div>
</Document.Annotation.Sidebar.Header>
```

### Props [#props-1]

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

***

## Document.Annotation.Sidebar.List [#documentannotationsidebarlist]

Container for annotation cards. Auto-renders cards if no children provided.

```tsx
// Default
<Document.Annotation.Sidebar.List />

// Custom rendering
<Document.Annotation.Sidebar.List className="divide-y">
  {annotations.map((annotation) => (
    <Document.Annotation.Sidebar.Card key={annotation.id} annotation={annotation}>
      {/* custom card content */}
    </Document.Annotation.Sidebar.Card>
  ))}
</Document.Annotation.Sidebar.List>
```

### Props [#props-2]

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

***

## Document.Annotation.Sidebar.Empty [#documentannotationsidebarempty]

Shown when there are no annotations.

```tsx
<Document.Annotation.Sidebar.Empty className="p-8 text-center">
  <MessageSquare className="h-8 w-8 mx-auto mb-2 opacity-50" />
  <p>Select text to add a note</p>
</Document.Annotation.Sidebar.Empty>
```

### Props [#props-3]

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

***

## Document.Annotation.Sidebar.Card [#documentannotationsidebarcard]

Renders a single annotation card. Provides context for child components via `useAnnotationCard()`.

```tsx
<Document.Annotation.Sidebar.Card annotation={annotation} className="p-4">
  <Document.Annotation.Sidebar.Card.Citation />
  <Document.Annotation.Sidebar.Card.Textarea placeholder="Add note..." />
  <Document.Annotation.Sidebar.Card.Delete />
</Document.Annotation.Sidebar.Card>
```

### Props [#props-4]

| Prop         | Type             | Description                         |
| ------------ | ---------------- | ----------------------------------- |
| `annotation` | `AnnotationData` | The annotation to render (required) |
| `className`  | `string`         | Additional classes                  |
| `children`   | `ReactNode`      | Custom card content                 |

***

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

Displays author avatar and name. When the author name is "Mobius", the Mobius logo is shown instead of an avatar. Uses `defaultAuthor` as a fallback if the annotation has no author set.

```tsx
// Default (shows author avatar and name)
<Document.Annotation.Sidebar.Card.Header />

// Custom styling
<Document.Annotation.Sidebar.Card.Header className="mb-4" />
```

### Props [#props-5]

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

***

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

Displays the cited text from the document.

```tsx
// Default (shows quoted text)
<Document.Annotation.Sidebar.Card.Citation />

// Custom
<Document.Annotation.Sidebar.Card.Citation className="text-xs italic text-muted-foreground">
  {/* children override default content */}
</Document.Annotation.Sidebar.Card.Citation>
```

### Props [#props-6]

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

***

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

Editable textarea for the annotation text.

```tsx
<Document.Annotation.Sidebar.Card.Textarea
  placeholder="Add your annotation..."
  className="min-h-[100px]"
/>
```

### Props [#props-7]

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

***

## Document.Annotation.Sidebar.Card.Delete [#documentannotationsidebarcarddelete]

Delete button for the annotation.

```tsx
// Default
<Document.Annotation.Sidebar.Card.Delete />

// Custom content
<Document.Annotation.Sidebar.Card.Delete className="text-destructive">
  <Trash2 className="h-4 w-4" />
  Remove
</Document.Annotation.Sidebar.Card.Delete>
```

### Props [#props-8]

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