# Reference Template (Diátaxis: Information-Oriented)

**Purpose:** Provide accurate, complete information for lookup.

**When to use:**
- API documentation
- Configuration options
- Component props
- CLI commands
- Error codes

## Format

```mdx
---
title: [Component/API/Config] Reference
description: Complete reference for [topic]
contentType: reference
---

## Overview

Brief description of what this reference covers and when to use it.

## Properties / Parameters

| Property | Type | Required | Default | Description |
|----------|------|----------|---------|-------------|
| `name` | `string` | Yes | - | The display name |
| `enabled` | `boolean` | No | `true` | Whether feature is enabled |
| `options` | `Options` | No | `{}` | Configuration options |

## Type Definitions

```typescript
interface Options {
  /** Maximum number of items */
  maxItems?: number;
  
  /** Callback when item is selected */
  onSelect?: (item: Item) => void;
  
  /** Custom renderer */
  render?: (item: Item) => React.ReactNode;
}

interface Item {
  id: string;
  label: string;
  value: unknown;
}
```

## Methods / Functions

### `functionName(params)`

Brief description of what this function does.

**Parameters:**

| Name | Type | Required | Description |
|------|------|----------|-------------|
| `param1` | `string` | Yes | Description |
| `param2` | `Options` | No | Configuration |

**Returns:** `ReturnType` - Description of return value.

**Throws:**
- `ErrorType` - When this error occurs.

**Example:**

```typescript
const result = functionName('value', { option: true });
```

## Configuration Options

### `configOption`

<Note>
This option requires [prerequisite].
</Note>

**Type:** `string | string[]`

**Default:** `"default"`

Description of what this option does and when to use it.

```json
{
  "configOption": "value"
}
```

## Error Codes

| Code | Name | Description | Resolution |
|------|------|-------------|------------|
| `E001` | `InvalidInput` | Input validation failed | Check input format |
| `E002` | `NotFound` | Resource not found | Verify resource exists |
| `E003` | `Unauthorized` | Authentication required | Add auth header |

## Constants

| Constant | Value | Description |
|----------|-------|-------------|
| `MAX_SIZE` | `1000` | Maximum allowed size |
| `DEFAULT_TIMEOUT` | `30000` | Default timeout in ms |

## Examples

### Basic Usage

```typescript
import { Component } from 'package';

const instance = new Component({
  name: 'example',
  enabled: true,
});
```

### Advanced Usage

```typescript
import { Component, Options } from 'package';

const options: Options = {
  maxItems: 100,
  onSelect: (item) => console.log(item),
};

const instance = new Component({
  name: 'advanced',
  options,
});
```

## Related

- [Configuration Guide](/config) - How to configure this feature
- [Tutorial](/tutorial) - Step-by-step introduction
- [Other Reference](/other) - Related reference documentation
```

## Guidelines

- **Be accurate** - Every detail must be correct
- **Be complete** - Cover all properties, methods, options
- **Be consistent** - Use same format throughout
- **Be concise** - No unnecessary explanation
- **Include types** - Always show TypeScript types
- **Show examples** - Every feature needs an example
- **Link to context** - Point to related how-tos and tutorials

## Diátaxis Principles for Reference

| Principle | Application |
|-----------|-------------|
| Information-oriented | Focus on describing accurately |
| Consistent | Same structure for similar items |
| Complete | Cover everything, omit nothing |
| Neutral | No opinions, just facts |
| Well-organized | Easy to find specific info |

## Reference Patterns

### API Endpoint Reference

```mdx
### `POST /users`

Create a new user.

**Request Body:**

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `email` | `string` | Yes | User email |
| `name` | `string` | Yes | Display name |

**Response:** `201 Created`

```json
{
  "id": "usr_123",
  "email": "user@example.com",
  "name": "John Doe",
  "createdAt": "2026-01-25T10:00:00Z"
}
```

**Errors:**

| Status | Code | Description |
|--------|------|-------------|
| `400` | `VALIDATION_ERROR` | Invalid input |
| `409` | `ALREADY_EXISTS` | Email taken |
```

### CLI Command Reference

```mdx
### `devdoc deploy`

Deploy documentation to DevDoc hosting.

**Usage:**

```bash
devdoc deploy [options]
```

**Options:**

| Flag | Short | Description | Default |
|------|-------|-------------|---------|
| `--project` | `-p` | Project ID | From config |
| `--branch` | `-b` | Target branch | `main` |
| `--message` | `-m` | Deploy message | Auto |
| `--dry-run` | | Preview without deploying | `false` |

**Examples:**

```bash
# Basic deploy
devdoc deploy

# Deploy to specific project
devdoc deploy --project proj_123

# Preview changes
devdoc deploy --dry-run
```
```

### Component Props Reference

```mdx
### `<Button>`

A customizable button component.

**Props:**

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'primary' \| 'secondary' \| 'ghost'` | `'primary'` | Button style |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
| `disabled` | `boolean` | `false` | Disable button |
| `onClick` | `() => void` | - | Click handler |
| `children` | `React.ReactNode` | - | Button content |

**Example:**

```tsx
<Button variant="primary" size="lg" onClick={handleClick}>
  Click me
</Button>
```
```
