# XWUIProjectGoalsPanel

A goals/OKR panel for a work plan that lists each `data.goals[]` entry as a row showing its `title` and `status` with a "Connect tasks" button (fires `onConnectTasks(goalId)`), or shows an empty "Set a new goal for your plan" state when there are none. Clicking "Add a goal" opens an inline editor (goal-name `XWUIInputText` + end-date `XWUIDatePicker`) whose Save emits `onAddGoal({ title, endDate })`. Each goal is a `WorkGoal` (id, planId, title, `status`, `connectedTaskIds`); user-supplied titles are escaped before render. Use it to track plan-level goals and wire them to existing tasks.

## Basic Usage

A single in-progress goal ("Q1 launch readiness", planId `plan-team-ops`) with two connected task IDs, plus an `onConnectTasks` callback that logs the goal id.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A goals panel with one linked in-progress goal and a connect-tasks callback.
```

## Multiple Goals

Several goals across every status value, rendered as a stacked list.

```example
file: examples/MultipleGoals.ts
html: examples/MultipleGoals.html
title: Multiple Goals
description: A completed, an in-progress (with end date), and a not-started goal shown together.
```

## Add and Connect

Both interactive callbacks wired: the add-goal editor and per-row connect-tasks.

```example
file: examples/AddAndConnect.ts
html: examples/AddAndConnect.html
title: Add and Connect
description: Wires onAddGoal (inline editor Save) and onConnectTasks (per-goal button) together.
```

```api
```