<!-- source-hash: d45a902b18f3712e1b2aeac789ac6496 -->
Shared className generator for the chat-adjacent UI family, producing consistent Tailwind/ODS class strings for source chips, inline entity-card pills, and search-result dropdown rows.

## Key Components

### `ChipClassOptions` (interface)

| Property | Type | Description |
|---|---|---|
| `tone` | `'primary' \| 'secondary'` | Resting text color — `primary` reads as content, `secondary` as metadata |
| `density` | `'chip' \| 'list-row' \| 'card-row'` | Size/padding variant. Defaults to `'chip'` |
| `extra` | `string` | Extra classes appended verbatim (e.g. `cursor-pointer`) |

### `chatChipClass(options: ChipClassOptions): string`

Returns a composed Tailwind class string. All three density variants share border, hover transition, and accent treatment so they read as the same ODS family — only the size and frame differ.

| `density` | Sizing | Frame |
|---|---|---|
| `'chip'` | `px-2 py-0.5 text-h6` | Border + card bg + rounded |
| `'list-row'` | `px-3 py-2 text-sm` | Border + card bg + rounded |
| `'card-row'` | `px-2 py-1 text-h6` | No border, no bg (sits under a card frame) |

## Usage Example

```typescript
import { chatChipClass } from './chip-styles'

// Citation chip below an assistant turn
const citationClass = chatChipClass({ tone: 'secondary' })

// Search-bar dropdown row with click affordance
const searchRowClass = chatChipClass({
  tone: 'primary',
  density: 'list-row',
  extra: 'cursor-pointer w-full',
})

// Tracking strip inside a card frame (no border/bg)
const cardRowClass = chatChipClass({
  tone: 'secondary',
  density: 'card-row',
})
```

**Source:** [`chip-styles.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chip-styles.ts)