<!-- source-hash: eded9627e041539da9106ebd71cd1d56 -->
Storybook stories for the `Board` component, demonstrating all major configuration variants including drag-and-drop, column types, pagination, loading states, and collapse behavior.

## Key Components

| Export | Description |
|--------|-------------|
| `Default` | Five canonical ticket-status columns with seeded tickets and full drag-and-drop wired up |
| `SystemAndCustom` | Mixed system and custom columns mirroring the OpenFrame Tickets layout, with DnD restrictions |
| `CustomColumns` | Fully custom columns proving column color is decoupled from `TicketStatus` |
| `Collapsible` | Columns with collapse toggle persisted to `localStorage` via `collapseStorageKey` |
| `Pagination` | Demonstrates `onLoadMore` with a 600ms simulated delay, appending 10 tickets per page from a pool of 50 |
| `InitialLoading` | All columns start in `isLoading` skeleton state, resolving to seeded data after 1 second |
| `Empty` | Empty columns to verify the drop placeholder render |

**Helpers used internally:**

- `buildSeedColumns()` — generates five default status columns with varied ticket data
- `applyChange()` — immutably applies a `BoardChange` (move/reorder) to the column state

## Usage Example

```typescript
// Minimal interactive board with DnD and immutable state update
const [columns, setColumns] = React.useState(buildSeedColumns())

<Board
  columns={columns}
  onChange={change => setColumns(prev => applyChange(prev, change))}
  onTicketClick={id => console.log('clicked', id)}
  onAddTicket={colId => console.log('add to', colId)}
  collapseStorageKey="my-board-collapse"
  onLoadMore={columnId => fetchNextPage(columnId)}
/>
```