<!-- source-hash: 8939b0ce480239cfb76e028389e4824d -->
Storybook stories for the `Board` component, covering all major interaction states including drag-and-drop, column types, pagination, loading, and empty states.

## Key Components

### Seed Data Helpers
- **`ASSIGNEES`** — Static array of mock users with `id`, `initials`, and `name`
- **`baseTicket(i, status, overrides)`** — Factory function generating a `BoardTicket` from index, status string, and optional overrides
- **`buildSeedColumns()`** — Builds five canonical status columns (`ACTIVE`, `TECH_REQUIRED`, `ON_HOLD`, `RESOLVED`, `ARCHIVED`) with seeded tickets

### State Management Helper
- **`applyChange(columns, change)`** — Immutably applies a `BoardChange` (drag-and-drop result) to column state, handling `afterTicketId` and `beforeTicketId` insertion points

### Exported Stories

| Story | Description |
|---|---|
| `Default` | Five canonical-status columns with full DnD wired up |
| `SystemAndCustom` | Mixed system + custom columns; AI Handling refuses drops, Resolved tickets are pinned |
| `CustomColumns` | Fully custom columns decoupled from `TicketStatus` (Backlog, In Review, Blocked, Done) |
| `Collapsible` | Column collapse/expand with `localStorage` persistence via `collapseStorageKey` |
| `Pagination` | One column loads 10 of 50 tickets; `onLoadMore` appends pages after a 600ms simulated delay |
| `InitialLoading` | All columns start in `isLoading` skeleton state, resolving to seed data after 1 second |
| `Empty` | All columns empty to verify the drop placeholder rendering |

## Usage Example

```typescript
// Minimal controlled Board with DnD
const [columns, setColumns] = React.useState(buildSeedColumns())

<Board
  columns={columns}
  onChange={change => setColumns(prev => applyChange(prev, change))}
  getTicketHref={id => `/tickets/${id}`}
  onAddTicket={columnId => console.log('add to', columnId)}
/>
```

**Source:** [`Board.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/Board.stories.tsx)