## Task Timeline (S—213)

A compact Gantt: tasks as bars across days, drag a bar to reschedule, pull its end to resize, with a today line.

- URL: https://sundaeui.dev/components/task-timeline
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/task-timeline.json`
- Tags: timeline, schedule, project, tasks, planning, gantt

Each task is a bar on a day grid. Drag the bar to move it; drag its right edge to change its length. Bars snap to whole days.
Dependencies draw a thin connector; moving a task past its successor flags the clash. The today line anchors the view.

### Usage

```tsx
import { TaskTimeline } from '@/components/sundae/task-timeline'

<TaskTimeline />
```

### Props

- `tasks` (`Task[]`, required): Name, start day, length, dependsOn.
- `days` (`number`, default `14`): Days shown.
- `onChange` (`(tasks: Task[]) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Project planning, launch plans, content calendars.

### When not to use

- Hundreds of tasks: use a full scheduling tool.

### Accessibility

- Each bar is a button: arrows move it a day, Shift+arrows change its length.
- Dates and clashes are in each bar’s label.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Move a day
- Shift + ← / →: Shorten / lengthen