# XWUICardTask

A rich, interactive task card (Odoo / Monday.com / Lark / Asana style) that composes the PM display atoms into one preview: an optional cover image, a tags row with priority flag and an inline `XWUITaskStateSwitch`, a parent breadcrumb and title, and a footer of due-date chip, subtask ring, activity count, rating, rotting indicator, and an assignee avatar stack. The card is keyboard-focusable and fires `onClick(data)` (ignoring clicks on its interactive children) and `onStateChange(state)`; every section has a `conf_comp.show*` toggle, `editable` makes the state switch interactive, and `density` is `comfortable` or `compact`. Drive it with `data` fields like `title`, `priority`, `state`, `assignees`, `due`, `subtasks`, `tags`, and `rottingDays`; render it in kanban columns, dashboards, search results, or side panels.

## Basic Usage

The smallest possible card - only `id` and `title` ("Draft Q1 strategy") - so every optional section is omitted and just the title with its default state switch shows.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A minimal task card built from id and title alone ("Draft Q1 strategy"), exercising the all-defaults render path.
```

## Compact

Switches `density` to `compact` and turns off cover, breadcrumb, activity, rotting, and rating to fit a tight kanban column, keeping priority, state, an assignee, due date, and a 1/1 subtask badge.

```example
file: examples/Compact.ts
html: examples/Compact.html
title: Compact
description: A compact-density "Review docs PR #142" card with cover/breadcrumb/activity/rotting/rating hidden for narrow kanban columns.
```

## Full

A fully populated card - cover image, Engineering › Q1 sprint breadcrumb, high priority, in-progress state, two assignees, due date, 3/7 subtasks, 12 activities, and an 18-day-old stage feeding the rotting indicator.

```example
file: examples/Full.ts
html: examples/Full.html
title: Full
description: An every-section "Wire up onboarding flow" card showing cover, breadcrumb, priority, state, assignee stack, due date, subtasks, activity, and rotting.
```

## Blocked

A `state: "blocked"`, `priority: "critical"` incident card ("Payment webhook returning 500s") with a 12-day `rottingDays` indicator and a past `due` date that flags it as at risk.

```example
file: examples/Blocked.ts
html: examples/Blocked.html
title: Blocked
description: A critical, blocked "Payment webhook returning 500s" incident card with a 12-day rotting indicator and a past-due date signaling at-risk.
```

## Checklist Progress

A "Launch checklist" card that foregrounds an 8/10 `subtasks` ring (80% done) by switching off the noisier activity, rating, and rotting footer atoms.

```example
file: examples/ChecklistProgress.ts
html: examples/ChecklistProgress.html
title: Checklist Progress
description: A near-done "Launch checklist" card emphasizing an 8/10 subtask ring with activity, rating, and rotting hidden.
```

## Team Assigned

A "Design review" card with a five-person `assignees` stack (three avatars plus a "+2" overflow) and a `due` date two days out to mark it as due soon.

```example
file: examples/TeamAssigned.ts
html: examples/TeamAssigned.html
title: Team Assigned
description: A collaborative "Design review" card with a five-person avatar stack (three avatars + "+2") and a due-soon date two days out.
```

```api
```