# XWUIKanbanBoard

A drag-and-drop Kanban board that lays out `columns[]` side by side, each rendering its `cards[]` (title, description, assignee avatar/initials, priority arrow, tags, date, `badgeCount`) with reorder and cross-column moves, an optional per-column count vs `maxCards`, a colored header pill when `column.color` is set, and a collapsible "Completed tasks" accordion (`completedCards`). Cards can be added (`allowAddCards`), reordered (`allowReorder`), edited or removed via a per-card "⋯" menu (`allowEdit`; the edit dialog covers title/description/assignee/priority/date/tags), and new buckets appended (`allowAddColumns`); set `useRichCards` to render cards through XWUICardTask, and `groupBy` (bucket/assignee/progress/due-date/labels) plus `locale` (`en`/`ar`, using `column.titleAr`) tune the layout. Use it for task workflows and emit `onChange`, `onCardMove`, `onCardDelete`, `onTaskComplete`, `onAddTask`, and `onAddBucket` events.

## Basic Usage

A three-column board - To do, In progress, Done - seeded with four sample cards (Spec API, Wireframes, Build endpoint, Project kickoff) using default add/reorder/edit behavior.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A three-column To do / In progress / Done board with four draggable sample cards.
```

## Swimlanes by Assignee

Stacks one `groupBy: "assignee"` board per person (Sarah Chen, Alex Rivera) under a name heading, so each owner gets a horizontal swimlane across the shared To do / In progress / Done columns.

```example
file: examples/WithSwimlanes.ts
html: examples/WithSwimlanes.html
title: Swimlanes by Assignee
description: One assignee-grouped board stacked per person, forming horizontal swimlanes over the shared To do / In progress / Done columns.
```

## Cards with Colored Labels

A release board whose cards use the `@tag:color` tag syntax (backend:red, security:purple, i18n:blue…) plus a `color` left-border accent and priority arrows, grouped by `labels`.

```example
file: examples/CardLabels.ts
html: examples/CardLabels.html
title: Cards with Colored Labels
description: A release board of cards carrying color-coded @tag:color labels, left-border accents, and priority arrows, grouped by labels.
```

## WIP Column Limits

A four-column flow where Ready, In progress, and In review set a `maxCards` WIP cap, so each header shows the live card count against its limit (e.g. "In progress (3/3)").

```example
file: examples/ColumnLimits.ts
html: examples/ColumnLimits.html
title: WIP Column Limits
description: A four-column board where columns declare maxCards caps and headers render the live count against the limit (e.g. "In progress (3/3)").
```

```api
```