# XWUIDependencyVisualizer

An SVG node-and-edge graph of task dependencies: `data.tasks` become circular nodes colored by `status` (completed=green, in-progress=blue, blocked=red, pending=grey) with truncated labels, and `data.dependencies` become arrow-headed links colored by `type` (`blocks`=red, `precedes`=blue, `related`=amber). Node positions come from a `layout` config of `hierarchical` (default - roots with no incoming edge at the top, dependents pushed to deeper levels), `circular` (evenly spaced around a ring), or `auto`; when `showControls` is on a button group lets the user switch layouts live. Hovering a node shows an `XWUITooltip` with its status and incoming-dependency count, clicking fires `onClick(task)`, and with `editable` it opens an `XWUIDialog` edit stub.

## Basic Usage

A three-task chain - "Design spec" (completed) → "Build feature" (in-progress) → "QA + ship" (pending) - wired by two `precedes` dependencies.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A linear three-task graph joined by two "precedes" edges, each node colored by its status.
```

## Branching Graph

A fan-out/fan-in graph with parallel build tasks, a shared QA gate, and four node statuses.

```example
file: examples/BranchingGraph.ts
html: examples/BranchingGraph.html
title: Branching Graph
description: A spec that forks into parallel API and UI work, re-joins at QA, and blocks the release.
```

## Critical Chain

A linear go-live critical path with a blocked stage and a related side task, auto-laid out.

```example
file: examples/CriticalChain.ts
html: examples/CriticalChain.html
title: Critical Chain
description: A five-step critical path stalled by a blocked load-test stage, plus a related runbook task.
```

```api
```